14

我需要使用一个按钮显示一个表单，并在用户按下另一个按钮时隐藏它，因为另一个按钮显示另一个表单。我用选择框做了类似的事情，但我不知道该怎么做。

4

5 回答 5

31

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

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>
于 2012-06-27T12:45:44.730 回答
4

我打赌你已经听说过这件事！它被称为jQuery。

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

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

于 2012-06-27T12:46:08.897 回答
2

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

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>
于 2013-07-08T08:34:14.033 回答
0

有一个名为 的全局属性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

于 2019-04-02T07:30:12.327 回答
0

您是否想要具有不同部分的相同表单，并使用按钮相应地显示每个部分？

这里是一个包含三个步骤的示例，即三个表单部分，但它可以扩展到任意数量的表单部分。HTML 字符&laquo;和&raquo;分别打印 « 和 » 这对于上一个和下一个按钮字符可能很有趣。

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>

于 2017-02-19T01:11:59.737 回答