單擊添加更多按鈕，一個接一個地添加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代碼。 這將有助於更輕松地找到解決方案。