Seeking advice on js library for building a dynamic form generator.

Question

Hi-

Today, I'm building a little form generator for my firm. It would ask for someone to Add a Field, choose the field type (text field, checkbox, etc), name it and then add another and another if they want. I'd like to achieve this without having to go server side for each element. In other words, I want to take this opportunity to build something slick and learn from the experience about new ways to do things in the UI.

So I'd love to use jQuery or some other js library to dynamically add the form elements to be held in an array and have the list of things being added by the user display as they add them. Then when they hit confirm, the server side code can parse the array and drop it all into the database for later reference.

Does anyone have any advice as to what lib and functionality I could use to achieve this? Are there any examples or demos out there I can reference?

Also, are there sites out there (besides this one of course) where folks discuss specific design issues and decisions like my question here?

Thank you.

Answer 1

This might be of some use to you.

Answer 2

Serialisation is your friend in this kind of thing, both on client side, and server side. I recently completed a task similar to this, without using jquery UI - my approach was to store a simple index, type and label in a json object, which was then submitted to the server for storage as a serialised object.

Naturally, once you have this data, making a cached version for better performance is a breeze, and you avoid having to make a massive relational database structure which can handle this kind of dynamic openness.

Hope that helps, let me know if you'd like some code examples too.

e: I found the jquery json plugin invaluable for this.