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

您需要在点击“提交”按钮后致电validateForm()
最初隐藏表单，选择表单后，表单将显示出来

<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>标签，然后将它们放入第一个表单中）。使用<button>方法将Submit按钮更改为一个onclick元素，以显示表单的第二部分，并且还应显示实际的Submit按钮。您可能想要在用户在任何字段中键入时按下enter时禁用提交表单，并禁用在移动设备上使用软键盘提交。应当可以通过Google找到如何做这些事情的方法。

如何使表格与javascript一起显示？

3 个答案: