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