上點擊添加更多按鈕

Question

在我的表單我有一個按鈕來添加更多的EMAILID在那裏我有一個任何人可以請告訴相應的JavaScript來把10個文本框，一個加10個文本框逐一..

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代碼。這將有助於更輕鬆地找到解決方案。

Answer 3

我不確定內容的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); 
    }); 
});