Showing posts with label add more fields. Show all posts
Showing posts with label add more fields. Show all posts

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();
    });
});