如何获取表单的 onSubmit 事件？答案

【问题标题】：How to grab the onSubmit event for a form?如何获取表单的 onSubmit 事件？
【发布时间】：2009-04-02 15:49:05
【问题描述】：

我想知道如何从表单中获取onsubmit 事件来进行表单验证，因为我无法直接访问它。（我正在为 cmets 编写一个 Wordpress 插件，所以不能直接访问表单标签或提交按钮。）

尝试为我的插件执行此操作感到非常沮丧，因此我在下面编写了一个 Hello World 版本。我希望它在我加载页面时显示“Hello World”警报，并在我单击提交按钮时显示“表单提交”警报。相反，它会在页面加载时显示两个弹出窗口。

这是我的代码：

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>Hello World</title>
    </head>
    <body>
    <h2>Test</h2>
    <form action="#" method="post" id="commentform">

    <p><input type="text" name="author" id="author" size="22" tabindex="1" />
    <label for="author"><small>Name (required)</small></label></p>

    <p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />

    </form>

    <script type="text/JavaScript">
    <!--
    alert("Hello world");

    var formCheck = document.getElementById("commentform");

    formCheck.onSubmit = doMapping(); 

    function doMapping() {
        alert("form submitted");
        return false;
    }

    -->
    </script>     

    </body>
    </html>

【问题讨论】：

标签： javascript html forms

【解决方案1】：

改变这个：

formCheck.onSubmit = doMapping()

到这里：

formCheck.onSubmit = doMapping

当您在函数末尾添加括号时，您将执行该函数。当您分配一个函数（或将其作为参数传递给另一个函数）时，您需要省略括号，因为这是在 JavaScript 中检索函数指针的方式。

编辑：您还需要将 doMapping 函数的声明移到该函数的分配上方，像这样（很好地抓住 tvanfosson！）：

function doMapping() {
        alert("form submitted");
        return false;
    }

formCheck.onSubmit = doMapping();

但是，如果 doMapping 函数未在其他地方使用，您可以将 doMapping 函数声明为匿名函数，如下所示：

formCheck.onSubmit = function() {
        alert("form submitted");
        return false;
    }

这对我来说似乎更干净一些。

【讨论】：

我认为您还必须更改顺序，因为在将其分配为 onSubmit 处理程序之前可能需要定义 doMapping。

【解决方案2】：

使用 jQuery。

$(document).ready( function() {
    $('#commentform').submit( function() {
        alert('form submitted');
        return false;
    });
});

【讨论】：

【解决方案3】：

谢谢！实际上，我使用 Andrew 的建议和 window.onload 事件以另一种方式解决了这个问题——我认为问题的部分原因是该元素实际上并未加载。

window.onload = function(){
    if (document.getElementById("commentform")){
        document.getElementById("commentform").onsubmit = doMapping;
    }
}

function doMapping(){
            alert("form submitted");
            return false;
}

【讨论】：

注意，onload 事件是在整个页面加载完成后触发的。因此，如果有一张图片需要很长时间才能加载——通常是像谷歌分析这样的东西，你的事件处理程序在用户点击提交之前不会被分配。