Interact With a Form

**locbtran** · 10-26-2012, 02:20 AM

When I click on an "Add" button, it would create a new form with the "First Name", "Last Name" field and 2 textboxes, just like the original.
So if I click on the "Add" button 5 times, it would create 5 new forms for me. Same idea applies for the "Delete" button.

Here's my code:

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
   <FORM NAME="myForm">
   First Name: <input type="text" name="1stName" ><br />
   Last Name: <input type="text" name="lastName" ><br /><br />
   <input id="bu_add" type="button" value="Add" >
   <input id="bu_delete" type="button" value="Delete">
   </FORM>
</body>
</html>

If you can help me out, I would greatly appreciated. Or if you know what this is call, I can just look it up.

tks

**jscheuer1** · 10-26-2012, 07:00 AM

Do you want the add and delete buttons duplicated as well or not?

Anyways, in about simplest terms (assuming we're not duplicating the buttons):

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<script type="text/javascript">
function addform(){
	var newform = document.forms[0].cloneNode(true);
	newform.name = 'myForm' + document.forms.length;
	newform.removeChild(newform.elements[2]);
	newform.removeChild(newform.elements[2]);
	document.body.appendChild(newform);
}
function removeform(){
	var formnumber = document.forms.length - 1;
	if(formnumber){
		document.body.removeChild(document.forms[formnumber]);
	}
}
</script>
</head>
<body>
   <FORM NAME="myForm">
   First Name: <input type="text" name="1stName" ><br />
   Last Name: <input type="text" name="lastName" ><br /><br />
   <input id="bu_add" type="button" value="Add" onclick="addform();">
   <input id="bu_delete" type="button" value="Delete" onclick="removeform();">
   </FORM><br />
</body>
</html>

Thread: Interact With a Form

Thread Tools

Search Thread

Interact With a Form

Similar Threads

Interact With Facebook & Twitter

getting a button to interact with dropdown and then output

If I include a fileField (dw cs3) form element in an html form then the attached file

Recall Form Values script 1 - problem after submitting form

How to interact pages!

Bookmarks

Bookmarks

Posting Permissions