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 