My name is Michael Toscano. I am currently working on a 3 tier project for school, however I am stuck on what seems to be a trivial step. Right now, I am trying to make it so individual HTML forms are hidden by clicking one button, and shown by clicking another. There are only 2 forms on the HTML page. What I have now works if I try to hide the second form, however if I try to hide only the first form, it hides the entire page, aside from the two buttons at the top of the page (both forms). I thought that maybe I accidentally placed the second form within the first form (if that is possible), but after looking over my code it looks (to me at least) like I terminated the first form with . Anyway, the entire HTML file is as follows:
<!DOCTYPE html>
<html><head>
<button type=button id=f1 onclick=func(1)>Order Form</button>
<button type=button id=f2 onclick=func(2)>Retrieval Form</button>
<script type=text/javascript>
function func(a) {
if(a==1) {
document.getElementById(order).style.display=none;
}
if(a==2) {
document.getElementById(order).style.display=block;
}
}
</script>
<script type=text/javascript>
function showValue(newValue)
{
document.getElementById(range).innerHTML=newValue;
}
</script>
</head>
<body>
<form id=order action=form.php >
<p><center>Name: <input type=text
name=name
placeholder=Enter Your Name
required
autocomplete=on></center><br>
<center>Email: <input type=text
name=email
placeholder=Enter Your Email
required
autocomplete=off></center><br>
<center>Password: <input type=text
name=password
placeholder=15 Characters Or Less
required
autocomplete=off></center><br>
<center>Address: <input type=text
name=address
placeholder=Enter Your Address
required
autocomplete=off></center><br>
<center>Laptops: <input type=range
name=laptop
value=0
min=0
max=10
onChange=showValue(this.value)>
<center>Monitors: <input type=range
name=monitor
value=0
min=0
max=10
onChange=showValue(this.value)>
<center>Mouses: <input type=range
name=mouse
value=0
min=0
max=10
onChange=showValue(this.value)>
<center>Keyboards: <input type=range
name=keyboard
value=0
min=0
max=10
onChange=showValue(this.value)>
<br>
<br>
<center>Shipping Carrier: <SELECT name=delivery>
<option value=fedex>FEDEX</option>
<option value=ups>UPS</option>
</SELECT></center>
<br>
<center>Would you like an email receipt?<br>
<center>Yes <input type=radio name=group1 value=1> No
<input type=radio name=group1 value=0 checked></center><br>
<br>
<center><input type=submit value=Submit Order></center></p>
</form>
<form id=retrieve action=form2.php>
First Name: <input type=text name=first><br>
Last Name: <input type=text name=last><br>
Password: <input type=password name=p1><br>
Retype Password: <input type=password name=p2><br>
<input type=submit>
</form>
</body>
</html>
I would like to point out that I am fairly new to HTML and javascript, so I would greatly appreciate it if a brief explanation could accompany anybody's response. Thank you all, in advance.
