Dynamically adding two form elements with jQuery

Question

I am trying to create two form elements when the user clicks a button, which he can do 5 times, but I am new to jQuery so I am running into problems,

here is the code:

$(document).ready(function() {
    $('#btnAdd').click(function() {
        var num     = $('.clonedInput').length; 
        var numTwo     = $('.clonedInputTwo').length; 
        var newNum  = new Number(num + 1);      

        var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
        var newElemTwo = $('#inputTwo' + numTwo).clone().attr('id', 'input' + newNum);


        newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
        newElemTwo.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);


        $('#input' + num).after(newElem);
        $('#inputTwo' + numTwo).after(newElemTwo);

        $('#btnDel').attr('disabled','');

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

        $('#btnDel').click(function() {
            var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
            $('#input' + num).remove();     // remove the last element
            $('#inputTwo' + num).remove();     // remove the last element

            // enable the "add" button
            $('#btnAdd').attr('disabled','');

            // if only one element remains, disable the "remove" button
            if (num-1 == 1)
                $('#btnDel').attr('disabled','disabled');
        });

        $('#btnDel').attr('disabled','disabled');
    });

The HTML:

<form id='myForm'>
    <div id='input1' style='margin-bottom:4px;' class='clonedInput'>
        Name: <input type='text' name='name1' id='name1' />
    </div>
    <div id='inputTwo1' style='margin-bottom:4px;' class='clonedInputTwo'>
        School: <input type='text' name='nameTwo1' id='nameTwo1' />
    </div>
    <div>
        <input type='button' id='btnAdd' value='add another name' />
        <input type='button' id='btnDel' value='remove name' />
    </div>
</form>

When I click the button it works once, then it just proceeds to create name elements, and no school elements!

Created jsFiddle at jsfiddle.net/e6cwd

MvanGeest
– MvanGeest

2010-07-29 08:47:51 +00:00
Commented Jul 29, 2010 at 8:47 — MvanGeest
– MvanGeest, Commented Jul 29, 2010 at 8:47

Boris Delormas · Accepted Answer · 2010-07-29 09:09:12Z

2

var newElemTwo = $('#inputTwo' + numTwo).clone().attr('id', 'input' + newNum);

should be

var newElemTwo = $('#inputTwo' + numTwo).clone().attr('id', 'inputTwo' + newNum);

Take a look (thanks to MvanGeest)

edited Jul 29, 2010 at 9:09

answered Jul 29, 2010 at 8:50

Boris Delormas

2,5391 gold badge20 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Odyss3us Over a year ago

Thanx, that worked great! One more thing, is there a way to create the elements in such a way that it could be arranged as Name:School:Name:School:Name:School etc etc?

MvanGeest Over a year ago

Why not put Name and School in a div and then clone the div? Should be easier if the fields only appear in pairs... and it would make cleaner code.

MvanGeest Over a year ago

+1 for being first and this fixes yours on top (easier navigation)

Odyss3us Over a year ago

Or how can I add line breaks after each element?

MvanGeest Over a year ago

Here you go: jsfiddle.net/e6cwd/9 It's still not very beautiful, but it's better. Would you like an even more flexible version, which allows for more fields?

|

Collectives™ on Stack Overflow

Dynamically adding two form elements with jQuery

1 Answer 1

7 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Linked

Related