在点击事件中添加多个字段

我设法让我的点击事件使用下面的代码。当我点击按钮时，我想让多个字段出现。例如，当我点击'添加另一个地址只有最后一个字段克隆，但我希望所有字段克隆，例如街道，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

在点击事件中添加多个字段

回答

相关问题