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

Question

实际上是否可以像这样分割标签:

Form with a ComboBox field (submites with onchange)

Some random content

Another form with an ComboBox (submites with onchange)

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

Answer 1

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

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

浏览器支持仍然是somewhat limited不过，您最好让表单也包含中间内容。

如果您想添加 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();
});

尽管如此，仅使表单足够大以容纳所有控件仍然是最简单且最可靠的方法。