Как отправить данные из динамически добавленной формы в php с помощью ajax

Question

Я создал динамическую форму, в которой есть данные из базы данных MySQL, и она прекрасно работает. Проблема в том, что я не знаю, как заставить ajax читать форму.

Предполагая, что приведенный ниже код представляет собой одну форму:

<form>
    <!-- input type content here -->
</form>

Это эквивалентный код Ajax будет:

$(document).ready(function(

    $.ajax({
        url: 'url',
        data: $("#frm").serialize();
       //insert more code...
});

))

Что, если моя форма была добавлена ​​динамически следующим образом:

<?php while($row = $result->fetch_assoc()){
    <!-- insert code for dynamic grid see sample link [here][1]  
    <form>
       <input type="radio" name="rate" value="1">
       <input type="radio" name="rate" value="2">
       <input type="radio" name="rate" value="3">

       <input type="text" name="name" value="<?php echo $row['p_name']?>"
       <input type="text" name="price" value="<?php echo $row['p_price']?>"
    </form>

}?>

Как бы я получил эти данные, если бы моя форма создавалась динамически? Должен ли я даже добавить символ массива к моей форме, например, <form name="myFrm[]"? Если это так, как бы я даже назвал это Ajax?

Answer 1

Пожалуйста, попробуйте следующее решение.

Установить идентификатор формы динамически с переменной автоинкремента.

<?php $i=1; while($row = $result->fetch_assoc()){
<!-- insert code for dynamic grid see sample link [here][1]  
<form id="frm<?php echo $i;?>">
   <input type="radio" name="rate" value="1">
   <input type="radio" name="rate" value="2">
   <input type="radio" name="rate" value="3">

   <input type="text" name="name" value="<?php echo $row['p_name']?>">
   <input type="text" name="price" value="<?php echo $row['p_price']?>">
  <input type="button" name="button" value="click" class="common_submit_btn">
</form>
$i++; 
}?>

Ниже код JavaScript для получения идентификатора динамической формы в ajax.

$(document).ready(function(
  $(".common_submit_btn").click(function(){
  //here you can get submitted form data in console.
  console.log($('#'+$(this).closest('form').attr('id')).serialize());
  $.ajax({
    url: 'url',
    data: $('#'+$(this).closest('form').attr('id')).serialize(),
   //insert more code...
 });
});
});

Answer 2

В настоящее время ваш JavaScript говорит:

• когда документ готов:
  • сделать что-то с формой

Поэтому, прежде чем ваш пользователь даже введет данные, вы запустили эту команду $.ajax, вы, вероятно, захотите обернуть ее каким-либо прослушивателем событий, таким как change, или, возможно, добавить кнопку отправки и отправить данные.