Question

我有一个来自添加姓氏，姓氏的人家属，我使用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序列化发布的数据是否正确。如果没有，你如何正确地做到这一点？

Answer 1

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

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

Answer 2

我相信你想要serializeArray（）而不是serialize（）

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

Answer 3

我明白了......我改变了：

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

到这个

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

就像一个冠军！

循环通过动态表单字段并插入数据库

3 个答案: