循环遍历动态表单字段并插入数据库答案

【问题标题】：Looping through dynamic form fields and inserting into database循环遍历动态表单字段并插入数据库
【发布时间】：2013-08-15 05:39:19
【问题描述】：

我有一个 from 添加一个人的家属，名字，姓氏，我正在使用 jquery multiFieldExtender 插件 (http://vipullimbachiya.com/jQuery/Plugins/MultiField/2/index.htm) 来动态添加其他字段。当您单击“添加另一个受抚养人”时，它会在我的表单中添加一个额外的名字、姓氏字段。我已经更改了脚本，因此它不会向 name 元素添加增量，而只会向 id 元素添加增量。这是生成的标记：

<input id="fnameD" name="fnameD[]" placeholder="First Name"   type="text"><br />
<input id="lnameD" name="lnameD[]" placeholder="Last Name"   type="text">

//additional field looks like below
<input id="fnameD_0" name="fnameD[]" placeholder="First Name"   type="text"><br />
<input id="lnameD_0" name="lnameD[]" placeholder="Last Name"   type="text">

//and another additional field looks like below
<input id="fnameD_1" name="fnameD[]" placeholder="First Name"   type="text"><br />
<input id="lnameD_1" name="lnameD[]" placeholder="Last Name"   type="text">

如您所见，id 会随着添加的每个元素组而递增。我正在尝试将此提交到 ajax 文件并循环通过 fname、lname 发布的数据并将其插入 MS SQL 数据库。我的代码如下。我没有收到任何错误，也没有插入任何内容。

我的表单页面。

<?php require 'core/init.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Form</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet" >
</head>
<body>
<div class="container">
<form action="" id="application" method="post" /><!-- Form Name -->
<div id="dependentDetails" style="margin-bottom:10px;">
<div class="control-group">
  <p class="lead">Dependent Details</p>
  <label class="control-label"></label>
  <div class="controls">
    <input id="fnameD" name="fnameD[]" placeholder="First Name"   type="text"><br />
  <input id="lnameD" name="lnameD[]" placeholder="Last Name"   type="text">
  </div>
</div>
</div><!-- dependentDetails -->
<button  name="submit"  class="btn btn-success">Submit</button>
</form>
<div id="result"></div>
</div>

<script>
   $('#application').submit(function(e){
       e.preventDefault();   
        $.ajax({  
            type: "POST",  
            url: "core/classes/ajax_test.php",  
            data:{data: $('form').serialize()},
            success: function(response){
            $("#result").html(response);
      }
    });
});
</script>


<script src="js/jquery.multiFieldExtender-2.0.js"></script>
<script>
$(document).ready(function() {
  $("#dependentDetails").EnableMultiField({
  linkText: 'Add Another Dependent',
  removeLinkText: '<span style="color:#FF0000;">Remove above Dependent</span>',
  confirmationMsgOnRemove: 'Are you sure you wish to remove the this dependent?'
  });
});
</script>
</body>
</html>

我的 ajax 文件。

<?php
require('../init.php');
                    if (isset($_POST['fnameD'])) {
                            for ( $i=0;$i<count($_POST['fnameD']);$i++) {
                            $fnameD = $_POST['fnameD'][$i];
                            $lnameD = $_POST['lnameD'][$i];

                            $query = $dbP->prepare("INSERT INTO dbo.testMulti(fnameD, lnameD)VALUES (?, ?)");
                                     $query->bindValue(1, $fnameD);
                                     $query->bindValue(2, $lnameD);
                                                try{
                                                    $query->execute();
                                                    echo 'got the data';
                                                }catch(PDOException $e){
                                                    die($e->getMessage());
                                                }

                            }
                    }

?>

这是我添加 Mike Smith、Bob Smith 并提交和 print_r($_POST); 后得到的结果；

Array ( [data] => fnameD%5B%5D=Bob&lnameD%5B%5D=Smith&fnameD%5B%5D=Mike&lnameD%5B%5D=Smith )

我错过了什么或做错了什么？我是否循环通过 jquery 序列化发布的数据正确。如果没有，你如何正确地做到这一点？

【问题讨论】：

为什么你序列化你的数据？

标签： php jquery sql-server

【解决方案1】：

问题是您将序列化数据分配给单个变量，尝试按原样提交表单数据，或使用来自Ajax Form Plugin 的 ajaxSubmit 函数。

$("#application").ajaxSubmit({url: 'core/classes/ajax_test.php', type: 'post'})

【讨论】：

【解决方案2】：

我相信你想要的是 serializeArray() 而不是 serialize()

data:{data: $('form').serializeArray()},

【讨论】：

您实际上让我想起了我发布的内容，这导致我的回答 +1 寻求帮助！

【解决方案3】：

我明白了……我改变了：

data:{data: $('form').serialize()},

到这里

data:$('form').serialize(),

像冠军一样工作！

【讨论】：