1

我在一个页面上有许多具有相同 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>
4

6 回答 6

1

如果您不想知道正在提交哪个表单，而只是想用一段代码处理所有表单的提交，那么这将完成......

$(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)引用已提交的表单。它应该可以解决问题:)

于 2013-05-01T16:00:05.087 回答
1

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

var form = $('#ajax_form');

它选择第一个表单，而不是提交的表单。只需将其替换为

var form = $(this);

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

于 2013-05-01T15:38:54.177 回答
1

尝试这个：

$(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;
});
于 2013-05-01T16:09:22.027 回答
0

更好地使用class="ajax_form"而不是 ID，然后应用$(this).

$(document).on('submit','.ajax_form',function(e) {
   var form = $(this);
   var data = form.serialize();
   // other code
   return false;
});
于 2013-05-01T15:38:08.043 回答
0

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

于 2013-05-01T15:34:38.810 回答
0

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

于 2013-05-01T15:35:10.710 回答