What i have in here is a very simple add and remove textfield element. One has to click on the Add link and another textfield will be added. You can also use these if you need to add another element like a button or a dropdownlist at the same time remove it dynamically.
So first thing we need to have these files to begin:
- the latest jQuery [compressed, 19kB]
- jQuery Plugin: highlightFade [8kB] this is optional just to give a little highlight effect when adding elements)
Now we gonna import both JS in the <head> of my html doc.
Then, create a table with a <div> nested inside the <td> . 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.
<table>
<tr>
<td/>
<td colspan="3">
Add
</td>
</tr>
<tr>
<td> Blog(s): </td>
<td>
//target div were blog dynamic fields added
</td>
</tr>
<tr>
<td/>
<td colspan="3">
Add
</td>
</tr>
<tr>
<td> Social Network(s): </td>
<td>
//target div were social dynamic fields added
</td>
</tr>
</table>
Next, the JS code for adding the form. The form element being added is wrapped inside a <p> with an id corresponding each row. Actually we can use <td> and create a table inside a <div>, but right now we just stick on the <p>.
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. I had an IF statment to check if that field is for the blog or for the social network.
function addFormField(type) {
var id = document.getElementById("id").value;
if (type == "blog") {
$("#divTxt").append("");
}
else {
$("#divSocial").append("");
}
$("#brow" + id).highlightFade({
speed: 1000
});
$("#srow" + id).highlightFade({
speed: 1000
});
id = (id-1) + 2;
document.getElementById("id").value = id;
}
Finally, the JS code for removing form elements. Basically, what this function does is remove the
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();
}
-87
Read More...
