2

我有一个表单 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>
4

3 回答 3

4
  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>

于 2019-12-25T16:41:49.740 回答
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>

于 2019-12-25T16:46:58.700 回答
0

当您提交表单时，它会重新加载页面。因此，在默认情况下，您无法在提交第一个表单后显示表单。

因此，您要么需要使用 AJAX 提交表单，要么在第一个表单中包含其他两个表单（将它们更改为<div>标签，并将它们放在第一个表单中）。将提交按钮更改为仅<button>具有方法的元素onclick，以显示表单的第二部分，并且还应该显示真正的提交按钮。您可能希望在用户enter在输入任何字段时按下时禁用提交表单，并禁用在移动设备上使用软键盘提交。应该可以通过 Google 找到如何执行这些操作。

于 2019-12-25T16:50:33.897 回答