javascript - 如何显示隐藏表格

Question

我想在点击按钮时显示一个隐藏的表单 我的问题是当我点击按钮时，表单显示几秒钟然后页​​面重新加载 这是我的代码:

Java 脚本:

function show(){
    document.getElementById("theForm").style.display="block";
}

html:

<button id="search" onclick="show()">show</button>
</form>
<form class="form-horizontal" action="FormController/save" method = "POST" id="theForm" style="display: none">

Answer 1

按钮的默认行为是提交，因此提交了表单。您可以使用没有默认行为的 type="button"，因此它可以与客户端事件处理程序相关联。

<button type="button" id="search" onclick="show()">show</button>

---

此外，我建议您摆脱丑陋的内联点击处理程序并使用 addEventListener() 绑定(bind)事件处理程序

 document.querySelector('#search').addEventListener("click", show, false);

HTML

<button type="button" id="search">show</button>