adding multiple fields on click event

Question

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

Script:

$(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');
});

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

Can you give us an example of how the cloned elements should be? Like the ID, Name of the name and the ID's of the DIV for the cloned elements. — Selvakumar Arumugam
– Selvakumar Arumugam, Commented Mar 13, 2012 at 21:16
Have a look at [jquery Dynamicaly clone fields and increment id] (stackoverflow.com/questions/5318985/…). — neo108
– neo108, Commented Mar 13, 2012 at 21:27
FONT statements went out a decade ago. Use class names for those asterisks. — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Mar 13, 2012 at 21:28

Selvakumar Arumugam · Accepted Answer · 2012-03-13 21:53:00Z

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.

DEMO

Below is the actual code,

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>

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

CSS:

.required { color: #cc0000; }

As a followup, I'll offer a fiddle with proper label elements that are associated with the inputs: jsfiddle.net/U73yM

Frenchi In LA · Accepted Answer · 2012-03-13 21:31:50Z

0

you are just cloning the last Div input 5. You should wrap your 4 div inside of another div like:

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

then clone your street div like:

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

answered Mar 13, 2012 at 21:31

Frenchi In LA

3,1694 gold badges27 silver badges42 bronze badges

Collectives™ on Stack Overflow

adding multiple fields on click event

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related