针对多个表单发送通过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. 
    } 
});