使用JQuery Ajax提交特定的表单

I had many forms with the same id on a page. When I press the submit button of any form, first the first will submit, after the second click the second ... . But I want when I press the submit button, the form will submit where the button belongs to. How can I do that.

我有很多表单，在页面上有相同的id。当我按下任何表单的提交按钮时，第一个将提交，第二个将单击第二个…。但是我想当我按下提交按钮时，表单将提交按钮所属的位置。我怎么做呢。

Here my JS Code:

在这里我的JS代码:

$(document).on('submit','#ajax_form',function(e) {
   var form = $('#ajax_form');
   var data = form.serialize();
   $.post('game/write.php', data, function(response) {
      console.log(response);
      $('#power').replaceWith(response);
   });
   return false;
});

Here the HTMl Code:

下面的HTMl代码:

<div id="power">
<div class="span4">
    <form action="game/write.php" id="ajax_form" method="post"><input type="hidden" value="1" name="button"><button type="submit" class="btn btn-block btn-success"><img  src="images/null.png"></button></form>
    <form action="game/write.php" id="ajax_form" method="post"><input type="hidden" value="4" name="button"><button type="submit" class="btn btn-block btn-success"><img  src="images/null.png"></button></form>
    <form action="game/write.php" id="ajax_form" method="post"><input type="hidden" value="7" name="button"><button type="submit" class="btn btn-block btn-success"><img  src="images/null.png"></button></form>
</div>
<div class="span4">
    <form action="game/write.php" id="ajax_form" method="post"><input type="hidden" value="2" name="button"><button type="submit" class="btn btn-block btn-success"><img  src="images/null.png"></button></form>
    <form action="game/write.php" id="ajax_form" method="post"><input type="hidden" value="5" name="button"><button type="submit" class="btn btn-block btn-success"><img  src="images/null.png"></button></form>
    <form action="game/write.php" id="ajax_form" method="post"><input type="hidden" value="8" name="button"><button type="submit" class="btn btn-block btn-success"><img  src="images/null.png"></button></form>
</div>
<div class="span4">
    <form action="game/write.php" id="ajax_form" method="post"><input type="hidden" value="3" name="button"><button type="submit" class="btn btn-block btn-success"><img  src="images/null.png"></button></form>
    <form action="game/write.php" id="ajax_form" method="post"><input type="hidden" value="6" name="button"><button type="submit" class="btn btn-block btn-success"><img  src="images/null.png"></button></form>
    <form action="game/write.php" id="ajax_form" method="post"><input type="hidden" value="9" name="button"><button type="submit" class="btn btn-block btn-success"><img src="images/null.png"></button></form>
</div>

6 个解决方案

#1

This is where your problem begins:

这就是问题的开始:

var form = $('#ajax_form'); 

It selects the first form, not the one that was submitted. Simply replacing it with

它选择第一个表单，而不是提交的表单。简单地取代它

var form = $(this);

would solve your problem, but I still suggest not using duplicate id's.

可以解决你的问题，但是我还是建议不要使用重复的id。

#2

If you're not bothered about know which form is being submitted and simply want to handle the submit for all of them with one piece of code, then this will do it...

如果您不想知道提交的是哪个表单，而只想用一段代码处理所有表单的提交，那么这就可以了……

$(document).on('submit','form',function(e) {
    var form = $(this);
    var data = form.serialize();
    $.post('game/write.php', data, function(response) {
        console.log(response);
        $('#power').replaceWith(response);
    });
    return false;
});


<div id="power">
<div class="span4">
    <form action="game/write.php" method="post"><input type="hidden" value="1" name="button"><button type="submit" class="btn btn-block btn-success"><img  src="images/null.png"></button></form>
    <form action="game/write.php" method="post"><input type="hidden" value="4" name="button"><button type="submit" class="btn btn-block btn-success"><img  src="images/null.png"></button></form>
    <form action="game/write.php" method="post"><input type="hidden" value="7" name="button"><button type="submit" class="btn btn-block btn-success"><img  src="images/null.png"></button></form>
</div>
<div class="span4">
    <form action="game/write.php" method="post"><input type="hidden" value="2" name="button"><button type="submit" class="btn btn-block btn-success"><img  src="images/null.png"></button></form>
    <form action="game/write.php" method="post"><input type="hidden" value="5" name="button"><button type="submit" class="btn btn-block btn-success"><img  src="images/null.png"></button></form>
    <form action="game/write.php" method="post"><input type="hidden" value="8" name="button"><button type="submit" class="btn btn-block btn-success"><img  src="images/null.png"></button></form>
</div>
<div class="span4">
    <form action="game/write.php" method="post"><input type="hidden" value="3" name="button"><button type="submit" class="btn btn-block btn-success"><img  src="images/null.png"></button></form>
    <form action="game/write.php" method="post"><input type="hidden" value="6" name="button"><button type="submit" class="btn btn-block btn-success"><img  src="images/null.png"></button></form>
    <form action="game/write.php" method="post"><input type="hidden" value="9" name="button"><button type="submit" class="btn btn-block btn-success"><img src="images/null.png"></button></form>
</div>

As everyone has previously mentioned, you can't use an ID for more than one element. The above code assigns the submit event handler to all forms, and uses $(this) to reference the form that was submitted. It should do the trick :)

正如前面提到的，您不能对多个元素使用ID。上面的代码将提交事件处理程序分配给所有表单，并使用$(this)来引用提交的表单。它应该会起到这样的作用:

#3

Try this:

试试这个:

$(document).on('click','button.btn',function(e) { 
    //you will trigger this function when you click a button
    //this will select the parent, i.e., the form
    var form = $(this).parent();

    var data = form.serialize();
    $.post('game/write.php', data, function(response) {
        console.log(response);
        $('#power').replaceWith(response);
    });
    return false;
});

#4

ID's must be unique across the entire DOM.

ID在整个DOM中必须是唯一的。

#5

Only one element can have the same id. Set your function up to pass the id of the correct form you want to submit.

只有一个元素可以具有相同的id。将函数设置为传递您想要提交的正确表单的id。

#6

Better use class="ajax_form" instead of ID, then apply $(this).

最好使用class="ajax_form"而不是ID，然后应用$(this)。

$(document).on('submit','.ajax_form',function(e) {
   var form = $(this);
   var data = form.serialize();
   // other code
   return false;
});