Login/Register
onSubmit returning false is not working
Asked Answered
returnonsubmit
H

11

15

I'm completely confused ... I'd swear this was working yesterday ... I woke up this morning and all my forms stopped to work in my project.

All the forms have a "onsubmit" to a function that returns false since it's an ajax call, so the form is never sent.

After a lot of tests, I simplified the question to this piece of code:

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

I would swear that this works perfectly, but today is nor working :D

Why if I press the button the form is sent ?

I know it's a total newbie question, but I'm stuck

Thank you !

Hunnicutt answered 30/3, 2010 at 9:4 Comment(0)
R
14

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

Ruffina answered 30/3, 2010 at 9:12 Comment(3)
Andy ... I swear you that was working yesterday :) I have a whole project with those kind of structures, and the form was never submitted ... It has to be other thing ... :P – Hunnicutt
The submit event would not fire with this code. THREE separate answers all say that! Either you are wrong, or your test case doesn't sufficiently represent your actual code. – Medwin
Are you sure you didn't have an actual submit button? As that would then work. Perhaps you changed your submit buttons for anchors as an enhancement yesterday? Do you have a source control system? Are other developers also working on the project that could have changed it? – Ruffina
S
8

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>
Stewardson answered 30/3, 2010 at 9:22 Comment(0)
M
5

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.

Medwin answered 30/3, 2010 at 9:9 Comment(0)
O
4

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();
            }
        });
    });
Ovary answered 17/2, 2012 at 11:18 Comment(0)
P
2

Try to change you "button" code like that

<a href="#" onClick="return document.getElementById('form1').onsubmit();">button</a>
Placer answered 30/3, 2010 at 9:8 Comment(0)
B
0

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.

Bithia answered 22/1, 2013 at 23:6 Comment(0)
L
0

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.

Lungi answered 26/9, 2014 at 2:36 Comment(0)
M
0

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.

Mallorie answered 22/8, 2015 at 14:17 Comment(0)
T
0
<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>
Titillate answered 27/10, 2018 at 1:19 Comment(1)
Im sorry I think, the code was a a little confusing, what I was trying to show its that when returning value of the function is ignored by the onsubmit event you can prevent the default behavior so the form is not submitted with e.preventDefault. In this case function doesnt need to return anything – Titillate
F
0

Another reason return false might not work is that it might not reach it because of a JavaScript error. For example, this code submits the form because nonexistent is not defined, and accessing an element on it throws an error.

<script>
function validate() {
  var a = nonexistent.something; // Throws an error
  return false; // Never executed
}
</script>
<form onsubmit="return validate()">
  <input type="text" name="name" />
  <button type="submit" />
</form>
Facture answered 13/5, 2022 at 10:7 Comment(0)
A
-4

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.

Andersonandert answered 5/3, 2013 at 2:43 Comment(1)
What changes did you make in order for it to work? Take a look at how to answer, for an understanding how to answer questions on Stack Overflow. – Arson

© 2022 - 2024 — McMap. All rights reserved.