how can I go about creating a form with javascript?
I have NO idea on how to proceed, I have been googling my face off but there is nothing definitive that can show me how to dynamically create forms with it.
Thanx in advance!
8 Answers
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.
2 Comments
Dilruk
In case if the DOM is not loaded at the time of script execution, you may get an error - In my case I got "Cannot read property 'appendChild' of undefined". So better to enclose the javascript code inside window-onload block. E.g., <script> window.onload = function(){ // javascript code here } </script>
Quentin
@raj — If you have a question then ask a question. Don't edit your question into someone else's answer!
I think posting a complete solution would be too much, but check out jQuery for this. I give you a hint, jQuery's .append() could be very useful for you :)
Comments
My idea is that you can use the dform jquery plugin from github to create forms directly by giving input as json data.
Comments
Yes, you can create any amount of html including forms by running JavaScript,
Perhaps:
<html>
<body>
<h1>My Form</h1>
<div id="formcontent">
</div>
</body>
</html>
Our JavaScript might look like:
var el = document.createElement("input");
el.type = "text";
el.name = "myformvar";
var cont = document.getElementById("formcontent")
cont.appendChild(el);
1 Comment
Alex Rindone
This is riddled with errors...your variable names don't match and you capitalized CreateElement and GetElementById
use document.write or if you want more flexibility use jquery
Comments
Just use the standard DOM API (document.createElement(), see these docs for an example) to create all the elements of the form.
Comments
TRY THIS...
myWin = open("", "displayWindow", "width=800,height=500,status=yes,toolbar=yes,menubar=yes");
myWin.document.open();
myWin.document.write("<html><head><title>V E N U S </title>");
myWin.document.write("<style type='text/css'>.hdr{.......}</style>");
myWin.document.write("</head><body onload='window.print()'>");
myWin.document.write("<div class='hdr'>");
myWin.document.write("what ever you want");
.
.
myWin.document.write("</div>");
myWin.document.write("</body></html>");
myWin.document.close();
that's will create a form with DIV inside it...
Comments
My recommendation would be to get the underscore.js library and use its template function to create your forms. (If underscore is too large for you, the template function can stand on its own too).
createElementor jQuery. Can you use jQuery?