捕获 submit() 方法答案

【问题标题】：capture submit() method捕获 submit() 方法
【发布时间】：2012-10-10 11:06:50
【问题描述】：

我有这样的表格：

<form method="POST" action="page.html" onsubmit="alert('foo'); // validate();" name="foobar">
...
</form>

还有一个类似的链接：

<div onclick="document.foobar.submit();">click me</div>

如何捕获 submit() 方法并调用我的验证函数？

JsBin example

【问题讨论】：

标签： javascript submit capture

【解决方案1】：

您可以从 html 本身调用方法。修改jsbin。您可以致电submitHandler 并传递表单参考，而不是点击提交表单。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
  <script type="text/javascript">
    function validate(){

    }

    function submitHandler(form){
      validate();
      alert('foo');

}
    window.onload = function(){
        document.foobar.submit = submitHandler;
    }
</script>

</head>
<body>
    <form method="POST" action="page.html" onsubmit="submitHandler(this);" name="foobar">
      <input type="text" />
    </form>

    <div onclick="document.foobar.submit()">click me</div>
</body>    
</html>

【讨论】：

听起来不错，但我无法更改提交方法。（那不是我们的代码。）
我无法更改：<div onclick="document.foobar.submit();" ... 如果不更改此行，您有什么想法吗？
@SteffenMaas 我进行了更改。我覆盖了 document.foobar.submit 方法。你还好吗？

【解决方案2】：

使用 id 唯一标识您的表单

document.getElementById('formid').onsubmit = function() {
    // You have captured the submit method now do what you need
};

Demo

【讨论】：

@SteffenMaas，我的代码中有错字。并且您应该捕获正在触发的提交事件，而不是提交功能的执行。
我在 FF 和 Opera 中尝试了你的演示，但是当我点击“点击我”链接时，警报没有出现。
@SteffenMaas，使用提交按钮查看警报框。关于链接没有触发提交，我自己对此感到困惑。
关注this 问题以了解为什么onclick 不起作用。
好的，点击提交按钮，我看到了警告框。我很好奇您关于触发事件的解决方案。 :)

【解决方案3】：

您可以使用 jQuery .submit() 处理程序。

$('form').submit(function(evt) {
  evt.preventDefault();
  alert('Handler for .submit() called.');
  // Validate function returns false or true
});

【讨论】：

【解决方案4】：

试试这个：

<script type="text/javascript">
function addEventsToHTML(){
    var form = document.getElementById('foobar');
    form.onsubmit = submitHandler;
    function submitHandler(){
        validate();
    }
}
window.onload = addEventsToHTML;
</script>

【讨论】：