在点击事件中添加多个字段 [英] adding multiple fields on click event

问题描述

我已经设法使我的点击事件与以下代码一起使用.当我单击按钮时，我希望出现多个字段.例如，当我单击``添加另一个地址时，仅最后一个字段克隆但我希望所有字段都克隆，例如street，line2，line3等.我不，我需要在jquery中添加更多代码，但不能完全确定是什么！ 预先感谢

I have managed to get my click event working with the following code. When I click the button I want mutiple fields to appear. For example at the moment when I click 'add another address only the last field clones but I want all fields to clone e.g. street, line2, line3 etc. I no I need to add more code in the jquery but not exactly sure what! Thanks in advance

脚本:

$(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格式的示例: 街道*

Sample of html form: Street*

<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>

例如，当使用上面的代码时，仅邮政编码"字段会加倍.我的主要目的是，申请人可以添加多个地址. 谢谢

For example when using the codes above only the Postcode field would double. My main aim from this is that applicants can add more than one address. Thanks

推荐答案

在您的代码中，您只是克隆了最后一个元素.我建议您将整个地址包装在div包装器中，然后克隆包装器，而不要克隆每个元素.然后，您可以遍历克隆的对象.尝试我的演示并检查输出HTML以查看其工作原理.

In your code you are just cloning the last element. I would suggest you to wrap the whole address inside a div wrapper and clone the wrapper instead of cloning each and every element. Then you can work through the cloned object. Try my demo and check the output HTML to see how it works.

演示

下面是实际代码，

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下方添加了必需的*

NOTE: Removed font tag from html and added below css for the required *

CSS:

.required { color: #cc0000; }

这篇关于在点击事件中添加多个字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！