如何使用 javascript 顯示表單？

Question

我有一個表單 2 單選選項，a 和 b，當提交表單時，我想要另一個表單，一個用於 a 的表單和一個用於 b 的表單，根據選擇從 display:none 到 display:block。 這是我所擁有的。

<script>
    function validateForm() {
        var x = document.forms["choice"]["choose one"].value;
        if (x == "A") {
            document.getElementById("a").style.display = "block";
            }
        else {
            document.getElementById("b").style.display = "block";
            }
        }   
</script>

后來在 html 中。

<form action="form.php" method="get" name="choice">
                    0000:<br>
                    <label>
                        <input type="radio" name="choose one" value="A">
                        A
                    </label><br>
                    <label>
                        <input type="radio" name="choose one" value="B">
                        B
                    </label><br>
                    <input type="submit" value="Sub">
                </form>

<form id="a">
</form>

<form id="b">
</form>

Answer 1

1. 您需要在單擊提交按鈕時調用validateForm()
2. 最初隱藏表格，選擇表格后，表格將顯示

 <script> function validateForm() { var x = document.forms["choice"]["choose one"].value; if (x == "A") { document.getElementById("a").style.display = "block"; document.getElementById("b").style.display = "none"; } else { document.getElementById("b").style.display = "block"; document.getElementById("a").style.display = "none"; } } </script> <form method="get" name="choice"> 0000:<br> <label> <input type="radio" name="choose one" value="A"> A </label><br> <label> <input type="radio" name="choose one" value="B"> B </label><br> <input type="button" value="Sub" onclick="validateForm()"> </form> <form id="a" style="display:none"> form a </form> <form id="b" style="display:none"> form b </form>

Answer 2

添加一個onchange事件並將兩個表單設置為display:none在開始時：

 document.querySelectorAll("input[type='radio']").forEach(el => { el.addEventListener("change", (evt) => validateForm(evt)) }) function validateForm(e) { let a = document.getElementById("a") let b = document.getElementById("b") a.style.display = b.style.display = "none" if (e.target.value == "A") { a.style.display = "block"; } else { b.style.display = "block"; } }

 #a, #b { display: none }

 <form action="form.php" method="get" name="choice"> 0000:<br> <label> <input type="radio" name="choose one" value="A"> A </label><br> <label> <input type="radio" name="choose one" value="B"> B </label><br> <input type="submit" value="Sub"> </form> <form id="a"> Form A </form> <form id="b"> Form B </form>

Answer 3

當您提交表單時，它會重新加載頁面。 因此，在默認情況下，您無法在提交第一個表單后顯示表單。

因此，您要么需要使用 AJAX 提交表單，要么在第一個表單中包含其他兩個表單（將它們更改為<div>標記，並將它們放在第一個表單中）。 將提交按鈕更改為一個帶有onclick方法的<button>元素，以顯示表單的第二部分，它還應該顯示真正的提交按鈕。 您可能希望在用戶在任何字段中鍵入時按enter鍵時禁用提交表單，並禁用在移動設備上使用軟鍵盤提交。 應該可以通過 Google 找到如何執行這些操作。