Dynamically generate HTML forms through a graphical interface

Question

I am looking to create a system in which users can create a survey. To a large extent, I'm trying to create a form that makes forms. It should be quite extensive and cover input s, select s, textarea s and other form elements.

Right now I am using the template engine with jQuery, but it is getting very dirty and I feel that there is a better way to accomplish this.

The user should be able to add, edit and delete questions and their options (answers). They should also be able to ask the type of question (multiple choice, range slider, short answer, etc.), and it needs to support image loading.

I searched Google, but did not find what I was looking for. Is there an existing js library or framework that I could use to easily add and remove elements in the DOM, tracking element type and hierarchy? Or maybe an API that I could use? I do not want to reinvent the wheel on this.

Answer 1

Last time I needed it, I used the jQuery Form Builder plugin. It even has its own database material for storing forms and its own HTML rendering for output. Yummy!

Answer 2

What about https://github.com/powmedia/backbone-forms ?

Answer 3

I think you can eventually invent your own solution, but it cannot be reinvented.

I think the best solution would be to make a Domain Specific Language (DSL), and in Javascript you can see some slides at this address: http://ajaxian.com/archives/metaprogramming-dsl-javascript-presentation . Another nice blog: http://www.mailsend-online.com/blog/a-dsl-in-javascript.html

Following this route, it should simplify your design, making it as flexible as you want.