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

时间:2010-07-14 08:45:28

标签: javascript html

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

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:1)

我不确定你有什么HTML,但我在这里创建了一个简单的jQuery示例http://jsfiddle.net/TsmTg/2/

这是代码

$(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);
    });
});

答案 2 :(得分:0)

您是否使用表格放置文本框?在这种情况下,从表中克隆行可以轻松地在表中添加包含内容的新行。

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