jQuery Dynamic Form

Update march, 2011 : I recently received tons of questions in the comments. I’m sorry to say that I’m currently not able to provide support for jQuery Dynamic Form plugin. Nevertheless, if you find bugs, I invite you to send patches to me. I’ll test them and possibly update the plugin.

jQuery Dynamic Form is a plugin for jQuery. It gives the ability to dynamically add fields based on HTML template. Update version 1.0 is out and has been uploaded on Google Code. It includes two long awaited features : nested fields duplication, and data injection. I’ll update examples when I have time, however you already have a working example package in the zip, go download it ! http://code.google.com/p/jquery-dynamic-form/downloads/list

Links

Code

All #something are references to the node element ids in the HTML dource code.
 
$(document).ready(function(){
$("#duplicate").dynamicForm("#plus", "#minus", {limit:5});
$("#duplicate2").dynamicForm("#plus2", "#minus2", {limit:4});
$("#duplicate3").dynamicForm("#plus3", "#minus3",
{
limit:3,
createColor: 'yellow',
removeColor: 'red'
}
);
});
NB : The color effects of the third demo requires the jQuery UI Highlight Effect Module

Demo

#duplicate + and - are outside the duplicated node

[-] [+]
#duplicate2 + and - are inside the duplicated node

[-] [+]

#duplicate3 Multiple fields duplication
Address
[-] [+]
This entry was posted on Thursday, June 18th, 2009 at 10:52 am and is filed under . You can follow any comments to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

122 comments

  1. Comment 3480

    Hi St├ęphane, I’ve a question about re populating the form.
    I’m using your DynamicForm plugin to make kind of a multi-filter for retrieve email contacts from mysql, then when I like the results brought by the filter I save this filter in database. The filter is a series of dropdowns with Country, State, Gender, etc.
    Now I’ve to edit the filter and I need to populate those filters with the data saved on DB, let’s say I saved 2 filters: US, Florida, Male, and US, Miami, Female.
    Now I need that those 2 filters appear on page for edit, how can I achive this??
    I’ve been trying with the data option, like this:
    var data =
    dynForm = $(‘#filter’).dynamicForm(‘#add’,'#rem’,{limit:5});
    dynForm.inject(data);

    But I hadn’t luck with this… Is there another way??