Generating HTML Forms With Javascript

Question

My app uses javascript to generate all the HTML for my website. The index.html basically just contains

<div id="menu"></div><div id="content/><div id="content2/>

And the javascript replaces the divs. I find myself doing a lot of repetitive tasks when I need to create a form.

var html = "<form id="form1"> ... </form>";

Is there a good framework to generate HTML forms so that you could do something like

generateForm(<formId>, [{name: "field1", type: button}, {name: "field2", type: input}]);

Or something similar?

Answer 1

You could simplify the generation by using a framework like MooTools, jQuery, etc...

To generate a form you would have something like this (in MooTools):

var form = new Element('form', { 'id' : 'myFormId', 'class' : 'myFormClass', ... });
var btn = new Element('input', { 'type' : 'button' , ... })
form.inject(btn);

You could encapsulate this logic in some methods for centralizing the code generation

Answer 2

I wrote a project that i created table tr and td using javascript :

objTR = document.createElement("TR");
objTR.setAttribute("id", "factor_row_" + id);

objTD = document.createElement("TD");
objDIV = document.createElement("DIV");
objDIV.setAttribute("id", "title_" + id);
objDIV.innerHTML = title;
objTD.appendChild(objDIV);
objTR.appendChild(objTD);

I think appendChild will work for you. You must just create your form element and it's attributes and then append it to it's parent. Hope it helps you ;)

Answer 3

You can try as well a templating engine like PURE
Define the HTML's and then you render them based on a JSON data.