在點擊事件中添加多個字段

我設法讓我的點擊事件使用下面的代碼。當我點擊按鈕時，我想讓多個字段出現。例如，當我點擊'添加另一個地址只有最後一個字段克隆，但我希望所有字段克隆，例如街道，line2，line3等我沒有我需要添加更多的代碼在jQuery中，但不完全確定什麼！在此先感謝在點擊事件中添加多個字段

腳本：

$(document).ready(function() { 
    $('#btnAdd').click(function() { 
     var num = $('.clonedInput').length; 
     var newNum = new Number(num + 1); 
     var newElem = $('#input' + num).clone().attr('id', 'input' + newNum); 
     newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum); 
     $('#input' + num).after(newElem); 
     $('#btnDel').attr('disabled', ''); 
     if (newNum == 3) $('#btnAdd').attr('disabled', 'disabled'); 
    }); 
    $('#btnDel').click(function() { 
     var num = $('.clonedInput').length; 
     $('#input' + num).remove(); 
     $('#btnAdd').attr('disabled', ''); 
     if (num - 1 == 1) $('#btnDel').attr('disabled', 'disabled'); 
    }); 
    $('#btnDel').attr('disabled', 'disabled'); 
});

HTML表單的示例：街*

<div id="input2" style="margin-bottom:4px;" class="clonedInput"> 
Line2<span class="required"><font color="#CC0000">*</font></span> 
<input name="Line2" type="text" id="Line2"> 
</div> 

<div id="input3" style="margin-bottom:4px;" class="clonedInput"> 
Line3<span class="required"><font color="#CC0000">*</font></span> 
<input name="Line3" type="text" id="Line3"> 
</div> 

<div id="input4" style="margin-bottom:4px;" class="clonedInput"> 
Town<span class="required"><font color="#CC0000">*</font></span> 
<input name="Town" type="text" id="Town"> 
</div> 

<div id="input5" style="margin-bottom:4px;" class="clonedInput"> 
Postcode<span class="required"><font color="#CC0000">*</font></span> 
<input name="Postcode" type="text" id="Postcode"> 
</div>

對於使用上面只有郵政編碼字段將翻一番代碼時的例子。我的主要目的是申請人可以添加多個地址。感謝

來源

2012-03-13 user1257518

，你能不能給我們的克隆元素應該如何的例子嗎？像ID，名稱的名稱和克隆元素的DIV的ID一樣。 – 2012-03-13 21:16:30

看看[jQuery的Dynamicaly克隆字段和增量ID]（http://stackoverflow.com/questions/5318985/jquery-dynamicaly-clone-fields-and-increment-id）。 – neo108 2012-03-13 21:27:42

FONT陳述在十年前發佈。爲這些星號使用類名稱。 – 2012-03-13 21:28:26

在你的代碼只是克隆了最後一個元素。我建議你將整個地址封裝在div封裝器中，並克隆封裝器，而不是克隆每一個元素。然後你可以通過克隆的對象。嘗試我的演示，並檢查輸出HTML，看看它是如何工作的。

DEMO

下面是實際的代碼，

JS：

$(document).ready(function() { 
    $('#btnAdd').click(function() { 
     var $address = $('#address'); 
     var num = $('.clonedAddress').length; 
     var newNum = new Number(num + 1); 
     var newElem = $address.clone().attr('id', 'address' + newNum).addClass('clonedAddress'); 

     //set all div id's and the input id's 
     newElem.children('div').each(function(i) { 
      this.id = 'input' + (newNum * 5 + i); 
     }); 
     newElem.find('input').each(function() { 
      this.id = this.id + newNum; 
      this.name = this.name + newNum; 
     }); 

     if (num > 0) { 
      $('.clonedAddress:last').after(newElem); 
     } else { 
      $address.after(newElem); 
     } 

     $('#btnDel').removeAttr('disabled'); 

     if (newNum == 3) $('#btnAdd').attr('disabled', 'disabled'); 
    }); 

    $('#btnDel').click(function() { 
     $('.clonedAddress:last').remove(); 
     $('#btnAdd').removeAttr('disabled'); 
     if ($('.clonedAddress').length == 0) { 
      $('#btnDel').attr('disabled', 'disabled'); 
     } 
    }); 
    $('#btnDel').attr('disabled', 'disabled'); 
});

HTML：

<div id="address"> 
    <div id="input1" style="margin-bottom:4px;" class="input"> 
    Street<span class="required">*</span> 
    <input name="Street" type="text" id="Street"> 
    </div> 
    <div id="input2" style="margin-bottom:4px;" class="input"> 
    Line2<span class="required">*</span> 
    <input name="Line2" type="text" id="Line2"> 
    </div> 
    <div id="input3" style="margin-bottom:4px;" class="input"> 
    Line3<span class="required">*</span> 
    <input name="Line3" type="text" id="Line3"> 
    </div> 
    <div id="input4" style="margin-bottom:4px;" class="input"> 
    Town<span class="required"><font color="#CC0000">*</font></span> 
    <input name="Town" type="text" id="Town"> 
    </div> 
    <div id="input5" style="margin-bottom:4px;" class="input"> 
    Postcode<span class="required">*</span> 
    <input name="Postcode" type="text" id="Postcode"> 
    </div> 
</div>

注：從HTML刪除字體標籤和下面的CSS添加所需的*

CSS：

.required { color: #cc0000; }

來源

2012-03-13 21:53:00

非常感謝！現在更清楚 – user1257518 2012-03-13 22:07:09

作爲一個後續，我會提供一個與輸入相關的適當標籤元素的小提琴：http://jsfiddle.net/U73yM/ – steveax 2012-03-13 22:16:16

你只是克隆最後一個div輸入5.你應該穿得像另一個div中的4格：

<div id="street"> 
<div id="input2"> etc 
</div>

然後克隆您的街道格狀：

var streetClone = $('#street').clone(true); 
// update ID 
streetClone .find('*').andSelf().filter('[id]').each(function() { 
this.id = <Replace with new> 
} 
// Now insert after 
$('#street').after(streetClone);

來源

2012-03-13 21:31:50

在點擊事件中添加多個字段

回答

相關問題