add/remove several input fields dynamically

Question

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

Your Name
Songs you like: [add more!]
Movies you like: [add more!]
shows you like: [add more!]

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!

kwicher · Accepted Answer · 2011-06-17 19:53:18Z

2

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

answered Jun 17, 2011 at 19:53

kwicher

2,0821 gold badge19 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SourPatchKiddo Over a year ago

Thank you so much! And I love how clean and simple it is!

Collectives™ on Stack Overflow

add/remove several input fields dynamically

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related