表单提交执行JavaScript最佳实践？

Question

我希望在提交表单时运行JavaScript函数.问题在于,在提交表单时,会重新加载页面,并将表单值作为GET参数附加到URL.我希望它保留在当前页面上并且只运行JavaScript函数.

我想知道最佳做法(或你做了什么)以避免重新加载页面和参数.

Answer 1

在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>

Answer 2

我知道这有点晚了.但我一直认为创建事件监听器的最佳方法是直接从JavaScript.有点像不应用内联CSS样式.

function validate(){
    //do stuff
}
function init(){
    document.getElementById('form').onsubmit = validate;
}
window.onload = init;

这样,整个HTML中都没有一堆事件监听器.