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

コンテナと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

ボタンで各パーツを表示しながら、パーツが異なる同じフォームが必要ですか？

ここでは、3つのステップ、つまり3つのフォームパーツを使用した例ですが、任意の数のフォームパーツに拡張できます。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 に答える
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 に答える