用JS / Jquery在“提交”时将两个textarea输入合并为一个textarea输入

Question

我有一个站点，仅允许在提交后将这些输入发送到服务器：

• 名称（输入）
• 电话（输入）
• 电子邮件（输入）
• 消息（文本区域）

我的服务器只能接收上述字段。

我想创建其他文本区域，并在Submit事件中将它们组合在一起。它会在网站上显示为：

• 名称（输入）
• 电话（输入）
• 电子邮件（输入）
• 消息（文本区域）
• 消息2（文本区域）

这将是它的接收方式：

• 名称：名称
• 电话：电话
• 电子邮件：电子邮件
• 消息：消息，消息2

我该如何做？有可能吗？

这是我的代码。单击按钮即可加载代码：

    var h1Text = document.querySelector("h1").textContent;
$(function () {
    $('button.requestbtn').click(function () {
        setTimeout(function () {
            $("#message").val("I am interested in " + h1Text);
            $(".rg-modal-contact h2").text(h1Text);
            $("#message").after('<textarea id="message2" class="comments" rows="5" placeholder="Comments, Questions, Special Requests?"></textarea>')
            var _form = document.querySelector("#form");
            _form.addEventListener("submit", function() {
                var msg = document.querySelector("#message");
                var msg1 = document.querySelector("#message2");
                msg.value = msg.value + ", " + msg1.value;
            });
        }, 1);
    });
});

Answer 1

这里是一个真实的基本示例，只需捕获表单提交即可。然后将第一个textarea值设置为包括第二个textarea的值。

var _form = document.querySelector("#form");

_form.addEventListener("submit",function(e){
  var msg = document.querySelector("textarea[name=message]");
  var msg1 = document.querySelector("textarea[name=message1]");
  
  msg.value = msg.value + "," + msg1.value;
  
  e.preventDefault(); //just for this test, remove this in final code
});

<form id="form">

<textarea name="message">test</textarea>
<textarea name="message1">test333</textarea>
<button>SUBMIT</button>
</form>