8

I have a form that will be submitted by javascript code triggered in "onsubmit" of the tag. Works fine on all browsers - but not on IE7/IE8.

What can I do?

<form action="/dosomething.htm" method="GET" onsubmit="submitmyform();return false">
  [...]
  <input type="submit" value="Go">
</form>
Dirk Paessler
  • 2,848
  • 4
  • 21
  • 16
  • There's no simple reason for `return false;` not to work as it should. We need to see your code to get a better look at what's going on. **edit** we need to see the code for `submitmyform()`, as it's likely an error is occurring that prevents the `return false;` from being executed. – Andy E Nov 02 '10 at 13:44

14 Answers14

11

I'm going to nitpick this. If you want to handle form submissions, that is what submit is for. If the user hits enter in one of your fields, your onclick handler will be totally avoided. Here is a basic example of doing this in a non-obtrusive way.

<form name="myform">
  <input type="submit" />
</form>
<script>
  document.myform.onsubmit = function(){
    alert('handled');
    return false;
  }
</script>

This can be made a lot simpler with jQuery, same form...

$("form[name=myform]").bind('submit',function(){
   alert('handled');
   return false;
});
Drew
  • 4,683
  • 4
  • 35
  • 50
  • 2
    That's not non-obtrusive either, if you had a mechanism where you can automatically bind an event to a function without knowing any specific implementation details, then you are. I.e. having `document.myform` or `form[name=myform]` is *just as* obtrusive as having an onsubmit attribute in the HTML, except in the opposite direction. What you need is a way of discovering the forms, discovering the validation functions for it (perhaps by naming convention `validateMyForm()`), and therefore binding automatically and generically. If you really want to be non-obtrusive. It would be reusable too. – Lee Kowalkowski Jul 18 '12 at 10:51
  • If you had 2 forms on a page and each required different on submit logic, you'd have to have some way of denoting which form gets which function. I think that's essentially what's been done in this answer via the name attribute. You could also use a data-* attribute. I think for cases like this, 'unobtrusive JavaScript' refers to not using js inline in markup rather than having strictly decoupled markup and JavaScript. – jinglesthula May 02 '14 at 17:45
6

Several ideas proposed here work (because they use different ways to write correct code), but there is a much easier answer

OP wrote :

onsubmit="submitmyform();"

instead of :

onsubmit="return submitmyform();"

That's it.

Thibault Witzig
  • 2,060
  • 2
  • 19
  • 30
3

I don't think your return false is ever reached, as it comes after what's returned from your function.

<form action="/dosomething.htm" method="GET" onsubmit="submitmyform();return false">

Make sure that you return false inside of your 'submitmyform()' function else, if it's not then it could be returning true to you form obsubmit event.

Ally
  • 4,894
  • 8
  • 37
  • 45
2
<script type="text/javascript">
<!--

function submitHandler()
{
  alert(0);
  return false;
}

window.onload=function(){document.getElementById("formid").attachEvent("onsubmit", submitHandler);}
-->
</script>

<form action="/dosomething.htm" method="GET" id="formid">
  [...]
  <input type="submit" value="Go">
</form>

The attach event method only works only for IE7/8. If you want a reliable cross browser solution you should use addEventListener as an alternative.

Hope it helps

Sergiu
  • 23
  • 4
2

try this. work for me.

onSubmit="javascript:return false"

1

To cancel an event in legacy IE, you need to set returnValue to false. Simply returning false won't do it. I don't know why Microsoft implemented it in this way.

function validateForm(evt) {
//  if form is not valid
    if(!condition) {
    //  if evt has preventDefault
        if(evt.preventDefault)
            { event.preventDefault(); }
    //  if evt has returnValue
        else if(evt.returnValue)
            { evt.returnValue = false; }
    //  fallback
        else
            { return false; }
    }
}

//  assume form is reference to your form
form.attachEvent('onsubmit',validateForm);
Dissident Rage
  • 2,610
  • 1
  • 27
  • 33
0

I had the same error and when I turned on the console, it never came. So I figured out, it was the console, that wasnt known by the internet explorer as long as it is turned off. Simply add a dummy console to the window with the following code (if there isnt already one):

var myconsole = {log : function(param){}}
window.console = window.console || myconsole;

With this you could get in trouble, if you want to have microsofts javascript console. Then just comment the lines out. But now, the console object is not undefined anymore on the whole site.

redestructa
  • 1,182
  • 1
  • 11
  • 11
0
<form action="/dosomething.htm" method="GET" onsubmit="return submitmyform(this)">
     [...]
     <input type="submit" value="Go">
   </form>

this works fine... the function must return true or false

Atiqur
  • 81
  • 1
  • 2
0

The solution for us was to move the javascript event from "onsubmit" of the form to "onclick" of the submit button.

<form action="/dosomething.htm" method="GET">
  [...]
  <input type="submit" value="Go" onclick="submitmyform();return false">
</form>
Dirk Paessler
  • 2,848
  • 4
  • 21
  • 16
  • 4
    This will only prevent form submissions that occur by clicking or pressing the enter key on that submit button. Pressing the enter key in an input control inside the form would work around it. – Andy E Nov 02 '10 at 13:47
  • 1
    I also thought that would be the case. But... that's not what I see here. – Dirk Paessler Nov 02 '10 at 14:06
  • @AndyE It does in fact prevent even when hitting enter... check it out – yoel halb Feb 04 '13 at 18:05
  • @yohal: you really should test in more browsers before posting such comments ;-) I just tested the latest Firefox and IE8 on my linux box and neither fire the submit button's `onclick` event for me. Chrome does, though, but it goes to show that you really can't trust browsers to agree on things unless they're written in the specifications. – Andy E Feb 04 '13 at 19:25
  • @AndyE Sorry I have not tested on linux, but on windows I have tested in all major browsers (IE9, FF, Chrome, Safari and Opera), regarding specifications there are no specifications for onsubmit either, see http://stackoverflow.com/questions/128923/whats-the-effect-of-adding-return-false-to-an-onclick-event – yoel halb Feb 04 '13 at 21:06
  • @AndyE See a more complete solution by intercepting the enter key in my answer on http://stackoverflow.com/questions/10572350/jquery-submit-function-not-working-properly/16157474#16157474 – yoel halb Apr 23 '13 at 18:31
-1

In fact, because you write submitmyform();return false only submitmyform is evaluated.

In the case of two commands, you will have to put them between braces like this

{submitmyform();return false;}

so that both are evaluated.

Bart
  • 19,692
  • 7
  • 68
  • 77
Tibi
  • 23
  • 1
-2

If you want IE to be standards compliant, you'll have to tell it which standard it's supposed to comply with in a declaration.

Without one it's going to be endless frustration to get it to do what you want. With one, most of the frustration goes away because it starts working as every other browser.

Henrik
  • 287
  • 3
  • 2
-2
document.forms.userFormRegisterr.onsubmit =  function(e){
    return false;
};
T J
  • 42,762
  • 13
  • 83
  • 138
-2

I think that the problem is in return false you need to return it from your 'onsubmit' function

see example.

This form will never be submitted in IE 7/8 as well.

 <form action="acknowledgement.html" method="get" onsubmit="verify();">
        <input type="submit" name="submit"
         VALUE="Submit"> 
        </form>

<script language="javscript">
function verify(){

return false;
}
</script>

Danny.

danny.lesnik
  • 18,479
  • 29
  • 135
  • 200
  • 2
    This won't work. The `verify()` function returns control to the `onsubmit` function, so it is the `onsubmit` function that needs to return false to cancel the default action. – Andy E Nov 02 '10 at 14:01
-2

It works - check W3Scools example (taken from ) http://www.w3schools.com/js/js_form_validation.asp

<html>
<head>
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
  {
  if (value==null||value=="")
    {
    alert(alerttxt);return false;
    }
  else
    {
    return true;
    }
  }
}

function validate_form(thisform)
{
with (thisform)
  {
  if (validate_required(email,"Email must be filled out!")==false)
  {email.focus();return false;}
  }
}
</script>
</head>

<body>
<form action="submit.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>

</html>
SimSimY
  • 3,616
  • 2
  • 30
  • 35