CODEWITHSUNDEEP
jquery
Iwani Khalid
Iwani Khalid

Reputation: 303

Dynamically adding form elements via jQuery

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

Upvotes: 4

Views: 1985

Answers (3)

trickyzter
trickyzter

Reputation: 1591

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/

Upvotes: 0

David Thomas
David Thomas

Reputation: 253308

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:

Upvotes: 2

Andrea Turri
Andrea Turri

Reputation: 6500

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.

Upvotes: 1

Related Questions