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