通过ajax（jquery）发送多个表单

我的页面上有多个表单。当我单击表单提交按钮时，我只想通过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>

 <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>

//这是提交按钮的id
$（“#更新表格”）。单击（函数（）{
$.ajax({
类型：“POST”，
url:“approve_test.php”，
数据：$（this.form）.serialize（），//序列化表单的元素。
成功：功能（数据）
{
警报（数据）；//显示来自php脚本的响应。
}
});
return false；//避免执行表单的实际提交。
});

不要对多个元素使用相同的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>

 <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>

//这是submit按钮的类
$（“.update_form”）。单击（函数（）{//已更改
$.ajax({
类型：“POST”，
url:“approve_test.php”，
数据：$（this）.parent（）.serialize（），//已更改
成功：功能（数据）{
警报（数据）；//显示来自php脚本的响应。
}
});
return false；//避免执行实际表单提交。
});

您在这里所做的工作存在一些问题

 <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>

具有相同id的多个元素：

 <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>

从您的标记可以看出，

form1

和

form2

各自的提交按钮具有相同的

id

。这是无效的加价。您应该将它们设置为

form1 submit

和

form2 submit

 <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>

确定要提交的表格

 <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>

在AJAX请求的数据属性中，要确定要提交的表单，可以使用：

 <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>

数据：$（this）.parent（）.serialize（），

 <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>

现在，为了通过为两个按钮中的每一个创建处理程序来避免代码重复，请为两个提交按钮指定相同的类，并向该类附加

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

 <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>

//提交按钮
//事件处理程序
$（'.submit按钮'）。单击（函数（）{
//你的代码在这里
});

首先，在提交按钮中使用类。请注意ID是唯一的（根据w3c规范）

 <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>

然后在onclick侦听器中，使用最近的（与父级相同，但目标是特定的父级；在本例中，它是form元素）获取表单。以下是工作代码：

 <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>

 <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>

//这是提交按钮的id
$（“.update_form”）。单击（函数（）{
var myform=$（this）.closest（“form”）；//父窗体
$.ajax({
类型：“POST”，
url:“approve_test.php”，
data:myform.serialize（），//序列化表单的元素。
成功：功能（数据）
{
警报（数据）；//显示来自php脚本的响应。
}
});
return false；//避免执行表单的实际提交。
});

尝试以下操作：

 <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>

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

/*获取所有表单和循环*/
$（“形式”）。每个（函数）{
/*在提交每个表单时添加EventListener*/
$（this.bind（“提交”），函数（事件）{
/*返回错误*/
event.preventDefault（）；
var formHTML=event.target；//formHTML元素
$.ajax({
方法：formHTML.method，
url:formHTML.action，
数据：$（this）.serialize（），//序列化窗体的元素。
成功：功能（数据）
{
警报（数据）；//显示来自php脚本的响应。
}
});          
} );
});

在服务器中，form1_process.php和form2_process.php

 <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>

<?php

    var_dump($_POST);

---

不要对元素使用相同的id。可能重复：@Skelly我确实看到了，但他想用一个按钮提交多个表单。每个表单都有一个提交按钮。请添加一些说明。