javascript - 如何获取表单的 onSubmit 事件?

标签 javascript html forms

我想知道如何从表单中获取 onsubmit 事件来进行一些表单验证,因为我无法直接访问它。 (我正在为评论写一个 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> 

最佳答案

改变这个:

formCheck.onSubmit = doMapping()

为此:

formCheck.onSubmit = doMapping

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


编辑:您还需要将 doMapping 函数的声明移至该函数分配给 onsubmit 事件的上方,如下所示(good catch tvanfosson!):

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

formCheck.onSubmit = doMapping(); 

但是,如果 doMapping 函数没有在别处使用,您可以将 doMapping 函数声明为匿名函数,如下所示:

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

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

关于javascript - 如何获取表单的 onSubmit 事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/710333/

相关文章:

html - CSS 布局在 IE 11 中完全困惑

javascript - 单击按钮后克隆整个表单元素

javascript - 根据输入值更改 href 目标

javascript - 使用 Jquery 解析序列化 JSON 数据集

javascript - Angular 2 以编程方式绑定(bind) ngIf

javascript - 如何在 ng-change 中保留原始值

forms - 如何在领域驱动设计中的表单和值对象之间共享验证?

javascript - javascript函数驻留在哪里以及它的值是什么

javascript - 使用 Foundation for Apps, Controller 和 ng-repeat 出现问题

javascript - 使用 x 可编辑内联模式自动保存在数据库中,无需在表上添加提交按钮