代码之家 › 专栏 › 技术社区 › TaherT

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

html javascript

-1

TaherT · 技术社区 · 14 年前

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

3 回复 | 直到 14 年前

PHPology 14 年前

尝试这样的方法,我从另一个项目中偷了一些东西。将您的表单包装在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>

Castrohenge 14 年前

我不确定您有什么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);
    });
});

Kangkan 14 年前

你用表格来放置文本框吗?在这种情况下,从表中克隆行很容易添加一个包含表中内容的新行。

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