1

ページに同じ ID を持つフォームが多数ありました。任意のフォームの送信ボタンを押すと、最初に最初のフォームが送信され、2 番目のボタンをクリックすると 2 番目のフォームが送信されます ... . しかし、送信ボタンを押すと、ボタンが属する場所にフォームが送信されます。どうやってやるの。

ここに私の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

ここから問題が始まります。

var form = $('#ajax_form');

送信されたフォームではなく、最初のフォームが選択されます。単にそれを置き換える

var form = $(this);

問題は解決しますが、重複した ID を使用しないことをお勧めします。

于 2013-05-01T15:38:54.177 に答える
1

どのフォームが送信されているかを気にせず、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

これを試して：

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

ID は DOM 全体で一意である必要があります。

于 2013-05-01T15:34:38.810 に答える
0

同じ ID を持つことができる要素は 1 つだけです。送信する正しいフォームの ID を渡すように関数を設定します。

于 2013-05-01T15:35:10.710 に答える