Question

im very new at javascipt (im php developer) so im really confused trying to get this working.

In my web form i have 3 textfields (name, description and year) that i need to let the user add as many he needs, clicking on a web link, also, any new group of text fields need to have a new link on the side for removing it (remove me).

I tried some tutorial and some similar questions on stackoverflow but i dont get it well. If you can show me a code example just with this function i may understand the principle. Thanks for any help!

Answer 1

this is the simplest thing that has come to my mind, you can use it as a starting point:

HTML

<div class='container'>
    Name<input type='text' name='name[]'>
    Year<input type='text' name='year[]'>
    Description<input type='text' name='description[]'>
</div>
<button id='add'>Add</button>
<button id='remove'>Remove</button>

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

fiddle here: http://jsfiddle.net/Fc3ET/

In this way you take advantage of the fact that in PHP you can post arrays: server side you just have to iterate on $_POST[‘name’] to access the various submissions

EDIT – the following code is a different twist: you have a remove button for each group:

$(document).ready(function() {
    var removeButton = "<button id='remove'>Remove</button>";
    $('#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();
    });
});

Fiddle http://jsfiddle.net/Fc3ET/2/