如何使用ajax将数据从动态添加的表单发送到php

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

请尝试以下解决方案。

使用自增变量动态设置表单ID。

<?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++; 
}?>

下面是用于在 ajax 中获取动态表单 ID 的 JavaScript 代码。

$(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 命令，您可能希望使用某种事件侦听器将其包装起来，例如更改，或者添加一个提交按钮并提交数据。