Question

我想知道如何从表单中获取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>

Answer 1

改变这个：

formCheck.onSubmit = doMapping()

到此：

formCheck.onSubmit = doMapping

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

编辑：您还需要将doMapping函数的声明移到该函数的赋值之上，就像这样的onsubmit事件（好抓住tvanfosson！）：

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

formCheck.onSubmit = doMapping();

但是如果在其他地方没有使用doMapping函数，你可以将doMapping函数声明为这样的匿名函数：

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

对我来说似乎有点干净。

Answer 2

使用jQuery。

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

Answer 3

谢谢！实际上我用另一种方式解决了它，使用Andrew的建议和window.onload事件 - 我认为问题部分是因为元素实际上没有加载。

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

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

如何获取表单的onSubmit事件？

3 个答案: