Dynamically create a HTML form with Javascript

Dynamically create a HTML form with Javascript

You could try something like this:

The HTML part:

<html>
 <head></head>
 <body>

 <body>
</html>

The javascript:

<script>
//create a form
var f = document.createElement(form);
f.setAttribute(method,post);
f.setAttribute(action,submit.php);

//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
f.appendChild(i);
f.appendChild(c);
f.appendChild(s);

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

</script>

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.