我想在提交表单时运行 JavaScript 函数。问题在于，提交表单时，页面会重新加载，并且表单值会作为 GET 参数附加到 URL。我希望它停留在当前页面上并且只运行 JavaScript 函数。
我想知道避免重新加载页面和发送参数的最佳实践（或您做什么）。
表单提交执行 JavaScript 最佳实践？
IT技术
javascript
html
forms
2021-02-11 08:34:27
3个回答
使用该onsubmit事件在提交表单时执行 JavaScript 代码。然后您可以返回 false 或调用传递的事件的preventDefault方法来禁用表单提交。
例如：
<script>
function doSomething() {
alert('Form submitted!');
return false;
}
</script>
<form onsubmit="return doSomething();" class="my-form">
<input type="submit" value="Submit">
</form>
这是有效的，但最好不要用 JavaScript 乱扔 HTML，就像您不应该编写大量内联 CSS 规则一样。许多 Javascript 框架促进了这种关注点分离。在 jQuery 中，您使用 JavaScript 代码绑定一个事件，如下所示：
<script>
$('.my-form').on('submit', function () {
alert('Form submitted!');
return false;
});
</script>
<form class="my-form">
<input type="submit" value="Submit">
</form>
我知道这有点晚了。但我一直认为创建事件监听器的最佳方式是直接从 JavaScript 中创建。有点像不应用内联 CSS 样式。
function validate(){
//do stuff
}
function init(){
document.getElementById('form').onsubmit = validate;
}
window.onload = init;
这样你的 HTML 中就没有一堆事件侦听器。
将事件处理程序附加到表单的提交事件。确保它取消默认操作。
Quirks Mode 有一个关于事件处理程序的指南，但您最好使用库来简化代码并消除浏览器之间的差异。所有主要的（例如YUI和jQuery）都包含事件处理功能，并且有大量小型事件库。
以下是您在 YUI 3 中的做法：
<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>
<script>
YUI().use('event', function (Y) {
Y.one('form').on('submit', function (e) {
// Whatever else you want to do goes here
e.preventDefault();
});
});
</script>
确保如果 JavaScript 因任何原因失败，服务器将弥补不足。