Javascript 单击“添加更多”按钮,逐个添加10个文本框

Javascript 单击“添加更多”按钮,逐个添加10个文本框,javascript,html,Javascript,Html,在我的表单中,我有一个按钮来添加更多的EmailId,我必须一个接一个地给出十个文本框。任何人都可以告诉我适当的javascript。您是否使用表格来放置文本框?在这种情况下,从表中克隆行很容易添加包含表中内容的新行 添加您的HTML代码。这将有助于更轻松地找到解决方案。尝试类似的方法,这是我从另一个项目中剽窃的东西。 将您的表单包装在div周围,当您提交电子邮件地址时,您的电子邮件地址将以数组形式显示,因为输入框的名称为email[] <div class="cntdelegate"&g

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

您是否使用表格来放置文本框?在这种情况下,从表中克隆行很容易添加包含表中内容的新行


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

尝试类似的方法,这是我从另一个项目中剽窃的东西。 将您的表单包装在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>

电子邮件
现在预订
var计数器=0;
函数init(){
moreFields();
}
函数moreFields(){
计数器++;
var newFields=document.getElementById('readroot').cloneNode(true);
newFields.id='';
newFields.style.display='block';
var newField=newFields.childNodes;

对于(var i=0;i我不确定您有什么html,但我在这里创建了一个简单的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);
    });
});

请在您的问题中包含表单HTML,以便我们知道使用什么作为输出。您忘了提到这是一个jQuery解决方案。问题的标记不包含jQuery。但仍然是一个不错的解决方案。:-)