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

我希望在提交表单时运行JavaScript函数。问题是，提交表单时，页面会重新加载，表单值会作为GET参数附加到URL。我希望它停留在当前页面上，只运行JavaScript函数

---

我想知道避免重新加载页面和发送参数的最佳做法是什么（或者您是怎么做的）。

将事件处理程序附加到表单的提交事件。确保它取消默认操作

怪癖模式已经存在，但您最好使用一个库来简化代码并消除浏览器之间的差异。所有主要的功能（如和）都包括事件处理功能，并且有大量的

以下是您在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>

YUI（）。使用（'event'，function（Y）{
Y.one（‘表格’）。关于（‘提交’）功能（e）{
//你想做的任何事都在这里
e、 预防默认值（）；
});
});

---

确保JavaScript由于任何原因失败。

在提交表单时，使用

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>

函数doSomething（）{
警报（'表格已提交！'）；
返回false；
}

这是可行的，但最好不要在HTML中乱放JavaScript，就像你不应该写很多内联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>

$（'.my form'）。在（'submit'，函数（）{
警报（'表格已提交！'）；
返回false；
});

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

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

---

这样，整个HTML中就不会有一堆事件侦听器。

要避免发送参数，请执行以下操作：o您的意思是，避免在浏览器地址栏中显示参数吗？基本上，使用POST而不是GET也可以解决这个问题（如果你想支持JS禁用的客户端，比如一些手机用户，这很有用）。这是真的，但我选择了最简单的选项来解决这个问题。这对我来说不适用。在提交表单之前，整个函数不会执行。@那么下次您能提供示例代码吗？Martin的回答非常笼统，虽然浏览器可能能够正确地处理它，但我建议关闭

标记以获得更好的一致性，例如

，如果您想使用普通Javascript（在我看来，您应该始终尝试）：

document.getElementsByClassName（'.my form'）[0]。addEventListener（'submit'，function（）{alert（'Form submitted'）；return false；}）；

@moteutch如何将潜在表单输入字段的值传递给函数？它应该在文档中找到它们，还是以某种方式将它们作为函数参数传递？