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

Question

我需要使用一个按钮显示一个表单，当用户按下另一个按钮时隐藏它，因为另一个按钮会显示另一个表单。我用下拉框做了类似的事情，但我不知道该如何做。

- Marko Mijailovic

---

每个人都会问你已经尝试了什么，因为这里没有人想要从头开始做你的工作。当我们看到你至少和我们一样努力地寻找答案时，就会让我们感到很温暖和愉悦。请试着让你的问题更具明确性和详细性。 - MultiDev

好的，没关系，我会自己解决的。 - Marko Mijailovic

@antyrat：因为链接到你自己的网站导致返回按钮功能失效，扣10分！ ;) - Limey

OT; @Limey 你说的“禁用后退按钮功能”是什么意思？在我的Ubuntu上使用Opera 12时，它的功能正常。 - feeela

@feeela：从状态栏来看，当你按返回按钮时，它似乎在尝试与Facebook进行某些操作。它最终对我起作用了一次，但随后在IE 8中又开始失败了（是的，是的，我知道，但这是工作需要，所以我被迫这么做）。 - Limey

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>

- Neji

---

我会使用jQuery。其他所有东西对我来说都变得不安全了。 - Fabio Poloni

你能在表单级别上做到这一点，还是需要将你的表单包装在一个 div 中？ - Limey

是的，但它用简单的JS回答了他的问题！如果答案是错误的，那么就给它点个踩，否则似乎没有理由它不能回答问题。 - Neji

没有问题，可以从基础层面开始做。 - Neji

这两个 button 元素不是必须要在 form HTML 元素内吗？这是符合规范的 HTML 吗？ - Peter Mortensen

Answer 2

我打赌你已经听说过这个东西了！它被称为jQuery。

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

这非常容易，你可以使用类似CSS的选择器，并添加动画效果。学习起来非常简单。

- Fabio Poloni

---

真的吗？就为了这么简单的功能，你要加载整个库？ - Teneff

你总是会使用 jQuery。 - Fabio Poloni

我确信他的网络应用程序中有其他可以利用jQuery的功能，所以请为此点赞（+1）。 - Danny

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>

- usercode

Answer 4

你想要同一个表单有不同的部分，根据按钮显示每个部分吗？

这里有一个三步骤的示例，即三个表单部分，但可以扩展到任意数量的表单部分。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)">&raquo;</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)">&laquo;</button>
  <button type="button" onclick="shows_form_part(3)">&raquo;</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)">&laquo;</button>
  <button type="button" onclick="calc_sum()">Sum</button>
</div>

- João Pimentel Ferreira

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

- Dmonk

---

不确定为什么这被踩了，它像魔法一样有效。 - Display name