How to create a form with textfield when a button is Click

Question

I have a form with 3 textfields:

  <form id="form1" name="form1"action="">
  <td><input name="name" type="text" id="name" /></td>
  <td><input name="address" type="text" id="address"  /></td>
  <td><input name="age" type="text" id="age" /></td>

   ///Add Button here
  </form>

How can I generate the same form when an add form button is clicked?

Answer 1

You can do that server side by making the Add button trigger server side code that will output another form, but this means reloading the whole page.

To do that without reloading you can use pure client side code, using JavaScript .cloneNode() method:

<button type="button" id="btnAddForm" onclick="CloneForm('formNameHere');">Add</button>

And the JavaScript:

function CloneForm(formName) {
    var formCount = document.forms.length;
    var oForm = document.forms[formName];
    var clone = oForm.cloneNode(true);
    clone.name += "_" + formCount;
    document.body.appendChild(clone);
}​

(Name of the form must be changed otherwise we lose access to the original form)

Live test case .

Answer 2

javascript :

function a()
{
document.write("<form id='form1' name='form1'action=''>");
document.write(" <td><input name='name' type='text' id='name'/></td>");
 document.write("<td><input name='address' type='text' id='address'/></td>");

document.write("");

}

Html:

<input type="button" value="form" onclick="a();">

I think this is what ur lookin for. If not please explain clearly. I will try my best to help you out.