Hi Friends,
Thanks for using my multifield extender plugin and your great response. I received many emails reporting bugs and asking support for edit mode. I implemented it few days ago and publishing new version now.
Many bugs are fixed with this plugin and you can use this plugin in edit forms with very little code at server side.
This plugin is not limited to inputs but you can even add support to add multiple files and upload them to server. I’ll upload demo of multiple file uploading using this plugin with asp.net soon.
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
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;
}
Go to live demo page
There are more details on demo page, how to setup and customize to make it fit in your requirements.
Download Plugin:
jquery.multiFieldExtender-2.0.min.js (Minified) ~ 5Kb
jquery.multiFieldExtender-2.0.packed.js (Packed) ~ 4Kb
jquery.multiFieldExtender-2.0.js (Uncompressed) ~ 9Kb
Download Sample files:
Please let me know if any problem or any help required. Provide your feedback in comments or contact me on GMail.
Thanks,
Vipul Limbachiya
[...] This plugin is updated, switch to newer version http://vipullimbachiya.com/?p=349 [...]
Hello friend,
thanks for the plugin, it works fine but it not storing value in my database, i am getting only single value not getting clone values…
i am using jsp and oracle.
Please help.
Thank you.
Nice script, thanks.
In php, the clones are submitted as varname$0, varname$1, etc. instead of varname_0, varname_1 etc
gives some problems
$(this).attr(“name”,strname+”$”+fieldCount);
to
$(this).attr(“name”,strname+”_”+fieldCount);
Hi Vipul,
Thanks for this plugin, it works great! I’m new to jquery and am wondering if you could guide me on how to pass the cloned varnames into a array to php via $_POST.
Also, is it possible to pass the total number of items to the php page as well?
Thanks in advance!
Great plugin.
@Ced: this is what I did:
1. I commented out line #88 in the plugin, the one that appends the $ + increment to the field name.
2. In my original set of fields I added [] to the end of the name attribute like this name=”field_name[]” which puts the values into an array for you in PHP.
3. In PHP i can simply do a foreach on $_POST['field_name'] and extract the values.
Hope this helps.
Hi,
does it work with nested multiple fields?
I can add a nested set of inputs, but when I click on its father’s “Add more”, the child’s “Add more” link disappear…
thanks in advance
Hi Vipul,
first of all thanks for this plugin.. can u please explain how to use radio buttons in this form..
Thanks,
Hi Vipul,
What an awesome plugin! Thanks!
Just a quick question – when adding data using the data array, is there a way that the last shown element is the last element in the array and not empty elements?
Thanks again.
Roy
Hello, this plugin is exactly what I was looking for. Congratulations!
One question: Let’s say I have filled out a line of form data and clicked “Add more”, could it be -optionally – possible to also copy the first line’s data to the newly appended line?
I am using this plugin to allow me to insert batch “events” into DB. Therefore this “data cloning” feature could be very useful, in case there are events with similar information (like monthly events in a venue) which is why I wrote the batch script.
Thanks in advance.
Hi, and thanks for your great plugin !
I’d like to add a little more, ans the user how many input to add.
I just don’t know how to do that, any idea ?
There will be an input text where the user tell the number of cloning element he want. (by example : 5)
On click it clone 5 times the elements.
Thanks for your help,
Regards,
Altivec.
I want to reposition the Remove link o the right of my form fields. How do I accomplish this. I’ve hunted through the css files and couldn’t locate where the positioning is happening.
Hi Joel, start to change style
a {
color: black;
}
to
a {
color: black;display:block;float:right;
}
and than some play with css
Cannondale peccant darky medium relating to us who are more conditions tauten that routinization a harmonization is all as to the paramount restrictions towards synthesize encompassing exercise. http://dixune.com
Hi there, great plugin, I just set it up for me and it works great, many thanks. I only have one question… kind of hard to explain but i`ll try to. When I use the data options and i set up the values, there is always an empty clone at the end. Is there a way to display only the clones with entered values without the empty one? I`ll appreciate your help! Thanks in advance!
Hello Sir,
i want to ask one thing. actually when i used this plugin at add time then i have named the variables as array like: sizes[],prices[],stock[]. functionality add time working fine but when i want to edit sizes[],prices[],stock[], then i m not able to do anything. predefined values are not comes in sizes[],prices[] and stock[]. i dont know what to do in this example mode, which you have provided to us.
$(“#itemDetailsEdit”).EnableMultiField({
data:[{
itemName : "Test", // All these properties needed to be set as "recname" attribute of each input you want to set value to
itemGaylords : "2",
itemDesc : "Test Desc",
itemDrpPackagingTypes : "4"
}]
});
Would u pls help me i shall be very thankful to you. please reply me asap.
Thanks,
Vanita Saini
Hello,
Thanks for the wonderful plugin.
I was just wondering how can we focus on the first field of the new cloned fieldset.
I am not a JavaScript guy but i think it can be done by a similar code below.
$(‘.addMoreFields’).click(function() {
$(‘itemNameEdit_0′).focus();
});
I tried it and it works only on the first fieldset.
Just not sure how to replace the “itemNameEdit_0″ with a dynamic value.
Ok so it wasn’t that difficult i guess.
Here is the solution.
We just need to modify the function :
function handleAdd(elem)
I will just add the step
Open jquery.multiFieldExtender-2.0.js
After Line 74
( i.e
var fieldCount = parseInt($(self).attr(“FieldCount”), 10);
)
Add this variable
// Focus Field Variable
var fieldFocus = “#itemName_” + fieldCount;
// End New Code
And Before Line 148
( i.e return false; )
Add
// Focus Field Trigger
$(fieldFocus).focus();
// End New Code
Easy right
Noobie question & this is probably a similar question to comment #4 but how to I pass the info from this excellent plugin to an email address for example?
Thanks!
Hi Vipul
Thanks for the wonderful plug in , currently i am implementing these plug in the project i working on . I had some doubts need to clarify, i need to do client side validation on my clonned objects too , but i am not able to do that right now since we dont have those elements on the page source , Unable to validate jquery object on the clonned object. please let me know the way to achieve this. Please help me out to solve this issue.
if any one wants the id’s to start from 0 and like an array add this to
find line 80:
var strid = $(this).attr(“id”)
change to:
var strid = $(this).attr(“id”).replace(‘_0′, ”);
This way your first element can have and id=”yourElement_0″
and when it’s cloned it will be id=”yourElement_1″, id=”yourElement_2″ etc.
This way you can cross reference which name=”yourElement[]” with the actual ID of the element.
This is especially helpful if you are validating in PHP and JS.
For this to work you must also do
$(this).attr(“name”,strname+”$”+fieldCount);
to
$(this).attr(“name”,strname+”_”+fieldCount);
as mentioned above by FrankyDS.
if any one wants the id’s to start from 0 and like an array add this to
find line 80:
var strid = $(this).attr(“id”)
change to:
var strid = $(this).attr(“id”).replace(‘_0′, ”);
This way your first element can have and id=”yourElement_0″
and when it’s cloned it will be id=”yourElement_1″, id=”yourElement_2″ etc.
This way you can cross reference which name=”yourElement[]” with the actual ID of the element.
This is especially helpful if you are validating in PHP and JS.
For this to work you must also do
$(this).attr(“name”,strname+”$”+fieldCount);
to
$(this).attr(“name”,strname+”_”+fieldCount);
as mentioned above by FrankyDS.
if any one wants the id’s to start from 0 and like an array add this to
find line 80:
var strid = $(this).attr(“id”)
change to:
var strid = $(this).attr(“id”).replace(‘_0′, ”);
This way your first element can have and id=”yourElement_0″
and when it’s cloned it will be id=”yourElement_1″, id=”yourElement_2″ etc.
This way you can cross reference which name=”yourElement[]” with the actual ID of the element.
This is especially helpful if you are validating in PHP and JS.
For this to work you must also do
$(this).attr(“name”,strname+”$”+fieldCount);
to:
$(this).attr(“name”,strname+”_”+fieldCount);
as mentioned above by FrankyDS.
How can we this clone in edit view ?
Anyone have any example of how to use jquery.validate () with these duplicated fields ..its working great but FirstName, FirstName_0, FirstName_1 .etc need to be required not just FirstName
$(“#Form_EventBookingForm”).validate({
rules: {
//FirstName: “required”
FirstName: {
required:true
},
LastName: {
required:true
},//rules
messages:{
//FirstName: “Please enter your firstname”
FirstName: {
required: “The First name is required”
},
LastName: {
required: “The Surname is required oooo”
}
}//messages
});//form validate
This is just what I wanted.
But I can’t figure out how to make it work with php.
I want to exectue it and get the data printet out.
But the item name is itemName for the first item, then itemName$0 then itemName$1 etc. I just can’t figure out how to print this out using php.
Could anybody help me?
I’ve realized that using the packed version conflicts with ckeditor
just compressed the jquery.multiFieldExtender-2.0.js 9Kb version with jscompress.com (not spam intention) and worked fine
Thanks!
hi.. when the page get re- load the page was reset. i need that multiple field is stable after reload. reply
Hey,
Just check second example on demo page, you need to provide data after page re-loads from server, like on postback or any other method which reloads page.
http://vipullimbachiya.com/jQuery/Plugins/MultiField/2/index.htm#example2
You can have all fields generated based on provided data.
Thanks,
Vipul
hai
how to implement multifield extender for cascading dropdown list?
The plugin has addEventCallback event, which can be used to bind any required events or plugins to duplicated item.
Check example #3 : http://vipullimbachiya.com/jQuery/Plugins/MultiField/2/index.htm#example3
Thank you for wonderful plugin.
I wonder if I can use it with standard asp.net web controls (asp:textbook, drop down, etc.) in a web form. In your examples, you use the plugin with regular HTML. Could you please give me some hints how to use it with asp.net web form.
Thanks again!
After all asp.net web controls are HTML inputs at the end, you can use code for C# written in post to loop through all submitted form elements at server and figure out the value of the duplicate control you want to use.
Ie. if I have added textbox named txtName on form, with this plugin you’re duplicating it for say 3 times, it will have id/name like txtName_1, _2, _3, so to get values of them on server, you need to loop through form inputs submitted, figure out form element in loop using index of “txtName_”, create an array of duplicate inputs and store or use as you want at server.
There is a code written in post, that might help.