是否可以拆分一个 <form> 在页面上标记？

Question

实际上是否可以拆分标签，如下所示：

带有ComboBox字段的表单 （使用onchange提交）

一些随机内容

带有ComboBox的另一种形式 （使用onchange提交）

如果我只更改一个盒子的状态，实际上是否可以一起发送数据？

Answer 1

HTML 5引入了用于input和其他表单控件的form属性，该属性允许元素成为表单的一部分，而无需实际出现在表单内部。

<input form="form_id" name="foo">

尽管对浏览器的支持仍然受到一定限制，所以使表格也包含中间内容可能会更好。

如果要添加JavaScript，则（提交任何一个表单时）都可以循环浏览第二个表单中的所有表单控件，并将它们附加到第一个表单中。 然后，第二种形式将触发第一种形式的提交。

（未试）

var form1 = document.getElementById('f1');
var form2 = document.getElementById('f2');

function copy() {
    for (var i = 0; i < form2.elements.length; i++) {
        var inp = document.createElement('input');
        inp.type = "hidden";
        inp.name = form2.elements[i].name;
        inp.value = form2.elements[i].value;
        form1.appendChild(inp);
    }
}

form1.addEventListener('submit', copy);
form2.addEventListener('submit', function (e) {
    e.preventDefault();
    copy();
    form1.submit();
});

但是，仅使窗体足够大以容纳所有控件仍然是最简单，最可靠的方法。

Answer 2

可能的解决方案可能是使用jQuery在目标表单提交时将其中一个表单的数据附加到另一个表单。 另一种选择是使用.serialize（）函数并将两个表单数据加在一起，然后通过aJax提交表单。

但是，此解决方案的缺点是，当从客户端禁用Java时，它将无法使用。

一个简单的模板是：

jQuery("#form1").submit(function() {
  //option 1 - add form 2 data to form 1.
  //option 2 -it is possible to use .serialize() function as well, just add two form value after .serialize() together and send the form via aJax.
})