jQuery Add/Remove Extra Input Form Fields

This is a script I wrote for adding and removing additional input fields of a form. It’s for a new custom post type I’m making. It uses event delegation too. You can see a working example of it here.

Twitter Facebook Digg Delicious Stumble RSS Email

HTML:

<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>

<div id="p_scents">
    <p>
        <label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
    </p>
</div>

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

Levels: Syntax: CSS 3, HTML 5, jQuery Posted by: Jared

User Comments

( ADD YOURS )

lukas November 21

You saved my day. Thank you!
steve November 22

Brilliant, was looking at your fiddle. Would be nice use TAB to open a new input field, with focus within that box.
Great stuff, we are already live with it thanks
Jared November 22

It wouldn't be too hard to implement something like that I'm sure.
Glad you found it useful, I know I did in making it.
I use it on another site I'm making for adding/removing custom meta boxes for a WordPress custom post type.
Steve November 22

Hi Jared, we finally figured it out. But decided not to go with the tab system.
What we have now, is the ability to limit tag boxes ( we use for keywords ) to 7 as it fits our page structure.
Then by deleting one, it allows for new tag box to be created.
Also added focus into the tag box, when adding a new input field.

Great work, and thanks to your fiddle ( which we found via google ) we finally implemented a system, that works for us.

Cheers Ste
Jared November 22

I'm happy I could help. I'm interested in what you turned it into exactly. It sounds pretty cool, I'm just not able to follow exactly what you did.

Would you be able to show a screenshot? I would love to see it, sounds like a useful and cool thing.
steve November 22

Image: http://www.sitehelp.com.au/images/auto-tags.png

Code:

$(function() {
var scntDiv = $('#tags');
var i = $('#tags span').size() + 1;
$('#addTag').live('click', function() {
var count = $('#tags span').length + 1;
$(' ').appendTo(scntDiv);
$('#tags' + count).focus();
i++;
if ( $('#tags span').length >= 6 ) $('#addTag').hide();
return false;
});

$('#removeTag').live('click', function() {
if( i > 1 ) {
$(this).parents('span').remove();
i--;
}
if ( $('#tags span').length < 6 ) $('#addTag').show();
return false;
});
});

Hope this helps
Jared November 22

Ohhh yeah, that's cool. Looks nice too.
That's cool, not what I was picturing though. I thought it was some crazy other type of thing haha.
steve November 22

Simplicity is key huh :)
Deffo a cracking little script mate
Philip December 24

hi Jared,
you are a genius my friend, this is an excellent tutorial!!!

just a question, is it possible to limit the fields? lets say a number of 4 fields?

thanks a lot!
Philip
Umz June 10

Beautiful work here.. I must say it's absolutely beautiful.
Erik de Bos June 15

First of all - cool stuff!! I was seriously stuck until I ran into your post: I wasn't familiar with the live()...

Small little issue thou - if you do a lot of removing and adding you will end up with duplicate names for the inputs... :-(
testero July 18

Hi, Jared

I'm newbie in wordpress. How to implement your code in wordpress. I've tried but failed. When I put it in PHP, it's run well. Thx for your help.