是否有可能拆分一个<表单>标签横过页面

Is it possible to split up a <form> tag across the page?

本文关键字：标签 表单 有可能 是否 一个 拆分      更新时间：2023-09-26

实际上可以像这样分割标签吗?

带ComboBox字段的表单 (submites with onchange)

随机内容

另一个带有ComboBox的表单(通过onchange提交)

如果我只改变一个盒子的状态，实际上有可能将数据一起发送吗?

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();
});

让表单足够大来容纳所有的控件仍然是最简单和最可靠的方法。

一个可能的解决方案可能是使用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.
})
相关文章：