逐步命名动态数量的表单输入

时间:2015-08-17 22:18:42

标签: php html forms

我根据用户提交的号码($transponum)生成动态数量的表单输入 我使用str_repeat来构建一个包含所需输入数量的字符串。

但是我在命名输入时遇到了麻烦。我需要:

<input type="text" name="transpo(a number that increases every repeat)" />

如何使用PHP实现这一目标?

这是我的代码:

<form id="form" name="form" method="post" action="step8.php" role="form"> 
    <div class="form-group"><?php
        $a = 1;

        $str.= "<label class=\"control-label\" for=\"exampleInputEmail1\">Name</label>";
        $str.= "<input style=\"width: 60%;\" type=\"text\" class=\"form-control\" id=\"transponum\" name=\"transponame".$a."\" placeholder=\"Name\">";
        $str.= "<label class=\"control-label\" for=\"exampleInputEmail1\">ID</label>";
        $str.= "<input style=\"width: 60%;\" type=\"text\" class=\"form-control\" id=\"transponum\" name=\"transpoid".$a."\" placeholder=\"Name\"><hr>"; 
        $str.= $a = $a+1;

        echo str_repeat($str, $transponum);

    ?></div>                                             
    <button type="submit" class="btn-success btn" name="submit">Next</button>                                             
</form>

3 个答案:

答案 0 :(得分:0)

我有几条建议,详情如下:

使用循环

使用for loop而不是str_repeat 使用循环将$a变量从1增加到$transponum

for ($a=1;$a<=$transponum;$a++) { ... }

作为数组发布

为输入命名,以便它们作为数组发布。这样,您就不需要动态构建输入名称。

<input name="names[]" />
<input name="ids[]" />
  

注意变量名后的方括号,这就是使它成为数组的原因。您可以通过为不同的元素指定相同的名称将元素分组到不同的数组中    - FAQ @ php.net

然后,你最终得到一个$_POST数组,如下所示:

Array
(
    [names] => Array
               (
                   [0] => 'name 1',
                   [1] => 'name 2',
                   [2] => 'name 3',
                   ...
               ),
    [ids] =>   Array
               (
                   [0] => 'id 1',
                   [1] => 'id 2',
                   [2] => 'id 3',
                   ...
               )
)

删除重复的ID

元素ID必须是唯一的。通过将<input>元素放在各自的<label>元素中,隐式地将标签与输入相关联。然后,您可以删除重复的ID。

  

要隐式地将标签与另一个控件相关联,控制元素必须位于LABEL元素的内容中。 - forms @ w3.org

<label>Name: <input /></label>

另见simple label example at developer.mozilla.org,以供参考。

完整示例

这是一个包含我所有建议的例子:

<form id="form" name="form" method="post" action="step8.php" role="form"> 
    <div class="form-group"> <?php

        for ($a=1;$a<=$transponum;$a++) {

            ?><label>
                <span>Name</span>
                <input type="text" name="transponame[<?=$a?>]" placeholder="Name">
            </label>
            <label>
                <span>ID</span>
                <input type="text" name="transpoid[<?=$a?>]" placeholder="Name">
            </label>
            <hr><?php

        }

    ?></div>
    <button type="submit" class="btn-success btn" name="submit">Next</button>                                             
</form>

编辑:

请注意,可能不需要在输入名称中指定$a值。在您的上下文中,空括号也可以正常工作:

<input type="text" name="transponame[]" placeholder="Name">
  

在HTML中指定数组键是可选的。如果未指定键,则按照元素在表单中显示的顺序填充数组。 - FAQ @ php.net

答案 1 :(得分:0)

添加到showdev的答案。

您不能使用str_repeat来实现您的想法。 str_repeat字面上重复一个字符串。请参阅documentation page

在您的情况下,您必须使用循环或创建数组类型输入名称。

答案 2 :(得分:0)

确保您不使用重复的ID

function openMenu(){
    document.getElementById("others_nav").style.visibility = 'visible';
}


function closeMenu(){
    document.getElementById("others_nav").style.visibility = 'hidden';
}

function openMail(){
    document.getElementById("mail").style.visibility = 'visible';
    document.getElementById("vagas").style.visibility = 'hidden';
    document.getElementById("log").style.visibility = 'hidden';
    document.getElementById("themes").style.visibility = 'hidden';
    document.getElementById("search").style.visibility = 'hidden';
    document.getElementById("about").style.visibility = 'hidden';
    document.getElementById("index").style.visibility = 'hidden';
}

function openVagas(){
    document.getElementById("mail").style.visibility = 'hidden';
    document.getElementById("vagas").style.visibility = 'visible';
    document.getElementById("log").style.visibility = 'hidden';
    document.getElementById("themes").style.visibility = 'hidden';
    document.getElementById("search").style.visibility = 'hidden';
    document.getElementById("about").style.visibility = 'hidden';
    document.getElementById("index").style.visibility = 'hidden';
}

function openLog(){
    document.getElementById("mail").style.visibility = 'hidden';
    document.getElementById("vagas").style.visibility = 'hidden';
    document.getElementById("log").style.visibility = 'visible';
    document.getElementById("themes").style.visibility = 'hidden';
    document.getElementById("search").style.visibility = 'hidden';
    document.getElementById("about").style.visibility = 'hidden';
    document.getElementById("index").style.visibility = 'hidden';
}

function openThemes(){
    document.getElementById("mail").style.visibility = 'hidden';
    document.getElementById("vagas").style.visibility = 'hidden';
    document.getElementById("log").style.visibility = 'hidden';
    document.getElementById("themes").style.visibility = 'visible';
    document.getElementById("search").style.visibility = 'hidden';
    document.getElementById("about").style.visibility = 'hidden';
    document.getElementById("index").style.visibility = 'hidden';
}

function openSearch(){
    document.getElementById("mail").style.visibility = 'hidden';
    document.getElementById("vagas").style.visibility = 'hidden';
    document.getElementById("log").style.visibility = 'hidden';
    document.getElementById("themes").style.visibility = 'hidden';
    document.getElementById("search").style.visibility = 'visible';
    document.getElementById("about").style.visibility = 'hidden';
    document.getElementById("index").style.visibility = 'hidden';
}

function openAbout(){
    document.getElementById("mail").style.visibility = 'hidden';
    document.getElementById("vagas").style.visibility = 'hidden';
    document.getElementById("log").style.visibility = 'hidden';
    document.getElementById("themes").style.visibility = 'hidden';
    document.getElementById("search").style.visibility = 'hidden';
    document.getElementById("about").style.visibility = 'visible';
    document.getElementById("index").style.visibility = 'hidden';
}

function menuWarning(){
    document.getElementById("z-index-nav-2").src = ('src/habilite-this-menu.png');
}

function menuWarningOut(){
    document.getElementById("z-index-nav-2").src = ('src/z-index-nav.png');
}