定位多个表单以通过 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 是唯一的（根据 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

<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

Answer 5

尝试以下方法：

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