使用按钮和 JavaScript 显示/隐藏表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11226489/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show/hide forms using buttons and JavaScript
提问by Marko Mijailovic
I need to show a form using a button, and hide it when the user presses another button, because the other button shows another form. I did a similar thing with a select box, but I can't figure out how to do this.
我需要使用按钮显示一个表单，并在用户按下另一个按钮时隐藏它，因为另一个按钮显示另一个表单。我用选择框做了类似的事情，但我不知道如何做到这一点。
回答by Neji
Use the following code fragment to hide the form on button click.
使用以下代码片段在按钮单击时隐藏表单。
document.getElementById("your form id").style.display="none";
And the following code to display it:
以及以下代码来显示它：
document.getElementById("your form id").style.display="block";
Or you can use the same function for both purposes:
或者您可以为这两个目的使用相同的函数：
function asd(a)
{
if(a==1)
document.getElementById("asd").style.display="none";
else
document.getElementById("asd").style.display="block";
}
And the HTML:
和 HTML：
<form id="asd">form </form>
<button onclick="asd(1)">Hide</button>
<button onclick="asd(2)">Show</button>
回答by Fabio Poloni
There's something I bet you already heard about this! It's called jQuery.
我敢打赌你已经听说过这件事！它被称为jQuery。
$("#button1").click(function() {
$("#form1").show();
};
It's really easy and you can use CSS-like selectors and you can add animations. It's really easy to learn.
这真的很简单，您可以使用类似 CSS 的选择器，还可以添加动画。这真的很容易学习。
回答by usercode
If you have a container and two sub containers, you can do like this
如果你有一个容器和两个子容器，你可以这样做
jQuery
jQuery
$("#previousbutton").click(function() {
$("#form_sub_container1").show();
$("#form_sub_container2").hide(); })
$("#nextbutton").click(function() {
$("#form_container").find(":hidden").show().next();
$("#form_sub_container1").hide();
})
HTML
HTML
<div id="form_container">
<div id="form_sub_container1" style="display: block;">
</div>
<div id="form_sub_container2" style="display: none;">
</div>
</div>
回答by Jo?o Pimentel Ferreira
Would you want the same form with different parts, showing each part accordingly with a button?
您是否想要具有不同部分的相同表单，并使用按钮相应地显示每个部分？
Here an example with three steps, that is, three form parts, but it is expandable to any number of form parts. The HTML characters «and »just print respectively « and » which might be interesting for the previous and next button characters.
这里是一个包含三个步骤的示例，即三个表单部件，但它可以扩展到任意数量的表单部件。HTML 字符«和»分别打印 « 和 » 这对上一个和下一个按钮字符可能很有趣。
shows_form_part(1)
/* this function shows form part [n] and hides the remaining form parts */
function shows_form_part(n){
var i = 1, p = document.getElementById("form_part"+1);
while (p !== null){
if (i === n){
p.style.display = "";
}
else{
p.style.display = "none";
}
i++;
p = document.getElementById("form_part"+i);
}
}
/* this is called at the last step using info filled during the previous steps*/
function calc_sum() {
var sum =
parseInt(document.getElementById("num1").value) +
parseInt(document.getElementById("num2").value) +
parseInt(document.getElementById("num3").value);
alert("The sum is: " + sum);
}<div id="form_part1">
Part 1<br>
<input type="number" value="1" id="num1"><br>
<button type="button" onclick="shows_form_part(2)">»</button>
</div>
<div id="form_part2">
Part 2<br>
<input type="number" value="2" id="num2"><br>
<button type="button" onclick="shows_form_part(1)">«</button>
<button type="button" onclick="shows_form_part(3)">»</button>
</div>
<div id="form_part3">
Part 3<br>
<input type="number" value="3" id="num3"><br>
<button type="button" onclick="shows_form_part(2)">«</button>
<button type="button" onclick="calc_sum()">Sum</button>
</div>回答by Dmonk
There's the global attribute called hidden. But I'm green to all this and maybe there was a reason it wasn't mentioned yet?
有一个名为hidden. 但我对这一切持绿色态度，也许还有一个原因没有提到它？
var someCondition = true;
if (someCondition == true){
document.getElementById('hidden div').hidden = false;
}<div id="hidden div" hidden>
stuff hidden by default
</div>https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/hidden
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/hidden
