Dynamically adding form elements via jQuery

Question

I have succeeded in setting up the form and making it work. However I have 2 issues:

a) The remove button does not work (it will remove the last row of the form elements)

b) and this is a minor markup issue, when pressing "add" to add a new row of form elements, instead of creating a new <ul></ul> it's loaded into the existing row <ul></ul>

Here's the demo link http://jsfiddle.net/34rYv/1/

And my JS code below

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

    var newSection = $('#pq_entry_' + num).clone().attr('id', 'pq_entry_' + newNum);

    newSection.children(':first').children(':first').attr('id', 'year_' + newNum).attr('name', 'year_' + newNum);
    newSection.children(':nth-child(2)').children(':first').attr('id', 'qualification_' + newNum).attr('name', 'qualification_' + newNum);
    newSection.children(':nth-child(2)').children(':first').attr('id', 'university_' + newNum).attr('name', 'university_' + newNum);

    $('.clonedSection').last().append(newSection)

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

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

$('#btnDel').click(function() {
    var num = $('.clonedSection').length; // how many "duplicatable" input fields we currently have
    $('#pq_entry_' + 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');
});

Anyone can help me with the <ul></ul> issue?

Iwani Khalid
– Iwani Khalid

2012-04-20 18:36:57 +00:00
Commented Apr 20, 2012 at 18:36 — Iwani Khalid
– Iwani Khalid, Commented Apr 20, 2012 at 18:36

David Thomas · Accepted Answer · 2012-04-20 20:04:35Z

2

To address your first problem, I created a del() function which would evaluate the number of 'rows' remaining and, if there was only one would disable the #btnDel or, conversely, if there is more than one row, enable it.

And then I, well, changed everything else, too.

var containerClass = '.clonedSection',
    containerElem = $(containerClass),
    a = $('#btnAdd'),
    d = $('#btnDel');

function numRows(elem) {
    return elem.length;
}

function del() {
    var r = numRows($(containerClass));
    if (r>1){
        d.prop('disabled',false);
    }
    else {
        d.prop('disabled',true);
    }
}

del();
a.click(
    function() {
        var rows = numRows($(containerClass)),
            lastRow = rows + 1,
            newRow = containerElem
            .first()
            .clone(true, true)
            .insertAfter($(containerClass).last());
        newRow
            .attr('id',function(i,v){
                return v.replace(/\d/,'')+lastRow;
            })
            .find('input').each(
            function() {
                var that = this;
                that.id = that.id.replace(/\d/, '') + lastRow;
                that.name = that.name.replace(/\d/, '') + lastRow;
            });
        del();
    });

d.click(
    function(){
        $(containerClass)
            .last()
            .remove();
        del();
    });

The problem you were facing with the new row being added to the existing ul is because you looked for the last of the .clonedSection elements and then appended the new row to that element, rather than using insertAfter().

I think the above revision does what you need and, hopefully, is clear enough to follow.

References:

answered Apr 20, 2012 at 20:04

David Thomas

254k53 gold badges382 silver badges421 bronze badges

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

3 Comments

Iwani Khalid Over a year ago

Wow!! Thanks David for your time to rewrite the script. Thank you so much! I will go through the code and the references you provided as well. Thank you!

David Thomas Over a year ago

You're very welcome! I had a few quiet minutes, and this interested me. So thank you! Anyway, I hope it helps (if you need explanations of anything I'll do what I can to help out). =)

Iwani Khalid Over a year ago

Hi David, I tried to customize your original code for the actual functionality I need which is to be used for 3 form sections. For each of these sections, the user can dynamically add rows of fields to fill in. I got it to work but gosh, with many many glitches so I supposed my method isn't right... Here's the link if you have the time to take a look at it jsfiddle.net/8d7Bp/3

Andrea Turri · Accepted Answer · 2012-04-20 17:49:23Z

1

Why don't you use a solution like this to do that? http://jsfiddle.net/rniemeyer/gZC5k/

It's a mvvm javascript library, easy to use and understand. More information here.

answered Apr 20, 2012 at 17:49

Andrea Turri

6,5207 gold badges41 silver badges64 bronze badges

1 Comment

Iwani Khalid Over a year ago

Thanks Andrea! That looks like a great solution. I will definitely use it next time!

trickyzter · Accepted Answer · 2012-04-20 23:10:33Z

0

Change:

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

To:

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

'disabled' is a property not an attribute. In addition, change any other instances.

See: http://jsfiddle.net/34rYv/2/

To fix the insertion issue:

newSection.insertAfter('#pq_entry_' + num).last();

http://jsfiddle.net/34rYv/25/

edited Apr 20, 2012 at 23:10

answered Apr 20, 2012 at 17:46

trickyzter

1,60113 silver badges9 bronze badges

7 Comments

Mathew Thompson Over a year ago

I'm pretty sure it's an attribute? :)

Roko C. Buljan Over a year ago

or use $('#btnDel').attr('disabled', false);

trickyzter Over a year ago

Straight from the jQuery documentation: Properties generally affect the dynamic state of a DOM element without changing the serialized HTML attribute. Examples include the value property of input elements, the disabled property of inputs and buttons, or the checked property of a checkbox. The .prop() method should be used to set disabled and checked instead of the .attr() method. The .val() method should be used for getting and setting value. api.jquery.com/prop

Iwani Khalid Over a year ago

Thanks @trickyzter that seems to be the trick and thanks for the explanation too. Do you have any idea why the new row <ul></ul> is inserting inside the existing <ul></ul>?

trickyzter Over a year ago

@Iwani, you need to extract the children from the ul and append them. See above for the change.

|

Collectives™ on Stack Overflow

Dynamically adding form elements via jQuery

3 Answers 3

3 Comments

1 Comment

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related