用JQuery Ajax提交特定的表单 [英] Submit a specific form with JQuery Ajax

问题描述

我在页面上使用了许多相同ID的表单。当我按任何形式的提交按钮时，首先第一个将提交，第二个单击第二个......之后。但是当我按下提交按钮时，表单会提交按钮所属的位置。

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.

在这里我的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;
});

这里的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>

推荐答案

试试这个：

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

这篇关于用JQuery Ajax提交特定的表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！