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

Question

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

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

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

我想创建额外的文本区域并在提交事件时将它们组合在一起。它会在网站上显示如下：

• 姓名（输入）
• 电话（输入）
• 电子邮件（输入）
• 消息（文本区域）
• 消息 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);
    });
});

标签： javascripthtmljquerycontact-form

Answer 1

这是一个真正的基本示例，只需捕获表单提交即可。然后将第一个 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>