如何使一个 HTML 按钮不重新加载页面

我有一个按钮(<input type="submit">)。当单击它时，页面将重新加载。因为我有一些在页面加载时调用的 jQueryhide()函数，这会导致这些元素再次被隐藏。我如何让按钮什么都不做，这样我仍然可以添加一些操作，当按钮被点击时发生，但不重新加载页面。

362852 次浏览
小开

使用 <button>元素或使用 <input type="button"/>。

小开

您可以使用 jQuery 在按钮上添加一个 click 处理程序，然后返回 false。

$("input[type='submit']").click(function() { return false; });

或者

$("form").submit(function() { return false; });
小开

HTML:

<input type="submit" onclick="return false">

With jQuery, some similar variant, already mentioned.

小开

HTML:

<form onsubmit="return false">
</form>

为了避免刷新所有的“按钮”，即使分配了 onclick。

小开
最佳答案

不需要使用 JS 或 jQuery。 要停止页面重新加载，只需将按钮类型指定为“按钮”即可。

如果你没有指定按钮类型，浏览器会自动将其设置为“重置”或“提交”，从而导致页面重新加载。

<button type='button'>submit</button>
小开

正如上面的一个注释(隐藏)所述，可以通过不在表单标记中放置按钮标记来修复这个问题。当按钮位于窗体之外时，页面不会刷新自身。

小开

我还不能发表评论，所以我把这个作为一个答案。 避免重新加载的最佳方法是@user2868288所说的: 在 form标记上使用 onsubmit。

从这里提到的所有其他可能性来看，它是唯一允许触发新的 HTML5浏览器数据输入验证(<button>和 jQuery/JS 处理程序都不会这么做)并允许将 jQuery/AJAX 动态信息添加到页面上的方法。 例如:

<form id="frmData" onsubmit="return false">
<input type="email" id="txtEmail" name="input_email" required="" placeholder="Enter a valid e-mail" spellcheck="false"/>
<input type="tel" id="txtTel" name="input_tel" required="" placeholder="Enter your telephone number" spellcheck="false"/>
<input type="submit" id="btnSubmit" value="Send Info"/>
</form>
<script type="text/javascript">
$(document).ready(function(){
$('#btnSubmit').click(function() {
var tel = $("#txtTel").val();
var email = $("#txtEmail").val();
$.post("scripts/contact.php", {
tel1: tel,
email1: email
})
.done(function(data) {
$('#lblEstatus').append(data); // Appends status
if (data == "Received") {
$("#btnSubmit").attr('disabled', 'disabled'); // Disable doubleclickers.
}
})
.fail(function(xhr, textStatus, errorThrown) {
$('#lblEstatus').append("Error. Try later.");
});
});
});
</script>
小开

可以使用包含提交按钮的窗体。然后使用 jQuery 防止表单的默认行为:

$(document).ready(function($) {
$(document).on('submit', '#submit-form', function(event) {
event.preventDefault();
  

alert('page did not reload');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id='submit-form'>
<button type='submit'>submit</button>
</form>

小开

你也可以使用 JavaScript:

  let input = document.querySelector("input");
input.addEventListener("submit", (event) => {
event.preventDefault();
})
小开

使用

Event.preventDefault ()

在事件函数的第一行。

按钮必须是类型按钮，并且在按钮 html 中包含 type = “ commit”。


提交答案