6

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

5 回答 5

13

不要对多个元素使用相同的 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>
于 2013-05-19T18:50:08.540 回答
3

首先，在提交按钮中使用类。请注意，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>
于 2013-05-19T18:56:13.207 回答
2

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

具有相同 id 的多个元素：

从您的标记可以看出，两者form1的提交按钮form2都相同。id这不是有效的标记。您应该将它们设置为诸如form1-submitand之类的东西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
});
于 2013-05-19T18:50:44.663 回答
2 
<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);

演示

于 2019-12-13T09:06:26.300 回答
0

尝试以下操作：

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.
    }
});
于 2017-01-19T08:05:54.493 回答