如何修改表单内display:none的input显示状态且阻止表单提交

问题根因：HTML规范中，位于<form>标签内部的<button>元素如果未显式设置type属性，默认值为submit，点击后会自动触发表单提交逻辑，这是你遇到问题的核心原因。

以下三种方案均可实现需求，优先推荐改动最小的方案1：

• 方案1：显式指定按钮类型为普通按钮（推荐）
  仅需给<button>标签添加type="button"属性即可，无需修改JS逻辑，修改后的HTML代码如下：

<div class="form-group">
  <input type="text">
  <button type="button" onclick="myFunction()" class="btn btn-primary btn-sm">Manuel</button><br>
  <input type="text" style="display:none;" id="hide1">
</div>

• 方案2：在JS逻辑中阻止默认提交行为
  如果不方便修改按钮的type属性，可以通过拦截点击事件的默认行为实现，需要同步修改HTML的事件传参和JS逻辑：
  修改后的按钮onclick属性：

<button onclick="myFunction(event)" class="btn btn-primary btn-sm">Manuel</button>

修改后的JS代码：

function myFunction(e) {
  // 阻止事件的默认提交行为
  e.preventDefault();
  document.getElementById("hide1").style.display = "block";
}

• 方案3：行内事件直接返回false
  无需修改JS逻辑，仅需在行内点击事件末尾添加return false即可：

<button onclick="myFunction(); return false;" class="btn btn-primary btn-sm">Manuel</button>

内容的提问来源于stack exchange，提问作者Rockie Leafler