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

Question

提问by Mike

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:

我叫迈克尔·托斯卡诺。我目前正在为学校开展一个 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>

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.

我想指出的是，我对 HTML 和 javascript 还很陌生，所以如果有人的回复能附上简短的解释，我将不胜感激。谢谢大家。

Answer 1

回答by ErikE

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 Serviceto 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 even requiredneeds to be required="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"

您不需要为每个 Javascript 函数使用单独的脚本标记。只需将所有 Javascript 放在一个脚本标签中。
我强烈建议使用 CSS 来居中元素而不是<center>标签。你有许多未关闭的<center>标签，要启动。就个人而言，我认为左对齐看起来比居中好得多。
如果你的 HTML 是一个完整的文档，你需要标签<head>, 和<body>。使用W3C 标记验证服务来确保您拥有有效的 HTML 代码。
HTML 中的属性值应该用引号引起来，例如<form id=order>是<form id="order">. 甚至有可能required需要required="required"。
最好的做法是使用 javascript 来“连接”javascript 事件，而不是放置内联事件处理程序。例如：
```
document.getElementById('f1').onclick = function () {
    func(1);
};
```
我认为实际上最好在您的按钮上放置一个 data 属性，该属性具有要显示/隐藏的表单 id 然后在 onclick 事件中（现在只需要一个没有 if 语句的函数版本），您只需拉取 expando 数据值。例如<button data-for="order">。
在您的显示/隐藏代码中，您只使用一种表单。对另一个的引用在哪里？此外，要获得您正在寻找的切换效果，您需要检测表单是否已隐藏并适当更改其显示样式。
您应该研究==和之间的 Javascript 差异===。
HTML 元素之间不需要太多垂直空间。我完全赞成打破长行，比大多数人都多，但是当标记如此分散时，它变得难以扫描。你可以放在<br>行尾。
许多 Javascript 程序员更喜欢将左花括号放在前一行的末尾。这是一个次要的考虑，但它有助于节省空白。你会看到在我的代码示例中我遵循了这个约定。这个选择由你。
你的<select>标签应该是小写的。
“15 个字符或更少”是不正确的语法。它应该是“15 个字符或更少”或“15 个或更少字符”，甚至更好，“最多 15 个字符”

Please see this JS Fiddlefor my version of a cleaned-up HTML document that is working.

请参阅此 JS Fiddle以了解我正在运行的已清理 HTML 文档的版本。

Answer 2

回答by Antharon

at first you have to move your buttons into document body

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

after that you can make your function a bit nicer.

之后，您可以使您的功能更好一点。

//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";
}

and now when we have our function, we can apply it on our buttons

现在当我们有了我们的功能时，我们可以将它应用到我们的按钮上

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

as you can see we kicked IDs of them because they are unnecessary and we put attributes into quotes. This must go to the body element instead of head!

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

instead of this style of blocks in form:

而不是这种形式的块：

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

you can do it nicer way like this:

你可以像这样做得更好：

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

(yes, every line is a new paragraph so you don't need to use BR tags)

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

Answer 3

回答by Mike

There are a lot of problems with your code:

你的代码有很多问题：

You have more <center>tags open than closed
You have no <head>nor <body>tags.
If you want func()to hide show one form but hide the other, you should have two lines of Javascript code in each case, for example: document.getElementById("order").style.display="none"; document.getElementById("retrieve").style.display="block";
You should also find a way to hide the second form by default.

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

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

提问by Mike

回答by ErikE

回答by Antharon

回答by Mike

相关推荐

最近更新

标签

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

提问by Mike

回答by ErikE

回答by Antharon

回答by Mike

相关推荐

HTML Table th 样式宽度不起作用

HTML+CSS：如何强制 div 内容保持在一行？

Html 使用 mailto 发送带有附件的电子邮件

Html 纯css上带有固定标题和固定列的表格

相关推荐

最近更新

标签