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中都没有一堆事件监听器。

Answer 3

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

Quirks Mode有a guide to event handlers，但你可能最好使用库来简化代码并消除浏览器之间的差异。所有主要的（例如YUI和jQuery）都包含事件处理功能，并且有大量tiny event libraries。

以下是如何在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因任何原因失败，请确保the server will pick up the slack。

Answer 4

请勿将您的JS函数命名为“提交”

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

4 个答案: