Отправить конкретную форму с помощью JQuery Ajax

Question

У меня было много форм с одним и тем же идентификатором на странице. Когда я нажимаю кнопку отправки любой формы, сначала сначала подает, после второго щелчка второй .... Но я хочу, когда я нажму кнопку отправки, форма будет отправлена ​​туда, где принадлежит кнопка. Как мне это сделать.

Вот мой 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

Только один элемент может иметь одинаковый идентификатор. Установите свою функцию, чтобы передать идентификатор нужной формы, которую вы хотите отправить.

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> 

Как все ранее упоминалось, вы не можете использовать идентификатор для нескольких элементов. Вышеприведенный код присваивает обработчик события отправки всем формам и использует $(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; 
});