Wednesday, November 4, 2015

Add group of fields using jquery or javascript

I had one requirement that adding some group of fields into some form.

Have used below set of HTML & jQuery codes.

Original posts: http://stackoverflow.com/questions/7232083/add-and-remove-group-of-textelements-dynamically-from-a-web-form-using-javascr

// HTML
Name Year Description
// jQuery
function checkRemove() {
    if ($('div.container').length == 1) {
        $('#remove').hide();
    } else {
        $('#remove').show();
    }
};
$(document).ready(function() {
    checkRemove()
    $('#add').click(function() {
        $('div.container:last').after($('div.container:first').clone());
        checkRemove();
    });
    $('#remove').click(function() {
        $('div.container:last').remove();
        checkRemove();
    });
});

Below code to attach remove button against each group.
$(document).ready(function() {
    var removeButton = "";
    $('#add').click(function() {
        $('div.container:last').after($('div.container:first').clone());
        $('div.container:last').append(removeButton);

    });
    $('#remove').live('click', function() {
        $(this).closest('div.container').remove();
    });
});

No comments:

Post a Comment