jQuery Dynamic Form
Posted on : 28-11-2009 | By : Derek | In : Javascript, Posts, jQuery
Tags: Javascript, jQuery, Usability
4
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.