如何在HTML表单中创建一组项目的数组

时间:2010-11-04 20:03:52

标签: html forms

我正在尝试按照以下方式创建一个表单(我知道这不是有效的HTML,但它希望说明我尝试这样做的原因和原因):

<form method="post" action="test.php">
    <input type="text" name="teamName">
    <br />Players:
    <grouping name="players[]">
        <input type="text" name="firstName"><br />
        <input type="text" name="lastName"><br />
    </grouping>
    <input type="submit" value="submit">
</form>

通过javascript,我会根据需要多次添加分组元素。提交表单后,我可以按如下方式访问分组元素中的项目:

foreach ($players as $player) {
    $fName = $player->firstName;
    $lName = $player->lastName;
}

也就是说,在我开始之前,我不知道球队中会有多少球员,但我知道球员的样子。我希望将这一切保留在一个屏幕上,以便用户可以在一个页面上将玩家添加到他们的团队,我希望能够将这些字段分组添加为一个组。但是,我还希望将分组存储为数组,而不是执行以下操作:

<form method="post" action="test.php">
    <input type="text" name="teamName">
    <br />Players:
    <input type="text" name="firstName[]"><br />
    <input type="text" name="lastName[]"><br />
    <input type="submit" value="submit">
</form>

这意味着我可以遍历分组中的各个元素,但不能遍历整个分组。

我有什么想法可以做到这一点?

3 个答案:

答案 0 :(得分:9)

但是,考虑一下你的结构,我建议你选择一个更健壮的数组结构:

foreach ($players as $i => $player) {
    $fName = $player->firstName;
    $lName = $player->lastName;

    echo '<input type="text" name="players['.$i.'][firstName]" value="'.$fName.'" />';
    echo '<input type="text" name="players['.$i.'][lastName]" value="'.$lName .'" />';

}

当你提交时,你会得到:

players => Array(
  [0] => Array (
    firstName => a name,
    lastName => another name,
  ),
  [1] => Array (
    firstName => a name,
    lastName => another name,
  ),
etc...
)

或者,不是在foreach语句中生成$ i,而是可以在最后一个输入字段中执行递增$ i ++,但我发现为了调试目的,通常很高兴知道您使用原始数组中的索引。

我推荐这种方法超过你的问题的例子,因为它也允许你通过$ _POST ['players']进行计数/迭代

希望这有帮助

答案 1 :(得分:3)

这听起来像是<fieldset>

的工作

<input>元素包装在<fieldset>元素中,并可能为字段集提供ID,某些类或任何您喜欢的内容。

然后确保输入名称使用正确的数组结构:

players[NUMBER][firstName]players[NUMBER][lastName]应该可以正常工作(NUMBER当然会被索引替换)。

不要忘记为<input>个元素<label>提供可访问性。 给<fieldset>一个<legend>也是一个好主意。

答案 2 :(得分:0)

解决此问题的多种方法:

1)在你的循环之外创建一个计数器$i = 0,并在其内部$i++。而不是命名firstName[]使用firstName[<?php echo $i; ?>]

2)如果它只是第一个和第二个名字 - 你可以使用一个<input>然后在php中解析它。

祝你好运