My only question now is:
How come when I click the drop down box and select a number nothing happens?
Thanks for the help
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script type="text/javascript">
function displayTable()
{ var row = document.getElementById("tableAnon")
var firstname = document.forms[0].elements['firstname']
var lastname = document.forms[0].elements['lastname']
var email = document.forms[0].elements['email']
var number = document.forms[0].elements['number']
var gender = document.forms[0].elements['gender']
var age = document.forms[0].elements['age']
var text = "Anonymous";
var anon = document.getElementById('anonymous');
if (row.style.display == '')
{
row.style.display = 'none'
firstname.value = ""
lastname.value = ""
email.value = ""
number.value = ""
firstname.value = firstname.value + text
lastname.value = lastname.value + text
email.value = email.value + text
number.value = number.value + text
age.value = age.value + text
anon.disabled=false
document.getElementById('gender').value = 'anonymous';
}
else
{
firstname.value = ""
lastname.value = ""
email.value = ""
number.value = ""
age.value = ""
anon.disabled=true
document.getElementById('gender').value = 'male'
row.style.display = '';
}
}
window.onload = function(){
var selectElement = document.getElementsByTagName("select")[0];
selectElement.onchange = function(){
var newElement = document.getElementById("newElement");
newElement.innerHTML = "";
var olNode = document.createElement("ol");
for (var i=0; i<this.value; i++){
var liNode = document.createElement("li");
var inputNode1 = document.createElement("input");
inputNode1.setAttribute("type","text");
inputNode1.setAttribute("name",this.value + "_height");
var inputNode2 = document.createElement("input");
inputNode2.setAttribute("type","text");
inputNode2.setAttribute("name",this.value + "_weight");
var inputNode3 = document.createElement("input");
inputNode3.setAttribute("type","text");
inputNode3.setAttribute("name",this.value + "_age");
var selectNode = document.createElement("select");
selectNode.setAttribute("type","select");
selectNode.setAttribute("name",this.value + "_sex");
var optionNode1 = document.createElement("option");
optionNode1.setAttribute("value",this.value + "male");
optionNode1.appendChild(document.createTextNode("Male"));
selectNode.appendChild(optionNode1);
var optionNode2 = document.createElement("option");
optionNode2.setAttribute("value","female");
optionNode2.appendChild(document.createTextNode("Female"));
selectNode.appendChild(optionNode2);
liNode.appendChild(document.createTextNode("Height: "));
liNode.appendChild(inputNode1);
liNode.appendChild(document.createElement("br"));
liNode.appendChild(document.createTextNode("Weight: "));
liNode.appendChild(inputNode2);
liNode.appendChild(document.createElement("br"));
liNode.appendChild(document.createTextNode("Age: "));
liNode.appendChild(inputNode3);
liNode.appendChild(document.createElement("br"));
liNode.appendChild(document.createTextNode("Sex: "));
liNode.appendChild(selectNode);
olNode.appendChild(liNode);
}
newElement.appendChild (olNode);
}
}
</script>
<body>
<div id="maincontainer">
<div id="topsection"><div class="innertube">
<h1>Report</h1></div></div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><p>Click the button below if you would like to give us your contact information or click it again to hide the form.</p>
<button onClick="displayTable()" >Show / Hide</button>
<form action='test.php' method='POST'>
<table id="tableAnon">
<tr><td> <h3>Personal Information:</h3></td></tr>
<tr><td> First Name: </td><td id="anon"> <input name='firstname' size ='30'/> </td></tr>
<tr><td> Last Name: </td><td id="anon"> <input name='lastname' size ='30'/> </td></tr>
<tr><td> Gender: </td><td> <select name="gender" id="gender">
<option value="male">Male</option>
<option value="female">Female</option>
<option id="anonymous" disabled="disabled" value="anonymous">Anonymous</option>
</select></td></tr>
<tr><td> Email: </td><td id="anon"> <input name='email' size ='35'/> </td></tr>
<tr><td> Phone Number: </td> <td id="anon"><input name='number' size ='12'/> </td></tr>
<tr><td> Age: </td> <td id="anon"><input name='age' size ='12'/> </td></tr>
</table><br>
<h3>Description of People:</h3>
<form>
Number of People:
<select name="number">
<option>please select a value...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<div id="newElement"></div>
<tr><td> If Other Please Specify: </td> <td><input name='personother' size ='12'/> </td></tr>
</form>
</body>
</html>