如何使用 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 找到如何执行这些操作。