使用javascript隐藏/显示HTML表单（在按钮上按下） [英] Hiding/showing HTML forms (on button press) using javascript
问题描述
<！DOCTYPE html>
< html>< head>
< button type = button id = f1 onclick =func（1）>订单表单< / button>
< button type = button id = f2 onclick =func（2）>检索表单< / button>
< script type =text / javascript>
函数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>
函数showValue（newValue）
{
document.getElementById（range）。innerHTML = newValue;
}
< / script>
< / head>
< body>
< form id = order action = form.php>
< p>< center>名称：< input type = text
name =name
placeholder =输入您的姓名
required
autocomplete =on>< / center>< br>
< center>电子邮件地址：< input type = text
name =email
placeholder =输入您的电子邮件
required
autocomplete = 关 >< /中心]，[<峰; br>
< center>密码：<输入类型=文本
名称=密码
placeholder =15字符或更少需要
自动填充= 关闭 >< /中心]，[<峰; br>
< center>地址：< input type = text
name =地址
placeholder =输入您的地址
所需
自动完成= 关 >< /中心]，[<峰; br>
< center>笔记本电脑：<输入类型=范围
名称=笔记本电脑
值= 0
最小= 0
最大= 10
onChange =showValue（this.value）>
< center>监视器：<输入类型=范围
名称=监视器
值= 0
最小= 0
最大= 10
onChange =showValue（this.value）>
< center>鼠标：<输入类型=范围
名称=鼠标
值= 0
最小= 0
最大= 10
onChange =showValue（this.value）>
< center>键盘：<输入类型=范围
名称=键盘
值= 0
最小= 0
最大= 10
onChange =showValue（this.value）>
< br>
< br>
< center>发货承运商：< SELECT name =delivery>
< option value =fedex> FEDEX< / option>
< option value =ups> UPS< / option>
< / SELECT>< / center>
< br>
< center>您想收到电子邮件收据吗？< br>
< center>是< input type =radioname =group1value = 1> No
< input>< / center>< br><
< br>
< center><输入类型=提交值=提交订单>< / center>< / p>
< / form>
< form id = retrieve action = form2.php>
名字：< input type = text name = first>< br>
Last Name：< input type = text name = last>< br>
密码：< input type = password name = p1>< br>
重新输入密码：< input type = password name = p2>< br>
< input type = submit>
< / form>
< / body>
< / html>
我想指出，我对HTML和JavaScript相当陌生，所以我会非常感激如果简单的解释可以伴随任何人的回应。感谢大家，提前。
- 每个Javascript函数不需要单独的脚本标记。只需将所有Javascript放在一个脚本标记中即可。
- 我强烈建议使用CSS将元素居中而不是
< center>标签。您有许多未关闭的< center>标签可供引导。就个人而言，我认为左对齐看起来比中心好得多。 - 如果您的HTML是完整文档，您需要标签
< head>和< body>。使用 W3C标记验证服务确保您拥有有效的HTML代码。 - HTML中的属性值应该用引号引起来，例如
< form id = order>会是< form id =order >。可能甚至需要required =required。 -
使用javascript连线javascript事件被认为是最佳做法，而不是放入内联事件处理程序。例如：
document.getElementById（'f1'）。onclick = function（）{
func（1） ;
};
我认为在您的按钮上放置数据属性实际上会更好窗体来显示/隐藏，然后在onclick事件中（现在只需要单个版本的函数而没有if语句），您只需拖动expando数据值即可。例如
< button data-for =order>。 - ，你只能使用一种形式。在哪里提到对方？此外，要获得您正在寻找的切换效果，您需要检测表单是否已隐藏，并适当更改其显示样式。
- 您应该研究介于
==和===之间的Javascript。 - 因为你的HTML元素之间有太多的垂直空间。我全部都是为了排长队，而不是大多数，但是当标记如此分散时，很难扫描。您可以在行尾添加
< br>。 许多Javascript程序员更喜欢将自己的花括号放在行尾在先行。这是一个小问题，但它有助于节省空间。你会看到，在我的代码示例中，我遵循了这个约定。 - 您的
< select>标记应该是小写。 - 15个字符或更少是不正确的语法。它应该是15个字符或更少或者15个或更少字符或甚至更好，最多15个字符
请参阅这个JS小提琴，了解我的清理HTML文档的版本。
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.
There are several issues:
- You don't need a separate script tag for each Javascript function. Just put all the Javascript together in one script tag.
- I strongly advise to use CSS to center elements instead of the
<center>tag. You have many unclosed<center>tags, to boot. Personally, I think left-justified looks a lot better than centered. - If your HTML is a full document, you need tags
<head>, and<body>. Use the W3C Markup Validation Service to be sure that you have valid HTML code. - Attribute values in HTML should be in quotes, for example
<form id=order>would be<form id="order">. It is possible that evenrequiredneeds to berequired="required". It is considered best practice to "wire up" javascript events using javascript instead of putting inline event handlers. For example:
document.getElementById('f1').onclick = function () { func(1); };I think it would actually be better to put a data attribute on your buttons that has the id of the form to show/hide and then in the onclick event (which now only needs a single version of the function with no if statement) you just pull the expando data value. For example
<button data-for="order">.- In your code for showing/hiding, you are only working with one form. Where are the references to the other? Also, to get the toggle effect you are looking for, you'll need to detect if the form is already hidden or not and change its display style appropriately.
- You should research the difference in Javascript between
==and===. - There is no need for so much vertical space between your HTML elements. I am all for breaking up long lines, more than most, but when the markup is so spread out it becomes hard to scan. You can put
<br>at the end of lines. - Many Javascript programmers prefer putting their opening curly braces at the end of the prior line. It's a minor consideration, but it helps save white space. You will see that in my code example I followed this convention. The choice is up to you.
- Your
<select>tag should be lower case. - "15 characters or less" is incorrect grammar. It should be "15 characters or fewer" or perhaps "15 or fewer characters" or even better, "up to 15 characters"
Please see this JS Fiddle for my version of a cleaned-up HTML document that is working.
这篇关于使用javascript隐藏/显示HTML表单（在按钮上按下）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
