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

Question

这里有几个问题：

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

Answer 1

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

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

要捕获提交：

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

注意：如果你想阻止表单提交，你将someFunctionreturn false。

提交表格：

form.submit();

Answer 2

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

IEattachEvent(event, callback)改为使用。

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

Answer 3

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

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

Answer 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
}

Answer 5

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

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

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

要在使用提交按钮 (<input type='submit' >) 时捕获提交：

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

注意：如果你想阻止表单提交，你将validationFunctionreturn false。

通过 javascript 提交表单：

form.submit();

注意：如果您使用 <input type="button" onclick="form.submit()" />，则不会调用使用 attachEvent 添加的 onsubmit 事件处理程序。因此，您应该使用类似的东西：

<input type="button" onclick="if (validationfunction()) form.submit();" />

或者，如果您有一个按钮：

您可以添加 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();
            }
        };
    }


    }
}