0

名、姓を持つ人の扶養家族を追加するためのフォームがあり、追加のフィールドを動的に追加するために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、submit および print_r($_POST); を追加すると、次のようになります。

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

私は何が欠けているか、間違っていますか? jquery でシリアル化された投稿データを正しくループしていますか。そうでない場合、どうすればこれを適切に行うことができますか?

4

3 に答える 3