CODEWITHSUNDEEP
javascriptjqueryfield
SourPatchKiddo
SourPatchKiddo

Reputation: 23

add/remove several input fields dynamically

I have a form where several fields may have multiple inputs, i.e.

I'm still new and have been looking around for tutorials. It seems like quite a bit of them tend to focus on just one field and tend to have input markup in the javascript, which makes it seem like I'd have to copy and paste the script for each different input field. i.e. this one: http://muiomuio.com/web-design/add-remove-items-with-jquery

$(function() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents p').size() + 1;

    $('#addScnt').live('click', function() {
            $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
            i++;
            return false;
    });

    $('#remScnt').live('click', function() {
            if( i > 2 ) {
                    $(this).parents('p').remove();
                    i--;
            }
            return false;
    });
 });

Is there a way to streamline this? Thank you so much for your help!

Upvotes: 2

Views: 2615

Answers (1)

kwicher
kwicher

Reputation: 2082

Have a look at this jsFiddle. I wrote a script for adding the fileds but it would be similar for removing them.

Hve fun

K

Upvotes: 2

Related Questions