onSubmit 返回 false 不起作用答案

【问题标题】：onSubmit returning false is not workingonSubmit 返回 false 不起作用
【发布时间】：2010-03-30 09:04:11
【问题描述】：

我完全糊涂了...我发誓这昨天还在工作...我今天早上醒来，我的所有表格都停止了在我的项目中工作。

所有表单都有一个“onsubmit”到一个返回 false 的函数，因为它是一个 ajax 调用，所以表单永远不会发送。

经过大量测试，我将问题简化为这段代码：

<html>
<head>
<script type="text/javascript">
 function sub()
 {
  alert ("MIC!");
  return false;
 }
</script> 
</head>
<body>

<form method = "post" id = "form1" onsubmit = "return sub()">
 input: <input type="text" name="input1" >
    <a href="#" onClick="document.getElementById('form1').submit();">button</a> 
</form>

</body>
</html>

我发誓这完美无缺，但今天也不行：D

为什么如果我按下按钮发送表单？

我知道这完全是一个新手问题，但我被卡住了

谢谢！

【问题讨论】：

标签： return onsubmit

【解决方案1】：

如果您以编程方式调用 submit()，浏览器不要调用表单上的 onSubmit 事件。

【讨论】：

安迪...我发誓昨天还在工作 :) 我有一个具有这种结构的整个项目，但从未提交过表格...它必须是其他东西... :P
使用此代码不会触发提交事件。三个单独的答案都这么说！要么你错了，要么你的测试用例不能充分代表你的实际代码。
您确定没有实际的提交按钮吗？因为那会起作用。也许您昨天更改了锚点的提交按钮作为增强功能？你有源代码控制系统吗？其他开发人员是否也在从事可能会改变它的项目？

【解决方案2】：

'submit()' 函数似乎绕过了 Firefox 和 IE8 中的 'form' 标签 'onsubmit' 事件。如果您使用提交按钮，那么它会按预期工作：

<html>
<head>
<script type="text/javascript">
 function sub()
 {
  alert ("MIC!");
  return false;
 }
</script> 
</head>
<body>

<form method = "post" action="http://google.com" id = "form1" onsubmit = "return sub();">
 input: <input type="text" name="input1" >
     <input type="submit">
</form>

</body>
</html>

【讨论】：

【解决方案3】：

onsubmit 事件仅在正常提交表单时触发。调用 JavaScript submit() 方法时不会触发。

最好的解决方案是在这里使用普通的提交按钮。

如果您想继续使用指向页面顶部的链接（不是unobtrusive、progressive 或优雅的），那么您需要显式调用sub() 函数并测试其返回值在决定是否应该致电submit() 之前。

【讨论】：

【解决方案4】：

你可以使用 jquery preventDefault 方法。

$(function () {
        $('#repForm').bind('submit', function (e) {
            var isValid = true;
            if (btnname == 'test') {
                isValid = ValidateEmailID();
            }
            else {
                isValid = ValidateSomething();
            }

            if (!isValid) {
                e.preventDefault();
            }
        });
    });

【讨论】：

【解决方案5】：

尝试像这样改变你的“按钮”代码

<a href="#" onClick="return document.getElementById('form1').onsubmit();">button</a>

【讨论】：

【解决方案6】：

我怀疑他想使用非提交类型的表单按钮。在这种情况下，您还可以使用：

 <input type="button" value="Submit" onclick="if( sub()) document.getElementById('form1').submit()">

我给出的另一个提示是在所有形式中使用name 属性，因为它更容易使用： document.form1.submit() 而不是 document.getElementById('form1').submit()。它是跨浏览器并且适用于所有这些。 getElementById 很棒，但对于表单不是必需的。

【讨论】：

【解决方案7】：

我遇到了同样的问题（我使用的是 IE 8），

以下代码不起作用：

<form method="post" id="form1" onsubmit="sub">
<form method="post" id="form1" onsubmit="sub()">
<form method="post" id="form1" onsubmit="return sub()">

以下代码正在运行，

<form method="post" id="form1" onsubmit="return(sub())">

我只是按照样本here

请注意：

提交方法不调用 onsubmit 事件处理程序。

使用 INPUT TYPE=submit、INPUT TYPE=image 或 BUTTON TYPE=submit 对象提交表单。

【讨论】：

【解决方案8】：

在表单标签的所有 onsubmit 语句中添加“return”...例如onsubmit="return validate_function()" 这样，验证函数中的 return false 或 return true 作为结果发布到 onsubmit 中的 return 命令。

【讨论】：

【解决方案9】：

<head>
  <script type="text/javascript">
   function sub(e)
   {
     e.preventDefault();
     alert ("MIC!");
     return false;
   }
  </script> 
 </head>
 <body>
   <form method = "post" id = "form1" onsubmit = "return sub(event);">
   </form>

【讨论】：

对不起，我想，代码有点混乱，我试图表明当 onsubmit 事件忽略函数的返回值时，你可以阻止默认行为，所以表单是未使用 e.preventDefault 提交。在这种情况下，函数不需要返回任何东西

【解决方案10】：

检查基本语法和结构...然后检查页面上的其他表单或没有表单的输入框...我遇到了同样的问题（或类似问题：在输入框中按 Enter 会导致表单发送） ...

我复制粘贴了上面的示例并加载了页面。他们工作了，而我的没有，所以我调整了格式，甚至重写了它。

【讨论】：

为了使其正常工作，您做了哪些更改？查看how to answer，了解如何在 Stack Overflow 上回答问题。