View Full Version : Using Javascript to create forms dynamically

03-08-2011, 11:27 AM
I currently have a page which, when the user clicks a button creates a new row displaying a form. I also have other forms on this page however so I was wondering if anyone knew how to close a form using javascript? Thanks for any help. My code to create the table row and form are below...

myform = document.createElement("form");
myform.method = "post";
myform.action = "editdetails.php";
myform.id = "editemail";
myform.name = "editemail";

var a=document.getElementById('editdetailstable').insertRow(2);
var b=document.getElementById('editdetailstable').insertRow(3);

var x=a.insertCell(0);
x.innerHTML="New Email:  ";
x.align = "right";

var y=a.insertCell(1);
y.innerHTML="<input type='text' name='email' id='email' />";

var z=b.insertCell(0);
z.innerHTML="<input type='button' value='Change' />"
z.colSpan = "2";
z.align = "center";

03-08-2011, 11:48 AM
I'm assuming that you'd assign an ID to the form, and then, in CSS, put display:none as a rule for that form. And then create a Javascript function to toggle the display:none on and off. That is how I think it would be done. I'm sure a more experienced JavaScripter has a better way of doing it, though. :o

03-08-2011, 12:25 PM
I didn't actually think of doing that, will give it a go, thanks

03-08-2011, 12:30 PM
Let us know how it goes, I'm just as interested in seeing what happens. :o

03-08-2011, 12:45 PM
I tried but couldn't get it working properly so instead just created the opening of the form tag above where the row is being inserted and then closed it just before the next form. Seems to work ok.

Philip M
03-08-2011, 12:46 PM
Hashim1 is entirely correct.

Initially hide your form:

<div id = "form1" style="display:none">
// contents of the form

and use script to show it with

or hide it again with

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

03-08-2011, 01:24 PM
Hashim1 is entirely correct.

I am? :eek:

Well, that's not something that happens often, especially when it comes to Javascript. :D