Question

我在输入字段上使用HTML“必需”字段属性。同时，我有一个功能，单击“下一步”按钮将显示下一个表单字段。表单验证有效，但单击“下一步”按钮时仍会显示以下表单字段，显然我不想显示它。

我想使用简单且最少的代码。

<head>
<style> 
#tab2{
display: none;
}
</style>
<script>
function show(){
document.getElementById("tab2").style.display="block";
}
</script>
</head>
<body>
<form>
<div id="tab1">
<input type="text" id="urname" placeholder="Your Name" required><br>
<button onclick="show()">Next</button>
</div>
<div id="tab2">
<input type="text" id="urname" placeholder="Your School Name" required><br>
<button>Next</button>
</div>
</form> 
</body>

我想用最简单和最少的代码创建一个多步骤表单。

Answer 1

现在，无论第一个输入的值如何，都使第二个输入显示块，而是添加一个if语句来检查第一个输入的值，然后相应地更改第二个输入的显示属性

function show() {
  let urName = document.getElementById('urname').value
  if (urName) {
    document.getElementById("tab2").style.display = "block";
  }
}

#tab2 {
  display: none;
}

<body>
  <form>
    <div id="tab1">
      <input type="text" id="urname" placeholder="Your Name" required><br>
      <button onclick="show()">Next</button>
    </div>
    <div id="tab2">
      <input type="text" id="urname" placeholder="Your School Name" required><br>
      <button>Next</button>
    </div>
  </form>
</body>

如果表单字段保留为HTML必填属性，则阻止函数运行

1 个答案: