Mik*_*ike 3 html javascript forms show hide
我的名字是Michael Toscano.我目前正在为学校开展一个三层项目,但我仍然坚持似乎是一个微不足道的步骤.现在,我正在尝试通过单击一个按钮隐藏单个HTML表单,然后单击另一个按钮显示.HTML页面上只有两个表单.如果我试图隐藏第二个表单,我现在有效,但是如果我试图只隐藏第一个表单,它会隐藏整个页面,除了页面顶部的两个按钮(两个表单).我想也许我不小心将第二个表单放在第一个表单中(如果可能的话),但在查看我的代码后,它看起来(至少对我来说)就像我终止了第一个表单一样.无论如何,整个HTML文件如下:
<!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>
我想指出我对HTML和javascript相当新,所以如果一个简短的解释可以伴随任何人的回复,我将不胜感激.谢谢大家.
有几个问题:
<center>标签.你有许多未封闭的<center>标签,以便启动.就我个人而言,我认为左对齐看起来好于中心.<head>,以及<body>.使用W3C标记验证服务以确保您具有有效的HTML代码.<form id=order>会<form id="order">.有可能甚至required需要required="required".最好的做法是使用javascript"连接"javascript事件,而不是使用内联事件处理程序.例如:
document.getElementById('f1').onclick = function () {
func(1);
};
我认为在你的按钮上放置一个数据属性实际上会更好,这个属性具有要显示/隐藏的表单的id,然后在onclick事件中(现在只需要单个版本的函数而没有if语句)你只是拉取expando数据值.例如<button data-for="order">.
==和之间的Javascript差异===.<br>行尾.<select>标签应该是小写的.请查看此JS Fiddle,了解我正在运行的已清理HTML文档的版本.