異なる候補者の資格情報を追加するためのHTML form
があります。このデータは後でデータベースに格納されます。各候補について、それぞれName
,SSN
のinput[type=text]
フィールドと、Mobile
の1つ以上のinput[type=text]
フィールドがあります。候補者は一度に複数の携帯電話番号を持つことができます。すべての候補者の外側の配列があり
:このフォームが送信されたとき
は今、私は、データがあるよう掲示することにしたかったです。それを
$allCandidatesArray
としましょう。外部配列
$allCandidatesArray
には、各候補の配列が含まれています。これらの内側アレイのそれぞれの内側で、最初の2つの要素、
$nameInput
と$ssnInput
は単純な文字列値で、3番目の要素は配列で、その要素は候補の携帯番号です。候補者は複数の携帯電話番号を持つことができます。したがって、配列!
$_GET["allCandidatesArray"]
に送られるべきである
:
$allCandidatesArray = {
{
"name"=> "Amy",
"ssn" => 123,
"mobile" => {
22,
33
}
},
{
"name"=> "Bob",
"ssn" => 333,
"mobile" => {
11
}
}
}
は、だから私はあなたが私のSSCCEの例では以下を参照することができます何かを試してみましたが、何$_GET["allCandidatesArray]
に送られる際に奇妙です画面に印刷されます:
Array ([0] => Array ([ssnValueInput] =>) [1] => Array ([0] => Array ([0] =>)) [2] => Array ([ssnValueInput] =>) [3] => Array ([0] => Array ([0] =>)))
問題を解決するにはどうすればよいですか?
のindex.php:
<?php
print_r($_GET["allCandidatesArray"]);
?>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link type="text/css" rel="stylesheet" href="styles/materialize.min.css" />
<link type="text/css" rel="stylesheet" href="styles/material-icons.css" />
<!--<link type="text/css" rel="stylesheet" href="styles/styles.css" />-->
<script src="scripts/jquery-3.2.1.min.js"></script>
<script src="scripts/materialize.min.js"></script>
<script src="scripts/scripts.js"></script>
<link href="images/favicon.ico" rel="icon" type="image/x-icon" />
</head>
<body>
<form id="credentialsForm" action="" method="get">
<fieldset id="wrapper" class="container">
<div class="row valign-wrapper">
<div class="input-field col l3 offset-l1">
<input type="text" id="nameInput" class="validate" name="allCandidatesArray[][nameInput]"/>
<label class="blue-text" for="nameInput">Name</label>
</div>
<div class="input-field col l3 offset-l1">
<input type="text" id="ssnValueInput" class="validate" name="allCandidatesArray[][ssnValueInput]"/>
<label class="blue-text" for="ssnValueInput">SSN</label>
</div>
</div><!--.row-->
<div class="row valign-wrapper">
<div class="input-field col l3">
<input type="text" id="mobileInput" class="validate" name="allCandidatesArray[][][]"/>
<label class="blue-text" for="mobileInput">Mobile</label>
</div>
<div class="col l1 offset-l1" id="addMobileButtonWrapper">
<a id="addMobileButton" class="btn-floating btn waves-light waves-effect blue white-text"><i class="material-icons">add</i></a>
</div>
</div><!--.row-->
<!--<div class="container"><div class="divider"></div></div>-->
</fieldset><!--#wrapper-->
<fieldset id="wrapper" class="container">
<div class="row valign-wrapper">
<div class="input-field col l3 offset-l1">
<input type="text" id="nameInput" class="validate" name="allCandidatesArray[][nameInput]"/>
<label class="blue-text" for="nameInput">Name</label>
</div>
<div class="input-field col l3 offset-l1">
<input type="text" id="ssnValueInput" class="validate" name="allCandidatesArray[][ssnValueInput]"/>
<label class="blue-text" for="ssnValueInput">SSN</label>
</div>
</div><!--.row-->
<div class="row valign-wrapper">
<div class="input-field col l3">
<input type="text" id="mobileInput" class="validate" name="allCandidatesArray[][][]"/>
<label class="blue-text" for="mobileInput">Mobile</label>
</div>
<div class="col l1 offset-l1" id="addMobileButtonWrapper">
<a id="addMobileButton" class="btn-floating btn waves-light waves-effect blue white-text"><i class="material-icons">add</i></a>
</div>
</div><!--.row-->
<!--<div class="container"><div class="divider"></div></div>-->
</fieldset><!--#wrapper-->
<div class="row" id="submitFormRow">
<div class="col l4 offset-l4">
<button type="submit" class="btn waves-light waves-effect">Add Candidates</button>
</div>
</div><!--.row #s -->
</form>
</body>
</html>
scripts.js:
$(document).on("click", "#addMobileButton", function() {
//alert("#addMobileButton clicked.");//check
var parentRow = $(this).closest(".row");
parentRow.after('<div id="rowAddedForCandidatesMobile" class="row valign-wrapper"><div class="input-field col l3"><input type="text" id="mobileInput" class="validate"/><label for="mobileInput">Mobile</label></div><div class="col l1" id="addMobileButtonWrapper"><a id="addMobileButton" class="btn-floating btn waves-light waves-effect blue white-text"><i class="material-icons">add</i></a></div></div>');
});