PDA

View Full Version : 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:

<!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):


<!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>