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

Answer 1

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:

• attr().
• click().
• clone().
• each().
• find().
• first().
• insertAfter().
• last().
• prop().
• remove().
• JavaScript Regular Expressions.
• replace().

Answer 2

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.

Answer 3

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/