onSubmit returning false is not working

|▌冷眼眸甩不掉的悲伤 提交于 2019-11-27 22:57:18

Browsers do not call the onSubmit event on the form if you call submit() programmatically.

user299600

It seems that the 'submit()' function bypasses the 'form' tags 'onsubmit' event in Firefox and IE8. If you use a submit button, then it works as expected:

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

The onsubmit event only fires for normal form submissions. It does not fire when the JavaScript submit() method is called.

The best solution is to use a normal submit button here.

If you want to continue with using a link to the top of the page (which isn't unobtrusive, progressive, or graceful) then you need to call the sub() function explicitly and test its return value before deciding if you should call submit() or not.

Antony Blazer

You could use jquery preventDefault method.

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

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

Try to change you "button" code like that

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

I suspect he wanted to use a form button that was not of the submit type. In this case, you can also use:

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

Another tip I give is to use the name attribute in all forms, as it is much easier to use: document.form1.submit() instead of document.getElementById('form1').submit(). It is crossbrowser and work in all of them. getElementById is great but not necessary for forms.

I've got the same issue (I was using IE 8),

following code is NOT working:

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

and following code is WORKING,

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

I just follow the sample here

And please note that:

The submit method does not invoke the onsubmit event handler.

Submit a form using the INPUT TYPE=submit, INPUT TYPE=image, or BUTTON TYPE=submit object.

Add "return" in all your onsubmit statements in your form tag...e.g. onsubmit="return validate_function()" this way the return false or return true in your validate function is posted as the result to the return command in your onsubmit.

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

Check basic syntaxes and structures... then Check your other forms on your page or input boxes with no form... I had the same problem (or similar: pressing enter in the input box would cause the form to send) ...

I copy pasted the samples above and loaded the page. They worked and mine did not, so i tweaked the formatting and even rewrote it.

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!