Hi Friends,
Few days back I came across a requirement in one of my projects to add contact field as many time as user wants. To add this at serverside it was not a tough task but why to add load on server and add clumsy code when we can easily add ‘em via javascript.
Introduction:
What’s it : a jQuery plugin to add multiple fields (cloned elements) on-the-fly on a web page with great custom extensions – asp.net, php or any server side language
To use this plugin you’ll first need to download jquery from http://www.jquery.com attach it to your page and attach this plugin script as well.
<script type=”text/javascript” src=”js/jquery-1.3.2.min.js”></script>
<script type=”text/javascript” src=”js/jquery.multiFieldExtender.js”></script>
Now for any field, panel, div, paragraph, image any element on page you want to have a button/link which says “add more” (customizable) and on click of it copy the element and add under current element.
Why?
That seems to be an easy task for jQuery, you may guess “clone” from jQuery does the trick why we need this plugin?
I’ll add here, we have lots of options in this plugin to customize. They are listed below:
- linkText : Text of “add more” link
- linkClass : CSS Class of “add more” link
- enableRemove : Set true/false if want to enable/disable
- removeLinkText : Text of “remove” link
- removeLinkClass : CSS Class of “remove” link
- confirmOnRemove : Set true/false if want to enable/disable
- confirmationMsgOnRemove : The message to show for confirmation on remove
- addEventCallback : this event will be called after adding an element
- removeEventCallback : this event will be called after removing an element
- maxItemsAllowedToAdd : Count of items max allowed to be added
- maxItemReachedCallback : this event will be called when max itmes allowed reached
The default options are:
- linkText: ‘add more’,
- linkClass: ‘addMoreFields’,
- enableRemove: true,
- removeLinkText: ‘remove’,
- removeLinkClass: ‘removeFields’,
- confirmOnRemove: true,
- confirmationMsgOnRemove: ‘Are you sure you wish to remove selected field(s)?’,
- addEventCallback: null,
- removeEventCallback: null,
- maxItemsAllowedToAdd: null,
- maxItemReachedCallback: null
What javascript code exactly required to enable this plugin?
<script type=”text/javascript”>
$(document).ready(function () {
$(“.addressDetails”).EnableMultiField();
});
</script>
This few lines of code shown above will add this functionality on all elements which have a class “addressDetails”.
Check out demo page for more information.
What will happen at server side and how to get this data?
The plugin modifies IDs and names of all elements it has cloned and adds its count prefixing an underscore with the main element that has copied first.
eg. “txtName” is an input box and was cloned by this plugin, new input will be called as “txtName_1″ automatically.
asp.net/c# code:
Below code will give you an array of all entries made on page including main input element, you can use for any kind of input element not only textbox.
private ArrayList getTimesArray(string textBoxName)
{
ArrayList arrValues = new ArrayList();
for (int i = 0; i < Request.Form.AllKeys.Length; i++)
{
if (Request.Form.Keys[i].ToString().IndexOf(textBoxName) >= 0)
{
arrValues.Add(Request.Form[Request.Form.Keys[i].ToString()]);
}
}
return arrValues;
}
Live demo:
(Click on the links below, will be opened in new browser tab/window)
There are more details on demo page, how to setup and customize to make it fit in your requirements.


Download Plugin:
jquery.multiFieldExtender.min.js (Minified) ~ 4Kb
jquery.multiFieldExtender.packed.js (Packed) ~ 3Kb
jquery.multiFieldExtender.js (Uncompressed) ~ 7Kb
Please let me know if any problem or any help required. Provide your feedback in comments or contact me on GMail.
Thanks,
Vipul Limbachiya
VN:F [1.9.3_1094]
Rating: 4.8/5 (4 votes cast)
VN:F [1.9.3_1094]
Rating: +2 (from 2 votes)