在 Javascript 中捕获表单提交的事件是什么？答案

【问题标题】：What is the event to catch form submission in Javascript?在 Javascript 中捕获表单提交的事件是什么？
【发布时间】：2009-05-31 06:31:02
【问题描述】：

这里有几个问题：

我想知道在表单提交时我使用什么事件来执行一些 Javascript（进行一些验证）？
完成验证后，如何使用 Javascript 提交表单？

【问题讨论】：

标签： javascript validation dom-events

【解决方案1】：

假设您有一个名为 myForm 的表单：

var form = document.getElementById('myForm');

捕捉提交：

try {
    form.addEventListener("submit", someFunction, false);
} catch(e) {
    form.attachEvent("onsubmit", someFunction); //Internet Explorer 8-
}

注意：如果你想阻止表单提交，你让someFunction返回false。

提交表单：

form.submit();

【讨论】：

这不起作用。想知道为什么这是赞成的吗？ form.submit() 与的作用不同尝试在jsfiddle.net/RgRwp/18 运行此代码
@Serhiy：我有没有声称它确实如此？问题是Once I have done my validation, how do I then submit the form in javascript ? 我认为这回答了那个问题。
我猜不是。我猜你正确回答了这两个问题。只是它们不能相互结合。这让我有点恼火，因为这种组合在过去浪费了我很多时间，我讨厌有人从那个洞里走下去。我想我应该只是编辑答案而不是在 cmets 中抱怨。

【解决方案2】：

您可以使用 addEventListener(event, callback)，但 Internet Explorer 从未正确支持它。

IE 使用 attachEvent(event, callback) 代替。

我强烈建议使用预构建的 addEvent 函数（那里有很多可用的）或 jQuery、Prototype、Mootools 等库，因为它们都内置了出色的事件处理函数。

【讨论】：

【解决方案3】：

如果您使用 jquery，它有一个不错的内置表单提交事件挂钩，可以让生活变得非常轻松。查看以下内容：

http://docs.jquery.com/Events/submit

【讨论】：

【解决方案4】：

1) 您在寻找OnSubmit 活动吗？

2) 您可以在 onsubmit 事件上调用类似 validate() 的函数，如果验证失败则返回 false。如果返回 false，则从 onsubmit 函数返回 false。

可能是这样的，

<form name="test" OnSubmit = "return Submit()">

function Submit()
{
return Validate()
}

function Validate()
{
//Validation code goes here
}

【讨论】：

【解决方案5】：

我在 Sasha 的帖子中查看了 Serhiy 的 cmets。 Serhiy 提供的 JsFiddle 示例很有趣，我想写一个描述 Serhiy 提到的行为的答案：

假设您有一个名为 myForm 的表单：

var form = document.getElementById('myForm');

使用提交按钮时捕获提交 ()：

try {
    form.addEventListener("submit", validationFunction, false);
} catch(e) {
    form.attachEvent("onsubmit", validationFunction); //Internet Explorer 8-
}

注意：如果你想阻止表单提交，你让validationFunction返回false。

通过 javascript 提交表单：

form.submit();

注意：如果您使用，则不会调用使用 attachEvent 添加的 onsubmit 事件处理程序。因此，您应该使用类似：

或者如果你有一个按钮：

您可以添加 javascript 以附加到按钮的单击事件。 var btnValidateAndSubmit = document.getElementById("btnValidateAndSubmit");

try {
    btnValidateAndSubmit .addEventListener("click", validationAndSubmitFunction, false);
} catch(e) {
    btnValidateAndSubmit .attachEvent("onclick", validationAndSubmitFunction); //Internet Explorer 8-
}

最后，假设您正在使用 SharePoint Web 表单来编辑列表项，并且您想要将自定义验证添加到 Web 表单。您可以将以下 javascript 添加到 Web 表单中，以便为 OK 按钮的 onclick 添加自定义验证。

var oElements = document.getElementsByTagName("input");
for  (var i=0; i< oElements.length; i++)
{
   var elementName = oElements[i].getAttribute("Title");
   var elementType = oElements[i].getAttribute("type");
   var elementValue = oElements[i].value;

   if (elementType=="button" && elementValue=="OK") 
   {
    var okbutton = oElements[i];

   // alert("typeof okbutton.onclick = "+typeof okbutton.onclick);
    if (typeof okbutton.onclick == "function")
    {
        var previousfunction = okbutton.onclick;

        okbutton.onclick = function()
        {
            if (validateForm())
            {
                previousfunction();
            }
        };

    }
    else
    {
        var aspnetForm = document.getElementById("aspnetForm");
        aspnetForm.attachEvent("onsubmit",validateForm);

         okbutton.onclick = function()
        {
            if (validateForm())
            {
                aspnetForm.submit();
            }
        };
    }


    }
}

【讨论】：