Featured Posts

jQuery Expand/Collapse All Menu PluginjQuery Expand/Collapse All Menu Plugin Another take on an expand/collapse style navigation. For our requirements, the navigation was a template and needed to be n-levels deep to take into account any possible...

Readmore

jQuery Dynamic FormjQuery Dynamic Form 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...

Readmore

A PHP Pagination FunctionA PHP Pagination Function Here's a PHP function "getPaginationHtml()" that builds an item-pagination type HTML DIV based on parameters only, i.e. no database recordset needed. Note the user of a second...

Readmore

A PHP Calendar Class Based on Zend_DateA PHP Calendar Class Based on Zend_Date A recent project required an event calendar in both a mini and full sized format. The project was based on Zend Framework, a highly scalable and feature-rich PHP MVC framework....

Readmore

Analyzing the Impact of Web Page Textual Data Representation on the  Accuracy of Selected Supervised Learning ModelsAnalyzing the Impact of Web Page Textual Data Representation... We looked at the effectiveness of supervised learning models in solving the real-world problem of web page classification. We attempted to maximize the performance of...

Readmore

Arietis Software Innovations Rss

jQuery Dynamic Form

Posted on : 28-11-2009 | By : Derek | In : Javascript, Posts, jQuery

Tags: , ,

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

VN:F [1.9.3_1094]
Rating: 3.9/5 (4 votes cast)