jQuery多種表單提交

Question

我在頁面上有4種表格。 我知道表格不能嵌套。

<form id="form1"></form>

<form id="form2"></form>

<form id="form3"></form>

<form id="form4"></form>

按該順序顯示。

表格1和表格4發布到同一php頁面進行處理。 表單1有1個輸入字段表單4有多個字段，復選框和選擇框。

對於表格1或表格4發送兩個表格的組合字段的最佳方法是什么？

我嘗試使用jQuery，非常適合文本輸入和復選框，但無法使其與Select一起使用。 嘗試將表單1和表單4合並，並使用CSS重新定位表單1，但是無法獲得正確的布局。

有更簡單的方法嗎？

Answer 1

這是不可能的。 您可以使用serialize()或serializeArray()方法獲取表單的數據，然后使用Ajax將其發布到服務器：

將一組表單元素編碼為要提交的字符串。

$('#send').click(function() {
   var firstFormData  = $('form:eq(0)').serializeArray();
   var fourthFormData = $('form:eq(3)').serializeArray();
   $.ajax({
        url  : '...',
        type : 'post',
        data : firstFormData.concat(fourthFormData)
   }).done(function() {
       // ...
   });
});

Answer 2

好的，我無法讓.serialize（）與來自form4的復選框數組一起使用，例如

<input type="checkbox" id="model[]">

我試圖獲取已檢查的值，但無法使其與其他輸入一起序列化：

var vals = []
    $('input:checkbox[name="model[]"]').each(function() {
        if (this.checked) {
            vals.push(this.value);
        }
    });

所以我回過頭去做了更簡單的事情：

刪除form1，將文本輸入和提交按鈕<div id="searchbox" style="position:abosulte;top:-100px;left:0px;">My original form1</div>內的<div id="searchbox" style="position:abosulte;top:-100px;left:0px;">My original form1</div> 。

將一個占位符<div id="placeholder" style="position:relative;"></div>放在form2和3的上方（form1以前是）。

將JavaScript放在上方：

$(document).ready(function(){
    $("#searchbox")
    .appendTo("#placeholder");
});

移動文本輸入並提交按鈕以將其絕對且相對於占位符div定位。

這樣，我將它們簡化為1種形式（無論如何，這就是它的意圖），不依賴javascript處理任何數據，也不需要我對這兩種形式進行串聯序列化。