防止表单提交 JavaScript
Kushank Singh
2023年1月30日
2021年7月4日
-
使用
script
标签内的函数来停止 JavaScript 中表单的执行 - 在 JavaScript 中使用 Vanilla JavaScript 停止表单的执行
-
在 JavaScript 中使用
jQuery
库停止表单的执行 - 在 JavaScript 中使用 Dojo Toolkit 停止表单的执行
所有网络浏览器都支持 JavaScript,用于制作动态网页。在本教程中,我们将停止使用 JavaScript 执行表单。
使用 script
标签内的函数来停止 JavaScript 中表单的执行
script
标签用于包含客户端脚本。我们在 script
标签中创建了一个 JavaScript 函数来防止提交表单。
参考下面的代码。
<form onsubmit="submitForm(event)">
<input type="text">
<button type="submit">Submit</button>
</form>
<script type="text/JavaScript">
function submitForm(event){
event.preventDefault();
window.history.back();
}
</script>
preventDefault()
函数不会让事件的默认操作发生。window.history.back()
将我们带到历史记录中的上一个 URL。讨论的所有方法都将包括这两个功能。
在 JavaScript 中使用 Vanilla JavaScript 停止表单的执行
Vanilla JavaScript 纯粹在 JavaScript 上工作,不使用任何额外的库。
事件侦听器可用于防止表单提交。它被添加到提交按钮,该按钮将执行该功能并在单击时阻止表单提交。
例如,
element.addEventListener("submit", function(event) {
event.preventDefault();
window.history.back();
}, true);
在 JavaScript 中使用 jQuery
库停止表单的执行
jQuery
是一个快速而强大的库,可以简化 JavaScript 的使用。它是最流行的 JavaScript 库之一。
我们将看到我们如何才能阻止表单的提交。
参考下面的代码。
$('#form').submit(function(event) {
event.preventDefault();
window.history.back();
});
$('#form').submit()
函数用于在 jQuery 中提交表单。
在 JavaScript 中使用 Dojo Toolkit 停止表单的执行
它是一个 JavaScript 库,有助于简化 JavaScript 在基于 Web 的应用程序中的跨平台使用。它使用 dojo.connect()
函数来处理事件。在我们的例子中,这用于表单提交,我们将使用 preventDefault()
和 window.history.back()
函数来防止这种情况。
例如,
dojo.connect(form, "submit", function(event) {
event.preventDefault();
window.history.back();
});