提交表单时如何使用 $_GET 创建和发送 3 维数组？
Posted
技术标签:
【中文标题】提交表单时如何使用 $_GET 创建和发送 3 维数组？【英文标题】：How to create and send a 3-Dimensional Array using $_GET when submitting a form? 【发布时间】：2017-12-06 16:36:49 【问题描述】：我有一个 html form 用于添加不同候选人的凭据。该数据稍后将存储在数据库中。现在，对于每个候选人，Name、SSN 各有一个 input[type=text] 字段，Mobile 有一个或多个 input[type=text] 字段。一旦候选人可以拥有多个手机号码。
现在，当提交此表单时，我希望将数据发布为：
有一个包含所有候选的外部数组。我们就叫它$allCandidatesArray吧。
外部数组$allCandidatesArray 包含每个候选者的数组。
在每个内部数组中，前两个元素即。 $nameInput 和$ssnInput 是简单的字符串值，第三个元素又是一个数组，其元素是候选人的手机号码。请记住，候选人可以拥有多个手机号码。因此是一个数组！
所以这样的东西应该发送到**$_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>');
);
【问题讨论】：
【参考方案1】：我认为你正在尝试做这样的事情。
首先，id 是唯一的，所以所有重复的 id 都不会飞。
例如<fieldset id="wrapper"
第二次，当 PHP 在名称中看到空数组索引 ([]) 时，它会为其分配一个新的索引号。如果您牢记这一点，则可以通过限制空数组索引的数量来轻松创建所需的数组结构，而不是显式分配索引。
此外，我还检查了您的一些重复 ID 并将其更改为类名，因为类名不是唯一的，您应该能够使用它们来获取稍后要验证的元素。
在下面的代码中，每个字段集都有一个唯一的 id，我们可以使用它来将动态创建的移动输入绑定到一个数组。例如，字段集中id="CandidateWrapper2" 中的移动输入应命名为allCandidatesArray[2][mobile][]，因为我们不关心手机号码的顺序，但我们关心输入与哪个候选者相关联。
javascript 有 cmets 和描述性变量名称，但如果您不明白它在做什么，请告诉我。
<?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="CandidateWrapper1" class="container candidate-wrapper" >
<div class="row valign-wrapper">
<div class="input-field col l3 offset-l1">
<input type="text" id="nameInput1" class="validate" name="allCandidatesArray[1][name]"/>
<label class="blue-text" for="nameInput">Name</label>
</div>
<div class="input-field col l3 offset-l1">
<input type="text" id="ssnValueInput1" class="validate" name="allCandidatesArray[1][ssn]"/>
<label class="blue-text" for="ssnValueInput">SSN</label>
</div>
</div><!--.row-->
<div class="row valign-wrapper mobile-holder">
<div class="input-field col l3">
<input type="text" class="validate mobile-input" name="allCandidatesArray[1][mobile][]"/>
<label class="blue-text" for="mobileInput">Mobile</label>
</div>
<div class="col l1 offset-l1 add-mobile-button-wrapper" >
<a class="add-mobile-button 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="CandidateWrapper2" class="container candidate-wrapper" >
<div class="row valign-wrapper">
<div class="input-field col l3 offset-l1">
<input type="text" id="nameInput2" class="validate" name="allCandidatesArray[2][name]"/>
<label class="blue-text" for="nameInput">Name</label>
</div>
<div class="input-field col l3 offset-l1">
<input type="text" id="ssnValueInput2" class="validate" name="allCandidatesArray[2][ssn]"/>
<label class="blue-text" for="ssnValueInput">SSN</label>
</div>
</div><!--.row-->
<div class="row valign-wrapper mobile-holder">
<div class="input-field col l3">
<input type="text" id="mobileInput2" class="validate mobile-input" name="allCandidatesArray[2][mobile][]"/>
<label class="blue-text" for="mobileInput">Mobile</label>
</div>
<div class="col l1 offset-l1 add-mobile-button-wrapper" >
<a class="add-mobile-button 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>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script type="text/javascript">
$(document).on("click", ".add-mobile-button", function()
var $this = $(this);
var $container = $this.closest('.candidate-wrapper');
var _regex =/CandidateWrapper(\d+)/;
var _found = $container.attr('id').match(_regex);
var _candidateNumber = _found[1];
// get and update our HTML template
var $newRow = $($('#TemplateHTML').html());
var _newName = 'allCandidatesArray['.concat(_candidateNumber,'][mobile][]');
$newRow.find('.mobile-input').attr("name",_newName);
// add new row to the DOM
$this.closest('.add-mobile-button-wrapper').before($newRow);
);
</script>
<!-- The browser will ignore scripts with types it doesn't understand. So it doesn't run this -->
<script type="text/html" id="TemplateHTML">
<div class="input-field col l3">
<input type="text" class="validate mobile-input" name="allCandidatesArray[WE_ARE_REPLACING_THIS][mobile][]"/>
<label class="blue-text" for="mobileInput">Mobile</label>
</div>
</script>
</body>
</html>
【讨论】：
以上是关于提交表单时如何使用 $_GET 创建和发送 3 维数组？的主要内容，如果未能解决你的问题，请参考以下文章