使用 javascript 隐藏/显示 HTML 表单（按下按钮）答案

【问题标题】：Hiding/showing HTML forms (on button press) using javascript使用 javascript 隐藏/显示 HTML 表单（按下按钮）
【发布时间】：2013-03-28 06:26:18
【问题描述】：

我的名字是迈克尔·托斯卡诺。我目前正在为学校做一个 3 层项目，但是我被困在一个看似微不足道的步骤上。现在，我正在尝试通过单击一个按钮隐藏单个 HTML 表单，并通过单击另一个按钮显示。 HTML 页面上只有 2 个表单。如果我尝试隐藏第二个表单，我现在所拥有的工作，但是如果我尝试仅隐藏第一个表单，它会隐藏整个页面，除了页面顶部的两个按钮（两个表单）。我想也许我不小心把第二个表单放在了第一个表单中（如果可能的话），但是在查看我的代码之后，它看起来（至少对我来说）就像我用 .反正整个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 还很陌生，所以如果任何人的回复都可以提供简短的解释，我将不胜感激。提前谢谢大家。

【问题讨论】：

标签： javascript html forms hide show

【解决方案1】：

有几个问题：

您不需要为每个 Javascript 函数使用单独的脚本标记。只需将所有 Javascript 放在一个脚本标记中即可。
我强烈建议使用 CSS 来居中元素而不是 <center> 标签。您有许多未关闭的 <center> 标记要引导。就我个人而言，我认为左对齐看起来比居中好很多。
如果您的 HTML 是完整的文档，则需要标签 <head> 和 <body>。使用 W3C Markup Validation Service 确保您拥有有效的 HTML 代码。
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 中的区别。
HTML 元素之间不需要这么大的垂直空间。我完全赞成打破长行，比大多数人都多，但是当标记如此分散时，它变得难以扫描。您可以将<br> 放在行尾。
许多 Javascript 程序员更喜欢将左大括号放在前一行的末尾。这是一个次要的考虑，但它有助于节省空白。你会看到在我的代码示例中我遵循了这个约定。选择权由您决定。
您的<select> 标记应为小写。
“15 个字符或更少”语法不正确。它应该是“15 个字符或更少”或“15 个或更少字符”甚至更好，“最多 15 个字符”

请参阅this JS Fiddle，了解我正在使用的已清理 HTML 文档版本。

【讨论】：

感谢您的回复。你所说的一切（结合）帮助我解决了我的问题。你能解释一下“连接”javascript事件的含义吗？
这里，我为你提供了更多细节。

【解决方案2】：

首先，您必须将按钮移动到文档正文中

之后你可以让你的功能更好一点。

//names of functions as well as attributes should describe them
function show(elementId) { 
  //now we kick out both conditional we do not need them anymore

  //we hide both forms
  document.getElementById("order").style.display="none";
  document.getElementById("retrieve").style.display="none";

  //and then we simply show wanted one isn't that nicer and cleaner?
  document.getElementById(elementId).style.display="block";
}

现在当我们有了函数后，我们可以将它应用到我们的按钮上

<button type="button" onclick="show('order');">Order Form</button>
<button type="button" onclick="show('retrieve');">Retrieval Form</button>

如您所见，我们踢掉了它们的 ID，因为它们是不必要的，我们将属性放在引号中。这必须转到 body 元素而不是 head！

而不是这种风格的块形式：

<p><center>Name: <input type=text
name="name"
placeholder="Enter Your Name"
required
autocomplete="on"></center><br>

你可以这样做更好：

<p style="text-align:center"><input type="text"
  name="name"
  placeholder="Enter Your Name"
  required="required"
  autocomplete="on" />
</p>

（是的，每一行都是一个新段落，所以你不需要使用 BR 标签）

【讨论】：

哇，非常感谢。我现在对每个人的回复都感到非常兴奋，迫不及待地想尝试让一切变得更好/更高效。

【解决方案3】：

你的代码有很多问题：

<center> 标签打开的数量多于关闭的数量
您没有<head> 也没有<body> 标签。
如果您希望func() 隐藏显示一个表单但隐藏另一个表单，您应该在每种情况下都有两行 Javascript 代码，例如：document.getElementById("order").style.display="none"; document.getElementById("retrieve").style.display="block";
您还应该找到一种默认隐藏第二个表单的方法。

【讨论】：

哦，天哪，我想我还有一些编辑要做，哈哈。至于和标签，我在编辑中修复了它们，但感谢您指出它们。让我尝试清理我的代码，然后我会回复。
你应该给自己一个编辑器，它会警告你语法错误。也看看@ErikE 的回答，他提到了要修复的补充问题。