針對多個表單發送通過ajax（jquery）

Question

我的頁面上有多個表單。當我點擊表單提交按鈕時，我想通過ajax發送只有該表單的表單值。這是我的。第一種形式的工作原理與第二種形式實際提交表格一樣。我怎樣才能單獨針對每個表單。我覺得我應該在某處使用.find（）。

<form id="form1" method="post"> 
    <input type="text" id="name1" name="value" value=""> 
    <input type="submit" id="update_form" value="Save Changes"> 
    </form> 

<form id="form2" method="post"> 
    <input type="text" id="name2" name="value" value=""> 
    <input type="submit" id="update_form" value="Save Changes"> 
</form> 



<script> 
// this is the id of the submit button 
$("#update_form").click(function() { 

    $.ajax({ 
      type: "POST", 
      url: "approve_test.php", 
      data: $(this.form).serialize(), // serializes the form's elements. 
      success: function(data) 
      { 
       alert(data); // show response from the php script. 
      } 
     }); 

    return false; // avoid to execute the actual submit of the form. 
}); 
</script> 

Answer 1

不要對多個元素使用相同的id。使用類。
你的代碼改成這樣：

<form id="form1" method="post"> 
    <input type="text" id="name1" name="value" value=""> 
    <input type="submit" class="update_form" value="Save Changes"> <!-- changed --> 
    </form> 

<form id="form2" method="post"> 
    <input type="text" id="name2" name="value" value=""> 
    <input type="submit" class="update_form" value="Save Changes"> <!-- changed --> 
</form> 

<script> 
// this is the class of the submit button 
$(".update_form").click(function() { // changed 
    $.ajax({ 
      type: "POST", 
      url: "approve_test.php", 
      data: $(this).parent().serialize(), // changed 
      success: function(data) 
      { 
       alert(data); // show response from the php script. 
      } 
     }); 
    return false; // avoid to execute the actual form submission. 
}); 
</script> 

Answer 2

有你在這裏做什麼的一些問題。

多個元素具有相同的ID：

從你的標記，可以看出，這兩個form1和form2有各自的提交按鈕相同id。這是無效的標記。你應該讓它們設置爲form1-submit和form2-submit。

識別表單提交

在AJAX請求的數據屬性，以確定要提交表單，您可以使用：

data: $(this).parent().serialize(),

現在，通過爲兩個按鈕中的每一個創建處理程序來避免代碼重複，同時爲您的提交按鈕提供相同的類，並將onclick事件處理程序附加到該類，如下所示：

//Submit buttons 
<input type="submit" id="submit1" class="submit-buttons" /> 
<input type="submit" id="submit2" class="submit-buttons" /> 

//Event handler 
$('.submit-buttons').click(function(){ 
    //Your code here 
}); 

Answer 3

首先，在提交按鈕中使用class。請注意，id是唯一的（通過w3c規範）

然後在您的onclick監聽器中，使用最接近的表單（與父代相同，但針對特定父代;在這種情況下，它是表單元素）。這裏是工作代碼：

<form id="form2" method="post"> 
    <input type="text" id="name2" name="value" value=""> 
    <input type="submit" class="update_form" value="Save Changes"> 
</form> 



<script> 
// this is the id of the submit button 
$(".update_form").click(function() { 
    var myform = $(this).closest("form"); //parent form 
    $.ajax({ 
      type: "POST", 
      url: "approve_test.php", 
      data: myform.serialize(), // serializes the form's elements. 
      success: function(data) 
      { 
       alert(data); // show response from the php script. 
      } 
     }); 

    return false; // avoid to execute the actual submit of the form. 
}); 
</script> 

Answer 4

嘗試以下操作：

var form = $('#form1', '#form2').serialize(); 
$.ajax({ 
    type: "POST", 
    url: "approve_test.php", 
    data: form, 
    success: function(data) { 
     alert(data); // show response from the php script. 
    } 
});