是否可以拆分一個 <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.
})