Creating a Form

Dev Shed Forums Sponsor:

October 25th, 2012, 09:10 PM

hiyatran

Contributing User

Join Date: Jun 2010

Posts: 45

Time spent in forums: 3 h 56 m 26 sec
Reputation Power: 3

Creating a Form

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" id="facebookAcc" onsubmit="return false">
   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

__________________
OutingsForLess.com

October 28th, 2012, 02:26 PM

web_loone08

Contributing User

Join Date: Aug 2008

Posts: 599

Time spent in forums: 1 Week 1 Day 12 h 40 m
Reputation Power: 69

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>

<script>

var formCount = 1;

function newForms()
{
formCount++;
var newform = document.createElement("form");
var newfield = document.createElement("input");
var newfield2 = document.createElement("input");
var newlabel = document.createTextNode("First Name");
var newlabel2 = document.createTextNode("Last Name");
newform.setAttribute("name","myForm"+formCount);
newform.setAttribute("id","facebookAcc"+formCount);
newform.setAttribute("onsubmit","return false");
newfield.setAttribute("type","text");
newfield.setAttribute("class","txtField");
newfield.setAttribute("name","1stName"+formCount);
newfield2.setAttribute("type","text");
newfield2.setAttribute("class","txtField");
newfield2.setAttribute("name","lastName"+formCount);
if (formCount >= 1) {
document.getElementsByTagName("body")[0].appendChild(newform);
document.getElementsByTagName("form")[formCount-1].appendChild(newlabel);
document.getElementsByTagName("form")[formCount-1].appendChild(newfield);
document.getElementsByTagName("form")[formCount-1].appendChild(newlabel2);
document.getElementsByTagName("form")[formCount-1].appendChild(newfield2);
}
}

function removeForm()
{
if (formCount >= 2) {
formCount--;
var oldform = document.getElementById("facebookAcc"+(formCount+1));
document.getElementsByTagName("body")[0].removeChild(oldform);
}
else {
formCount = 1;
}
}

</script>

<style>
form {
margin-top:25px;
}
form[name=myForm] {
margin-top:0px;
}
.txtField {
display:block;
width:150px;
margin-bottom:5px;
}
</style>

</head>
<body>
   <FORM NAME="myForm" id="facebookAcc" onsubmit="return false">
   First Name: <input class="txtField" type="text" name="1stName"/>
   Last Name: <input class="txtField" type="text" name="lastName"/>
   <input id="bu_add" type="button" value="Add" onclick="newForms()">
   <input id="bu_delete" type="button" value="Delete" onclick="removeForm()">
   </FORM>
</body>
</html>

Developer Shed Advertisers and Affiliates