Question

http://www.quirksmode.org/dom/domform.html

我正在尝试在我的项目中实现此扩展表单功能。由于我正在使用CakePHP命名约定进行编译，因此在我的扩展形式中，我有2个字段名称：
[学生] [0] [年龄]
[学生] [0] [等级]

该脚本不起作用，因为它只是在字段名称的末尾附加计数器，所有类似的结果如下：fieldName + counter，而我正在尝试递增，正如您可能已经猜到的那样，如下所示：<登记/> [学生]：[1] [年龄]
[学生] [1] [等级]

[学生] [2] [年龄]
[学生] [2] [级]

我是Javascript的新手，希望有人可以建议如何解决这个问题。

HTML：

<span id="readroot" style="display: none">
<input class="btn btn-default" type="button" value="Remove review" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />
<br /><br />
<div class="row">
    <div class="col-lg-3">
        <div class="form-group required"><label for="Student1Age">Age</label><input name="data[Student][0][age]" class="form-control" placeholder="Age" maxlength="11" type="text" id="Student1Age" required="required"/></div> 
    </div>
    <div class="col-lg-3">  
        <div class="form-group required">
            <label for="Student1Grade">級別</label>
            <select name="data[Student][0][grade]" class="form-control" id="Student1Grade" required="required">
                <option value="">Please Select</option>
                <option value="1">Grade 1</option>
                <option value="2">Grade 2</option>
            </select>
        </div>  
    </div>
</div></span>

    <span id="writeroot"></span><input class="btn btn-default" type="button" onclick="moreFields()" value="Give me more fields!" />

使用Javascript：

    var counter = 0;
function moreFields() {
    counter++;
    var newFields = document.getElementById('readroot').cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';
    var newField = newFields.childNodes;
    for (var i=0;i<newField.length;i++) {
        var theName = newField[i].name
        if (theName)
            newField[i].name = theName + counter;
    }
    var insertHere = document.getElementById('writeroot');
    insertHere.parentNode.insertBefore(newFields,insertHere);
}

Answer 1

你必须更换这一行，如下所示。

此致：

newField[i].name = theName + counter;

新人：

newField[i].name = "[Student][" + counter + "][" + theName + "]";

我从你的脚本中制作了一个工作样本页面。请检查以下链接。

http://sugunan.net/demo/extend_form.php

如何在它们中间增加输入字段名称

1 个答案: