Scenario:
Building web forms can be tricky when a form calls for a variable number of fields. A real-world example might be a sports team with an n number of players. When capturing the team player data via a web form, the typical way might be to create the form with one empty player field for each player on the team. You would obviously need to know the maximum number of players per team. Worse, you would also need to deal with non-existant form data on the server side.
Solution:
A more dynamic way is to show just the single player field with a button to add extra player fields for the n number of players on the team.
To support this solution, I’ve written a jQuery plugin that will duplicate, on-demand, any field or group of fields set within a <FIELDSET> tag. You can use the plugin to create one or more dynamic fields per form or in a group of forms.
Demo:
Click here for a demo of a dynamic form powered by jQuery.
*It’s a jQuery plugin so it can be chained to other jQuery events, effects or plugins.
Download/Contribute:
Project source here: jquery dynamic form project hosting
Hi,
Great script, I wan to know if it´s posible validate the new inputs generated.
Thanks
@Gerald
If you want to use a jquery validation plugin that checks fields before they’re submitted, you’ll need to wire the dynamicForm plugin to call the validate() function after each new fieldset is inserted. You could do this through a callback function.
If you want to check fields after they’ve been submitted, you’ll need to run through all the submitted post variables; check if they’re valid; and then either show the validation errors and the form again, or process the data.
In your script the delete button does not delete the right fieldset!
Try
var parent = $(this).parent(‘fieldset’);
insted of
var parent = addButtonObj.prev(‘fieldset’);
@Rico. Thanks for pointing that out. I’ve updated the script.
Can you please supply the php(server side) code example beacuse i can’t get it to list all values for let’s say players names. thank you.
@Cindreta: The PHP server side script just loops through the $_POST variables and outputs the key/value pairs, keeping in mind that radio groups/checkboxes will be passed as arrays. I’ve updated the demo to include the server side code. Click here
thank you very much this helped me a lot : ) i have one more question if it’s not too muc trouble? does this work with “file” type inputs? i would like to use it as image uploader.
i’ll add some more info on what i want, now i managed to make it work with normal input types(text,textarea) and so on, but with the php code you gave as an example it does not echo out the value of an input type “file”. so when i “upload” an image it doesn’t eavean show it on the post page. can you provide a bit info on that.
@Cindreta: File(Image) uploads are posted to the server in a different format than other form inputs.
First you need to set your form enctype to “multipart/form-data”. Second, you’ll need to query the $_FILES array for uploaded file info. You can find more info on that here: http://www.tizag.com/phpT/fileupload.php