在表单提交上执行功能答案

【问题标题】：Perform function on form submit在表单提交上执行功能
【发布时间】：2010-06-15 15:58:44
【问题描述】：

希望这是一个非常简单的问题！我有在 jQuery 中工作的代码来侦听要提交的页面上的特定表单并在提交时执行警报.. 即：表单本身没有 ID，因此我将表单定位在特定的分区 ID。

$("#content form").submit(function() {
    alert("lorem ipsum dolor?");
});

在不使用 jquery 的情况下单独在 javascript 中执行此操作的语法是什么？例如，我有这段代码（如下），只是不确定如何监听要提交的表单以执行操作..

var submitform = document.getElementById("content").getElementsByTagName("form");

谢谢！

【问题讨论】：

标签： javascript jquery forms target

【解决方案1】：

要在跨浏览器中做到这一点，而不是破坏性的方式，它需要一些代码：

var submitform = document.getElementById("content").getElementsByTagName("form")[0],
    callback = function(){
       alert("lorem ipsum dolor?");
    };


if(window.addEventListener){
   submitform.addEventListener("submit", callback, false); // Most modern browsers
} else if (window.attachEvent){
   submitform.attachEvent("onsubmit", callback); // IE
} else {
   submitform.onsubmit = callback; // Destroys other handlers
}

【讨论】：

这比我的要好，因为 jQuery 版本给您的额外好处是，如果该事件已经有其他绑定，它会做正确的事情；我给的代码（和 Marcel 给的）会覆盖那些其他的绑定。 Doug 的代码，就像 jQuery 的一样，只是简单地将你的新绑定添加到任何已经存在的绑定。（当然，有时您知道您的代码是该事件的唯一事件处理程序，或者您想要替换任何现有的事件处理程序。）
根据this rather old article，Opera 在事件捕获方面遇到了麻烦；相反，您应该使用冒泡；文章建议将第三个参数设置为false。
@Marcel 感谢您提供的信息，我更新了答案以将其更改为 false！
谢谢！这很有帮助。我很高兴我问了，因为即使我自己拼凑起来，我也会忘记跨浏览器。再次感谢大家的帮助。

【解决方案2】：

submitform.onSubmit = function() {
    alert("lorem ipsum dolor?");
}

【讨论】：

不要忘记添加最后一个分号。此外，在 OP 的问题中，getElementsByTagName 返回一个表单元素数组，而不是您可以附加事件处理程序的表单元素。

【解决方案3】：

首先，你应该知道getElementsByTagName会返回一个NodeList，你需要获取第一个DOM元素，例如：

var submitForm = document.getElementById("content")
                         .getElementsByTagName("form")[0];

然后就可以绑定submit事件了：

submitForm.onsubmit = function () {
  alert("lorem ipsum dolor?");
};

【讨论】：

【解决方案4】：

您可以使用onsubmit 处理程序。

【讨论】：