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?

So when I disable javascript I get a blank page from your website. Great idea. Btw google would then also see nothing — jitter
– jitter, Commented Oct 31, 2009 at 9:53
It's an internal app. It's purely an interface for a java app and it's nice to not have reloads. — Verhogen
– Verhogen, Commented Nov 5, 2009 at 10:35

LobsterZorg · Accepted Answer · 2009-10-31 10:10:45Z

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

answered Oct 31, 2009 at 10:10

LobsterZorg

363 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Verhogen Over a year ago

how would you do it in jQuery?

LobsterZorg Over a year ago

var form = $('<form>').attr('id', 'formId').attr('class', 'formClass'); var btn = $('<input>').attr('type', 'button'); form.append(btn); Hope it helps. Cumps.

AliBZ · Accepted Answer · 2009-10-31 10:34:03Z

0

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 ;)

answered Oct 31, 2009 at 10:34

AliBZ

4,09912 gold badges48 silver badges68 bronze badges

Comments

Mic · Accepted Answer · 2009-10-31 15:34:26Z

0

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

answered Oct 31, 2009 at 15:34

Mic

25.2k9 gold badges62 silver badges71 bronze badges

Collectives™ on Stack Overflow

Generating HTML Forms With Javascript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related