Question

我在网页上有很多具有相同ID的表单。当我按下任何表格的提交按钮时，首先是第一个提交，第二个点击第二个....但我希望当我按下提交按钮时，表单将提交按钮所属的位置。我怎么能这样做。

这是我的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>

Answer 1

这是您的问题开始的地方：

var form = $('#ajax_form');

它选择第一个表单，而不是已提交的表单。只需用

替换它

var form = $(this);

可以解决您的问题，但我仍然建议不要使用重复的ID。

Answer 2

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

$(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>

正如大家之前提到的，您不能将ID用于多个元素。上面的代码将提交事件处理程序分配给所有表单，并使用$(this)来引用已提交的表单。应该这样做：）

Answer 3

试试这个：

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

Answer 4

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

Answer 5

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

Answer 6

最好使用class="ajax_form"代替ID，然后应用$(this)。

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

使用JQuery Ajax提交特定表单

6 个答案: