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

首先，在提交按钮中使用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 3

你在这里做的事情有一些问题。

具有相同ID的多个元素：

从您的标记开始，可以看出form1和form2对于各自的提交按钮具有相同的id。这不是有效的标记。您应该将它们设置为form1-submit和form2-submit。

确定要提交的表单

在AJAX请求的data属性中，要标识要提交的表单，可以使用：

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

Answer 5

<form method="post" action="form1_process.php" >
    <input type="text" name="name" />
    <input type="submit" value="Submit Form 1">
</form>

<form method="post" action="form2_process.php" >
    <input type="text" name="name" >
    <input type="submit" value="Submit Form 2">
</form>

<script>

    /* get all form and loop */
    $( "form" ).each( function () {

        /* addEventListener onsubmit each form */
        $( this ).bind( "submit", function (event) {

            /* return false */
            event.preventDefault();

            var formHTML = event.target; // formHTML element

            $.ajax({
                method: formHTML.method,
                url: formHTML.action,

                data: $( this ).serialize(), // serializes the form's elements.

                success: function(data)
                {
                    alert(data); // show response from the php script.
                }
            });          

        } );

    });

</script>

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

<?php

    var_dump($_POST);

Demo

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

5 个答案: