Question

我需要使用按钮显示表单，并在用户按下另一个按钮时隐藏它，因为另一个按钮显示另一个表单。我用选择框做了类似的事情，但我无法弄清楚如何做到这一点。

Answer 1

使用以下代码片段在按钮单击时隐藏表单。

document.getElementById("your form id").style.display="none";

并按照以下代码显示

document.getElementById("your form id").style.display="block";

或者您可以将相同的功能用于两种目的

function asd(a)
{
    if(a==1)
    document.getElementById("asd").style.display="none";
    else
    document.getElementById("asd").style.display="block";
}

和html

<form id="asd">form </form>
<button onclick="asd(1)">Hide</button>
<button onclick="asd(2)">Show</button>

Answer 2

我敢打赌你已经听说过这个了！它被称为http://jquery.com

$("#button1").click(function() { $("#form1").show(); };

这很简单，你可以使用类似CSS的选择器，你可以添加动画。这真的很容易学习。

Answer 3

如果你有一个容器和两个子容器，你可以这样做

的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

     <div id="form_container">
            <div id="form_sub_container1" style="display: block;">
            </div>

            <div id="form_sub_container2" style="display: none;">
            </div>
     </div>

Answer 4

您是否希望使用不同部分的相同表单，并使用按钮显示每个部分？

这里有一个包含三个步骤的例子

在HTML中只需插入

<body onload="shows_form_part(1)">
  <form>
    <div id="form_part1">
      <!--form elements 1-->
      <button type="button" onclick="shows_form_part(2)">&raquo;</button>
    </div>
    <div id="form_part2">
      <!--form elements 2-->
      <button type="button" onclick="shows_form_part(1)">&laquo;</button>
      <button type="button" onclick="shows_form_part(3)">&raquo;</button>
    </div>
    <div id="form_part3">
      <!--form elements 3-->
      <button type="button" onclick="shows_form_part(2)">&laquo;</button>
      <button type="button" onclick="submit_form()">Submit</button>
    </div>
  </form>
</body>

在Javascript中定义此函数，该函数仅显示相应的表单部分并隐藏其余部分。

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);
    }
}

然后你只需要定义submit_form()函数。

HTML字符«和»只分别打印«和»，这对于上一个和下一个按钮字符可能很有用。

检查JSfiddle example。

Answer 5

我知道线程在这一点上已经很旧了，但是因为我也有疑问，所以只花了两美分。有一个称为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

使用按钮和javascript显示/隐藏表单

5 个答案: