Dynamically create a HTML form with Javascript

Dynamically create a HTML form with Javascript

You could try something like this:

The HTML part:



The javascript:

//create a form
var f = document.createElement(form);

//create input element
var i = document.createElement(input);
i.type = text;
i.name = user_name;
i.id = user_name1;

//create a checkbox
var c = document.createElement(input);
c.type = checkbox;
c.id = checkbox1;
c.name = check1;

//create a button
var s = document.createElement(input);
s.type = submit;
s.value = Submit;

// add all elements to the form

// add the form inside the body
$(body).append(f);   //using jQuery or
document.getElementsByTagName(body)[0].appendChild(f); //pure javascript


This way you can create as many elements as you want dynamically.

I think posting a complete solution would be too much, but check out jQuery for this.
I give you a hint, jQuerys .append() could be very useful for you 🙂

Dynamically create a HTML form with Javascript

My idea is that you can use the dform jquery plugin from github to create forms directly by giving input as json data.

Leave a Reply

Your email address will not be published.