使用JQuery Ajax提交特定表单

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

ID必须是整个DOM独特。

Answer 2

只有一个元素可以具有相同的ID。设置你的功能来传递你想要提交的正确表单的ID。

Answer 3

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

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

Answer 4

这是你的问题开始：

var form = $('#ajax_form'); 

它选择第一种形式，而不是提交的一个。简单地将其替换为

var form = $(this); 

会解决您的问题，

Answer 5

如果你不打扰哪些形式提交知道，只是想处理采用一体成型的代码，那么这将做它提交所有的人......

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

试试这个：

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