我有一个按钮 (<input type="submit">
)。当它被点击时,页面会重新加载。由于我有一些在页面加载时调用的jQuery hide()
函数,这会导致这些元素再次被隐藏。如何让按钮什么也不做,以便我仍然可以添加一些在按钮被点击时发生的动作,但不重新加载页面。
我有一个按钮 (<input type="submit">
)。当它被点击时,页面会重新加载。由于我有一些在页面加载时调用的jQuery hide()
函数,这会导致这些元素再次被隐藏。如何让按钮什么也不做,以便我仍然可以添加一些在按钮被点击时发生的动作,但不重新加载页面。
不需要使用JS或jQuery。 只需将按钮类型指定为“button”,即可防止页面重新加载。
如果您没有指定按钮类型,浏览器会自动将其设置为“reset”或“submit”,从而导致页面重新加载。
<button type='button'>submit</button>
使用 <button>
元素或使用 <input type="button"/>
元素来实现。
<button>
放在表单内,刷新就会发生;如果将其放在表单外,就不会发生刷新! - Kevinvhengsttype="button"
添加到 <button>
元素中即可避免刷新。 - Johnny Metz在HTML中:
<form onsubmit="return false">
</form>
为了避免所有“按钮”甚至已分配onclick的“按钮”都进行刷新。$("input[type='submit']").click(function() { return false; });
或者$("form").submit(function() { return false; });
在HTML中:
<input type="submit" onclick="return false">
使用jQuery或类似的变体,这已经被提到过了。
您可以使用包含提交按钮的表单。然后使用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>
let input = document.querySelector("input");
input.addEventListener("submit", (event) => {
event.preventDefault();
})
如上面的一条评论所述(被埋没了),这个问题可以通过不将按钮标签放在表单标签内来解决。当按钮在表单外部时,页面不会刷新。
form
标签上使用onsubmit
。<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>
在底部添加并像这样输入 data-toggle="modal"
<a data-toggle="modal"><button type="submit">Edit Profile</button></a>
<input type='button' />
的一个好替代品。 - Rick