单击添加更多按钮，一个接一个地添加10个文本框

Question

在我的表单中，我有一个添加更多EmailId的按钮，我必须逐个给出十个文本框，任何人都可以告诉我适当的javascript。

Answer 1

尝试这样的事情，它是我从另一个项目中偷来的。 将表格环绕div，并在提交时将电子邮件地址置于数组中，因为输入框的名称为email []。

<div class="cntdelegate">
         <div id="readroot" style="display:none;">
        <table cellspacing="0"> 
            <tr>
                <td><label for="theiremail"><span>Email</span></label><input type="text" name="email[]" id="theiremail" value="Email" class="emailbox" maxlength="100" onFocus="if(this.value=='Email'){this.select()};" onClick="if(this.value=='Email'){this.select()};" /></td>
            </tr>
        </table>
        <a href="javascript:;" onClick="this.parentNode.parentNode.removeChild(this.parentNode);" class="bookDelete">Remove</a>
            <div class="clear"></div>
        </div>
        <span id="writeroot"></span>
          <button style="float:right!important;" type="submit" class="withArrow" name="submit" id="submit" value="submit" alt="Send" title="Send">Book now</button>
          <div class="addDelegate" style="float:left!important;">
                    <a href="javascript:;" onClick="moreFields();" id="moreFields" class="bookPlus">Add another delegate</a>
            </div>
                <div class="clear"></div>
                </form>
                </div>
<script>
var counter = 0;
function init() {
    moreFields();
}

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);
}
window.onload = function () 
{
    if (self.init)
        init();
}
</script>

Answer 2

我不确定您拥有什么html，但是我在这里http://jsfiddle.net/TsmTg/2/创建了一个简单的jQuery示例。

这是代码

$(function(){
    var emailAddress = $("[name=emailAddress]");

    $("#addEmailAddress").click(function(){
        emailAddress.after(emailAddress.clone());
    });
});​

这将复制您的电子邮件输入，并仅在原始邮件之后添加一个副本。 所有电子邮件地址输入将具有相同的名称，因此您将不得不在服务器端处理数据解析。 您可以对其进行修改，以使每个电子邮件地址输入都具有不同的名称，方法是使用计数器在每个输入的末尾附加一个数字，如下所示：

$(function(){
    var emailAddress = $("[name=emailAddress]");

    $("#addEmailAddress").click(function(){
        var newEmail = emailAddress.clone();
        newEmail.attr("name", newEmail.attr("name") + ($("[name^=emailAddress]").length + 1));
        emailAddress.after(newEmail);
    });
});

Answer 3

您是否正在使用表格放置文本框？ 在这种情况下，从表中克隆行很容易在表中添加具有内容的新行。

添加您的HTML代码。 这将有助于更轻松地找到解决方案。