Add/remove form elements using jQuery
May 31, 2007
This is a simple tutorial about creating and removing HTML form elements dynamically using jQuery without any page refresh. It is exactly like the one found in Gmail compose mail page at the file attachment area. I actually needed this functionality for a little project I’m currently working on. I managed to find a few good tutorials about this subject on the net, most notable was Dustin Diaz’s technique using purely hand-written javascript (without any JS framework). However, with the availability of many good and stable JS frameworks these days, I decided to give it a try using jQuery.
The code to add and remove elements from the page is very short and simple. The only thing that will make it long is ‘how huge is your form gonna be?’. That is, ‘how many HTML form elements do you want to add at one time?’.
Before we get started, you might want to check out the demo. This script has been tested in Firefox 1.5, Firefox 2.0, IE6 and IE7.
First of all, you will need these files to begin:
- the latest jQuery [compressed, 19kB]
- jQuery Plugin: highlightFade [8kB] (Optional – to give a little highlight effect when adding elements)
1. OK, first I’m gonna import both JS in the <head> of my html doc.
<script type="text/javascript" src="jquery-latest.pack.js"></script>
<script type="text/javascript" src="jquery.highlightFade.js"></script>
2. Then, create a form with a <div> nested inside it. Also create an <a> tag that will be used to generate the form. The <input type=”hidden”> is required in order to ensure a unique id is assigned to every newly generated form elements.
<p><a href="#" onClick="addFormField(); return false;">Add</a></p>
<form action="#" method="get" id="form1">
<input type="hidden" id="id" value="1">
<div id="divTxt"></div>
<p><input type="submit" value="Submit" name="submit">
<input type="reset" value="Reset" name="reset"></p>
</form>
3. Next, the JS code for adding the form. The form element being added is wrapped inside a <p> with an id corresponding each row. The simple jQuery function used here is $().append(). At the same time, we also create a ‘remove’ anchor right next to the elements we added. These anchor will be used to invoke the function to remove the particular row. Next, a nice little highlight effect is added to the <p> using highlightFade jQuery plugin and finally the value of <input type=”hidden” id=”id”> is incremented.
function addFormField() {
var id = document.getElementById("id").value;
$("#divTxt").append("<p id='row" + id + "'><label for='txt" + id + "'>Field " + id + " <input type='text' size='20' name='txt[]' id='txt" + id + "'> <a href='#' onClick='removeFormField(\"#row" + id + "\"); return false;'>Remove</a><p>");
$(‘#row’ + id).highlightFade({
speed:1000
});
id = (id – 1) + 2;
document.getElementById(“id”).value = id;
}
4. Finally, the JS code for removing form elements. Basically, what this function does is remove the <p> that wrapped the form elements, using jQuery function $().remove(). As a result, everything will be removed safely (not hidden) from the form. This can be seen when you submit the form; only values from the visible text fields are sent to the browser.
function removeFormField(id) {
$(id).remove();
}
Epul's 
June 4, 2007 at 5:18 pm
Hey dude thanks heaps for this it’s great! I’m only new to this stuff, and I have run into a bit of a problem. I have this as the form controls being added, which inserts great,
$(“#divTxt”).append(“First Name:Last Name:Remove“);
however, I cannot get the Remove button to work. With a bit of digging I’m guessing it’s because of the and tags in amongst the form controls, is there any way I can make this work?
Cheers
June 4, 2007 at 5:22 pm
hah just figured it out! Looks like I pasted the wrong line above anyway. Thanks again this was exactly what I’ve been searching for, and your description/walkthru was very clear and helpful.
June 4, 2007 at 7:08 pm
Argh… is it possible for you to explain how I can now submit these to my database? I have inputs with names studentName1 & studentEmail1, studentName2 & studentEmail2 … studentnameN & studentEmailN, etc which should each be added as rows in my students table.. but I’m at a loss to figure this out. Any help or a point in the right direction, even google search phrase would be great 🙂
July 26, 2009 at 10:38 am
See my new article @ http://www.web-design-talk.co.uk/58/adding-unlimited-form-fields-with-jquery-mysql/
June 5, 2007 at 12:28 pm
@oldmateluke
hi…if u notice at my example above in the JS code for adding fields, i intentionally name the new inserted fields as name=”txt[ ]” while maintaining a unique id. The idea of naming this way (name=”txt[ ]”) is to simplify processing in the server-side code (e.g. insert to DB).
So in the server-side code, say PHP, u need to write something to count the elements of $_POST[’txt’] array. Then, using the value u need to construct a while or for loop to process the array, which will be accessible through $_POST[’txt’][0], $_POST[’txt’][1], $_POST[’txt’][2]…
Hope that helps
June 5, 2007 at 12:31 pm
Sorry about the single & double quotes messing up the code snippets in this post. Im not quite sure how to solve this thing
June 5, 2007 at 12:42 pm
hi shaiful..u did a great job..u rules man…
September 1, 2007 at 2:27 am
I read over this and created my own version which would create multiple form sections, each with the ability to create multiple file input fields. You should adapt this a bit, and create a generic function that takes the ID of the affected element, as well as the counter to use. Also, be a bit careful with the WordPress text functions, you’ve got actual quotations (‘’“”) in the code, rather than regular marks (‘”). (Although, I have a feeling they’ll get broken when I post this, anyway, so you won’t even see it.) Try getting a code posting plug-in. There are plenty of great ones out there.
November 27, 2007 at 1:04 pm
hmmm nice code… i havent tried it yet, but i hav a question regarding the reset button you put in your example. it goes this way, what if i have added an element let say 5 element, i know it has its unique ID ryt? then i press the reset button then add another five element. aha! i have now 10 form element with five unique ID. this is not much a problem but makes the reset button not useful. Thats my own point of view…
January 2, 2008 at 10:22 pm
Hi Shaiful. Great! I love the script and its exactly what i was looking for – Thank You. One comment/question/suggestion… I notice that when you remove elements and then add some new elements the id numbers get out of sequence (due to the previous elements being added) Is there a way to reset that array as to stay in correct numeric order when removing and adding?
Thanks again!
pauly_43
January 9, 2008 at 2:34 pm
Hi everybody, with the last JQuery.js version IE 6 have some little problems. It doesn’t remove and highlitht items…
Change $(“#divTxt”).append(“Field ” + id + ” […]
with:
$(“#divTxt”).append(“Field ” + id + ”
June 1, 2010 at 11:19 am
Change $(“#divTxt”).append(“Field ” + id + “ […]
with:
$(“#divTxt”).append(“Field ” + id + “
anything different?
April 12, 2008 at 10:56 am
[…] dagboek bij 10:50 door christof Vandaag heb ik het eindelijk gevonden. Na het vinden van deze site https://mohdshaiful.wordpress.com/2007/05/31/form-elements-generation-using-jquery/ was het onmiddellijk raak. Het maakt gebruik van een apart stukje .js code dat je moet importeren. […]
May 23, 2008 at 3:15 pm
Awesome script, mohdshaiful! I’m trying to integrate this with jQuery Autocomplete Mod (http://www.pengoworks.com/workshop/jquery/autocomplete.htm).
Could you tell me a good way display rows that are pre-populated? I know how to prepopulate the form fields, I just can’t figure out how to show rows on pageload. I would like to use this to edit records as well as add.
May 23, 2008 at 5:02 pm
One other thing noticed… If the page is refreshed, the row count is incremented.
Add = Field 1
Refresh
Add = Field 2
Is there any way to reset the count upon refresh?
June 11, 2008 at 1:46 pm
your website is quite frustrating to read through, difficult to read, the font size is very small and the code that you are reporting it’s nearly impossible to read.
And I have just a standard resolution (1280×1024)
June 12, 2008 at 10:35 am
hai, its really useful for us.
June 13, 2008 at 6:24 am
how can insert the data in this coding
June 20, 2008 at 3:05 pm
Hi, great job but with IE7 remove button and highlights effects don’t work, please help me!!!
June 24, 2008 at 5:23 am
hi, thanks for ur coding,its very useful for my work,but i want display the new divs in upwards not in downwards, pls help to this
June 25, 2008 at 10:36 am
Hi at all!
I have a question:
if I put the demo code in my server dont’ work with IE7, please help me, thx
January 15, 2010 at 8:21 pm
just about typing mistakes and closing tags
June 29, 2008 at 2:38 pm
For last versions of jQuery and to fix some IE bugs it’s better to use plugin http://www.fyneworks.com/jquery/multiple-file-upload/
July 1, 2008 at 4:44 am
great job…may god bless u
July 3, 2008 at 2:51 pm
Hi, great script!.
But the remove function doesn’t seems to work in IE7 with the latest jquery pack. 1.2.6. any ideas?
July 15, 2008 at 2:54 pm
This script isn’t working in IE7 with Jquery 1.2.6., but I found a fix: remove the and it works perfectly.
July 15, 2008 at 2:54 pm
^^ remove the in the append.
July 27, 2008 at 10:29 pm
thanks! i’ll use this in my projects 🙂
August 10, 2008 at 11:57 pm
Nice post. Anyway, a few things:
– there is parseInt, that looks nicer to me than (id – 1) + 2 😛
– You need to decrease the number of the fields again when you remove a field, if you use the numbers
– Reloading the page in firefox somehow doesn’t reset the hidden field so that it starts at the number it had before (annoying…)
July 27, 2010 at 3:05 am
– Reloading the page in firefox somehow doesn’t reset the hidden field so that it starts at the number it had before (annoying…)
August 31, 2008 at 11:10 pm
Hello. Nice job man. I was wondering if you can integrate a chain script into the add new row script. So for every new row, you could select Country and States from db. Thanks.
September 3, 2008 at 12:47 pm
the text are too small. anyway. thanks for your tutorial.
September 11, 2008 at 6:59 am
Good work on the post. Just what I was looking for 🙂
September 17, 2008 at 9:31 pm
Hi,
How could i make it so every time the input field is no empty that a new input field automatically gets added instead of having to press add?
September 24, 2008 at 10:51 am
Thanks a lot
Very usefull
September 26, 2008 at 6:27 pm
Thanks a ton. This is just what I was looking for.
September 29, 2008 at 9:08 am
Hi. This is great, I have a quick question though.
Right now when I see in your demo, and Click on add, it keeps adding input box, How can I limit it to only 3 input box and once 3 input boxes gets added, the Add button disappear.
thanks
October 27, 2008 at 2:52 pm
The quotes don’t make much of a difference as far as I know 🙂 Anyway great job there. Its a great time saver!
October 29, 2008 at 4:08 am
great post, but use some syntax highlighting please (^_^)
October 30, 2008 at 11:03 am
Hello,
I have an issue… i know that you have not had any comments since 2007 but i thought i would get in touch just to inform you that your script does not work with the latest jquery pack. I can only hope that you still have the enthusiasm to keep this post updated because i really need this for my website, it took me forever to find this script and cant find any alternatives.
I have another jquery element on the form which relies on the latest jquery pack 😦
I would bow to you and kiss your feet if you happen to figure out a way round this problem
Craig
November 20, 2008 at 5:10 pm
great example!
A big thank you from Buenos Aires
November 24, 2008 at 10:53 pm
thanks man for this tip… keep posting!
November 25, 2008 at 12:38 am
does not work with the new jquery 1.2.6
December 3, 2008 at 1:43 am
Hey 😉
the script doesn’t work whit the new jQuery. (In IE is the problem). U could optimize for the new jQuery ? Thx
December 3, 2008 at 12:15 pm
Hi,
Thanx that u have made available this code to add / remove html element using JQuery but their is a mistake in remove javascript method $(id).remove(); , it should be $(‘#’.id).remove(); this is correct one to remove / add element to ur html template.
with ur code it asks for html element i.e. $(‘div’).remove(); / $(‘div’).add();
with this change it will add / remove elements
Thanx & Regards
cheers 😉
***tareq***
December 3, 2008 at 12:17 pm
Syntax for above comment to add / remove
$(‘#’+id).add();
$(‘#’+id).remove();
now it will look for id of give element.
😉 cheers
India
December 6, 2008 at 12:17 pm
Nice post bro! Very helpful. Since u r much experianced with jquery, i think u may b able to help me little bit. I m trying to design an online query with a timer of 10 mins.I want to submit the form automaticaly right after 10 mins. Is it possible to submit the form right after 10 mins?
December 16, 2008 at 5:18 pm
it’s exactly what i needed. thank’s mate!
January 2, 2009 at 6:11 pm
Great! Thanks
January 19, 2009 at 2:05 pm
So how will this work with IE and the last release of jquery?!?
Great job!
Regards
Nasko
January 20, 2009 at 6:00 pm
Great code. I have a problem with the remove function. I have copied and pasted from the demo with all the javascript files. Any advice would be great
January 20, 2009 at 6:04 pm
Have just checked on firefox and it works fine. Seems its a explorer issue (version 6) dont know why i still have this version. Strange that on your demo it works fine.
January 22, 2009 at 7:13 am
Awesome! Thanks this is just what I was looking for!
January 27, 2009 at 12:37 pm
Can this be modified to allow a predefined number of form fields to be added with non-dynamic field names? For instance, add up to 5 text fields each with a predefined name.
February 5, 2009 at 11:58 am
Hey there,
I was wondering if you had this working with the new jQuery library.
I am trying to do something very similar to you, and found it works perfectly in FF but the remove will not work with the new jQuery library in IE. Your jQuery library is fine, but does not support the new UI for jQuery.
Any help would be great.
Thanks,
Andy
February 9, 2009 at 1:46 pm
Yeah how can set autofocus on the text field when we click add.
please help me
February 14, 2009 at 10:40 pm
This is a very interesting method, But how can one use it to add a more complex form, not just TXT fields.
For example a form that contains lists, radio buttons, checkboxes etc…
I have tried to regex something, but with no success..
February 23, 2009 at 2:33 am
Thanx guy!
February 25, 2009 at 4:25 pm
a = (id – 1) + 2;
b = id + 1;
assert( a === b );
March 8, 2009 at 9:16 am
REMOVE functionality is not working with latest jQuery in IE, as mentioned by many others. Can you please fix it.
March 15, 2009 at 4:01 am
Thank you for the script, but can you fix the remove function in IE for the newest jquery pack?
March 17, 2009 at 8:29 pm
You can simply change the addFormField code.. for example:
$(‘#id_of_object_before’).add(”); etc etc
However I’m having problems processing the form. It doesnt seem to send the new form objects true the post.. im going to try a get method now
March 19, 2009 at 3:45 am
@tareq
But in the author’s removeFromField function, he passes the whole id, for example, ‘#row1’. Changing it to $(‘#’+id).remove() would add an extra ‘#’ in front.
March 27, 2009 at 1:31 pm
Finally I found it!!
Thank you friend.
April 10, 2009 at 7:32 pm
Hello guys. Thanks for this very useful code! It’s really what I was searching for! As I can see from all posts submitted, I’ve had the same problem of many others, using the code with IE. I try to follow your instructions but I can’t resolve the problem anyway:
I can read some posts like this “remove the in the append” but probably you used a not validable characters in this. I try to do as Tareq wrote, but it isn’t yet working anyway!
#Please: MAYBE IT COULD BE VERY USEFUL for me and many others TO POST THE WHOLE RIGHT CODE!!!
thanks to all!!!
April 17, 2009 at 10:10 pm
It’d be great if it worked with the latest jquery library.
K.
May 22, 2009 at 4:13 am
1 п. “Не имей сто друзей, а имей сто шекелей” тоже хорошо рифмуется 🙂
8 п. Ты никогда не потеряешь работу. Когда закончатся фотографии можно размещать рисунки (да хоть бы и конкурс объявить на лучший рисунок Одри (-:), аппликации и фотографии поделок из пластилина…
9 п. Сто пудов ! 🙂
May 25, 2009 at 1:57 pm
Да пошленько немного, а так прикольно) я обожаю …)
здесь видел ет gamebulletin.ru
June 11, 2009 at 2:55 pm
i think there something wrong with your codes..thats why it cant remove the element. The label tag has no closing tag.
take a look below:
var id = document.getElementById(“id”).value;
$(“#divTxt”).append(“Field ” + id + ” […]
June 12, 2009 at 8:10 am
Hey thanks for such a useful tutorial. I am trying to change it so each added field is a tile upload section. How do I set it so each additional field is “input type=file”??
THanks
June 17, 2009 at 4:31 am
wefrgt http://www.linkedin.com/in/dgdfdgf sites like youporno com dasadsa http://www.linkedin.com/in/dgdfdgf youporno arabic dasadsa http://www.linkedin.com/in/dgdfdgf youporno com lite beta dasadsa http://www.linkedin.com/in/dgdfdgf youporno asian
July 1, 2009 at 2:47 pm
just to update for step 4: $(id).remove(); doesn’t work (maybe for newer jquery)..
now u need: $(‘#’+id).remove();
cheers
July 9, 2009 at 8:14 pm
There should be a more beautiful way like not just writing the HTML code, but using JQuery to generate the form objects.
I try to find out.
July 11, 2009 at 4:35 pm
Problem with ie was that the tags wasn’t properly closed:
function addFormField() {
var id = document.getElementById(“id”).value;
$(“#divTxt”).append(“Field ” + id + ” Remove“);
id = (id-1)+2;
document.getElementById(“id”).value = id;
}
July 11, 2009 at 4:37 pm
Trying to paste again… Now with pre.
function addFormField() { var id = document.getElementById("id").value; $("#divTxt").append("Field " + id + " Remove"); id = (id-1)+2; document.getElementById("id").value = id; }July 11, 2009 at 4:39 pm
$(“#divTxt”).append(“>p id=’row” + id + “‘<>label for=’txt” + id + “‘>Field ” + id + ” </label><input type=’text’ size=’20’ name=’txt[]’ id=’txt” + id + “‘/> <a href=’#’ onClick=’removeFormField(\”#row” + id + “\”); return false;’>Remove</a></p>”);
July 11, 2009 at 4:40 pm
$(“#divTxt”).append(“<p id=’row” + id + “‘><label for=’txt” + id + “‘>Field ” + id + ” </label><input type=’text’ size=’20’ name=’txt[]’ id=’txt” + id + “‘/> <a href=’#’ onClick=’removeFormField(\”#row” + id + “\”); return false;’>Remove</a></p>”);
July 11, 2009 at 4:43 pm
Ooops, hard to paste correct code, now I think I made it. There it is with correct format. The problem with the original code when I tried in ie7 was that it missed some endtags. and Hth
December 16, 2009 at 4:13 pm
Very nice and useful tutorials to web designers,
Thanks for posting.
January 15, 2010 at 8:22 pm
true 😉
July 26, 2009 at 10:37 am
As a few people have been asking how to save information to a database I made an extended tutorial using your original idea, where I get all the dynamic form values and save them to a MySQL database, using a many-many database design. See:
http://www.web-design-talk.co.uk/58/adding-unlimited-form-fields-with-jquery-mysql/
January 11, 2010 at 3:11 pm
Now how do you go about remove these dynamically added form elements? I’ve tried many ways, but it don’t work. what’s the best way to do it?
August 24, 2009 at 2:53 pm
Look this
a = (id – 1) + 2;
change for
a++;
😉
September 17, 2009 at 4:34 pm
Javascript errors are not always where you think.
IE7 triggers errors when html is not well formated.
So the code can work on IE7 only if you correctly nest your html elements and make sure it is valid (amazing when it comes from IE isn’t it ? 🙂
October 23, 2009 at 3:09 am
You are using jquery and still document.getElementById?
You should use something like this –
var id = $(“input#id”).val();
November 5, 2009 at 7:03 am
Hey,
at first nice plugin,
but where can i change the start id?
Cause when i get allready 2 or more fields by sql query, than it should start with id 3 or 4, its no prob to add php into js, but i really dont know where i can change the “startid” of the jquery function.
Hope you know what i mean 😀
P.S.: Is there another plugin like that?
December 5, 2009 at 2:33 am
Hai,
This seems to be not working in IE 6 & latest versions..the problem is remove the “<label" in append line.it will work,you can use the below code also.
$("#divTxt").append("Field ” + id + ”  Remove“);
happy coding……
December 19, 2009 at 6:35 pm
bug with “IE7” remove and highlights effects don’t work, please help me!!!
var rowId = document.getElementById(‘counter’).value;
$(“#divTxt”).append(“Tagline ” + (parseInt(rowId)+1) + ” Remove“);
$(“#row” + rowId).highlightFade({
speed:1000
});
rowId = (rowId – 1) + 2;
document.getElementById(‘counter’).value = rowId;
};
function removeFormField(row) {
$(“#”+row).remove();
}
January 4, 2010 at 6:01 am
thanks dude,
this was what i want
January 15, 2010 at 5:31 pm
I played a little with your code and I added a Reorder function after removing field, so it recount numbers and so they are still in right order.. 🙂 Maybe someone should use it so here it is:
function reorderFormField() {
var idleng;
var rows, labels, inputs, anchors;
var rn;
document.getElementById(“id”).setAttribute(“value”, “1”);
id = document.getElementById(“id”).value;
idleng = $(“[id^=’row’]”).length;
rows = $(“[id^=’row’]”);
for (i=0;i<idleng;i++)
{
rn = i+1;
rows[i].setAttribute('id', "row"+rn);
}
var labels;
labels = $("[for^='txt']");
for (i=0;i<idleng;i++)
{
rn = i+1;
labels[i].setAttribute('for', "txt"+rn);
labels[i].firstChild.nodeValue="Field "+rn+" ";
}
inputs = $("[id^='txt']");
for (i=0;i<idleng;i++)
{
rn = i+1;
inputs[i].setAttribute('id', "txt"+rn);
}
anchors = $("[onclick^='remove']");
for (i=0;i<idleng;i++)
{
rn = i+1;
anchors[i].setAttribute('onclick', "removeFormField(\"#row" + rn + "\")");
}
idleng++;
document.getElementById("id").setAttribute("value", idleng);
}
I have also upgraded a remove function to make similar animation like when you are adding field:
function removeFormField(id) {
$(id).highlightFade({color:'red',speed:500,complete:function() {$(id).remove();reorderFormField();}});
}
As you see there is reorder function called, you can throw it away if you dont need it 😉
I hope thi will be useful for someone.. have a nice day 😉
June 1, 2010 at 11:49 am
not work anyway 😦
October 30, 2010 at 6:21 am
Thanks for this! It works great, but I get an error message when I remove. It there something that is incorrect in this code?
May 23, 2011 at 2:59 pm
hi there guys. this seems like a great code. i am a newbie and an finding difficult to use this one. i have been able to put up this code on the webserver and it shows me the add,submit and reset fields. now how do i actually add my fields like text input, select combo box, etc and where exactly and also, how do i give it an id so that it can be sent to the next form and processed with mysql. i would appreciate help on this.
January 15, 2010 at 8:16 pm
I solved problem with IE incompability! 🙂 Its just about typing mistakes in code and closing tags 😉 I have closed input tags, add label closing tag, repair paragraph closing tag, and everything is working now. Yeaaaah! 🙂
June 1, 2010 at 11:40 am
Yeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeees!
YOU DO THE RIGHT!
February 14, 2010 at 4:52 am
Thanks a ton, i think this is all what i was searching for last half hrs..
March 4, 2010 at 6:47 am
Hi, I’m moving to a new blog and planning to publish an updated version of this post. Feel free to contact me there http://www.stampede-design.com/blog
Thanks
April 1, 2010 at 4:54 pm
Hi Add as new element works but remove not worksAnd I wish to know to ask the user what should be the name of the new textfield and it should be displayed there and any ideas how to handle these new text fields enter into mysql DB using jsp or servlets
hope i will get a solution fast
regards’
kumar
hyderabad
india
April 17, 2010 at 10:28 pm
Hi, thank’s brother, your post help me in my project.
I’m from Brazil.
in Portuguese – Brazilian:
Muito obrigado
May 18, 2010 at 8:12 am
Thanks for the awesome post.
July 1, 2010 at 8:44 pm
Hi the code is very good, i just have a little problem. When i’m generating more fields as an array, my first index is nothing, then it starts with 1. So i can’t get the data which is on the 0 position.
Can somebody help me!
Thx
July 1, 2010 at 8:56 pm
I got the problem, my code was bad. 😛
July 28, 2010 at 10:43 pm
Wonderful post.. good examples of jquery functions..
Thanks
August 6, 2010 at 6:53 pm
Great…………
September 2, 2010 at 12:03 pm
waa, saya dah cuba buat
memang gempak
terima kasih
October 4, 2010 at 12:15 am
joshribakoff… I thought that too but your assertion doesn’t hold up in this case, id must be a string because id + 1 performs a string concatenation so you get Field1, Field11, Field111 instead of Field 1, Field2, Field3.
The -1 must be sufficient to force it to count as a number, then add instead of concatenate.
I am sure there is a more elegant solution than this but I am not a Javascript expert.
October 12, 2010 at 7:36 am
Hi, how could I use this “Add/remove form elements” in the same page more than one time?
I would have to repeat the javascript code?
November 18, 2010 at 12:25 am
very useful
thanks
December 31, 2010 at 6:05 pm
Hello Friends,
I am trying to apply your code in my smarty application but after submit posting data I could not get addition form elements. I think smarty dose not recognize add more elements.
Please help me.
Thanks
January 18, 2011 at 10:17 am
Thank you so much for taking the time to put this demo out there and keeping it out here. 4 years have passed and you have helped yet another person. 🙂
January 28, 2011 at 2:10 pm
Actually, it’s good, my suggestion is that you should demo your ‘Add/remove form elements using jQuery’ on this site after giving and explaining the code. That’s it! Learning from realistic!
February 9, 2011 at 8:17 pm
the link is dead
February 9, 2011 at 8:18 pm
i ment demo link
March 28, 2011 at 1:04 pm
iNGPQu http://guI2vS0jBrn7M3Apkdef81n.com
August 24, 2011 at 1:03 pm
gqAw6s http://wnbUj5n0mXqpcvm27Hms.biz
September 9, 2011 at 6:36 pm
trt
December 14, 2011 at 5:48 pm
Very useful, thanks. I adjusted it slightly by adding a variable to count how many inputs were originally on the page, and then made it only remove if i > that. Otherwise all your other input fields start to disappear!
December 19, 2011 at 2:14 pm
very good script but would be better if it would validate the fields as well and also explain how to retrieve those textbox values from server side language like php.
i’ve found a tutorial at
http://www.pradipchitrakar.com.np/blog/dynamically-add-remove-textfield.html
it explains how to dynamically add, remove and validate text field in jquery and fetch the values of textbox in php and jsp/servlet