Dynamic HTML Form Generation via GUI

I'm looking to create a system where users can create a survey. Pretty much I'm trying to make a form that makes forms. It needs to be fairly extensive and cover inputs, selects, textareas, and other form elements.

Right now, I'm using a templating engine with jQuery, but it's getting really messy and I feel that there's a better way to accomplish this.

The user needs to be able to add, edit, and remove questions & their options (answers). They also need to be able to specify question type (multiple choice, range slider, short answer, etc) and it needs to support image upload.

I've scoured Google but haven't found what I'm looking for. Is there an existing js library or framework I could use to easily add & remove elements in DOM while keeping track of element type and hierarchy? Or perhaps an API I could use? I don't feel like reinventing t开发者_StackOverflowhe wheel on this one.

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

Last time I needed this, i used the jQuery Form Builder plugin. It even comes with its own DB stuff for storing the forms and its own HTML renderer for output. Yummy!

I think you may end up inventing your own solution, but it may not be re-inventing.

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

By doing this route it should simplify your design, while making it as flexible as you desire.