How to cancel submit in IE8?

Question

I've been struggling to make this work for quite some time. I have the following code:

$(document).ready(function (event) {
    $('form').submit(function (event) {
    ...
    });
});

I've found in most of the places, including on the jQuery site, that this will prevent the form from being submitted:

return false;

It doesn't.

Next I've read all related question and answers on this site and tried them all out. In Chrome and Firefox this works:

event.preventDefault();

In IE8 it doesn't. I've read that IE doesn't support this and we should use this:

event.returnValue = false;

Although several people confirm that it worked for them (e.g. event.preventDefault() function not working in IE. Any help?), it doesn't for me. I'm not sure why though. I have a form with a submit button, nothing special, but, even if I put only this piece of code, the form is still submitted:

$(document).ready(function (event) {
    $('form').submit(function (event) {
        event.returnValue = false;
    });
});

Any ideas?

One last thing: I've read that we should test this first before calling preventDefault():

if (event.preventDefault) { event.preventDefault(); }

But in IE8, event.preventDefault exists and no error is thrown. How can that be if it's unsupported by IE?

Update 1: I've tried a simplified version with the following code:

CancelSubmitTest.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CancelSubmitTest.aspx.cs" Inherits="HtmlEditor.CancelSubmitTest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/CancelSubmit.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="SaveButton" runat="server"
            Text="Save" OnClick="SaveButtonClick" CausesValidation="true" ValidationGroup="SomeValidationGroup" />
    </div>
    </form>
</body>
</html>

CancelSubmitTest.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace HtmlEditor
{
    public partial class CancelSubmitTest : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void SaveButtonClick(object sender, EventArgs e)
        {

        }
    }
}

CancelSubmit.js

$(document).ready(function (event) {
    $('form').submit(function (event) {
        event.returnValue = false;
    });
});

It's a pretty straight-forward example. The JavaScript code is executed but the form is still submitted, although I set event.returnValue to false. What am I doing wrong?

Update 2: I've changed the javascript code in the simplified project as follows:

$(document).ready(function (event) {
    $('form').submit(function (event) {
        return false;
    });
});

It works in IE but I still have to figure out why it doesn't work in my application. Thanks to everyone for your help.

Read about [jQuery's event object](http://api.jquery.com/category/events/event-object/). Yes `preventDefault` is normally unsupported by IE, but jQuery is cross-browser compatible, so it makes it available to every browser. So `event.preventDefault()` *should* work. Are you sure you are passing the `event` object to the `submit` handler? — Felix Kling, Jan 25 '11 at 10:59
Note that when you have runtime error in the `submit` event the form will be submitted as the `return false` will never be reached.. make sure you don't get such error. — Shadow The GPT Wizard, Jan 25 '11 at 11:30
post your full code of `$('form').submit(function ...` and we'll try to see what might be the problem. — Shadow The GPT Wizard, Jan 25 '11 at 11:56
The rule is to call `event.preventDefault()` as early as possible. Due to the reason @Shadow explained. — Felix Kling, Jan 25 '11 at 11:57

score 1 · Answer 1 · edited Sep 18 '12 at 10:08

1

return false is equal to event.returnValue

But sometimes this does not work because of DOM compatibility

For Example:

// Not Working
OnClientClick="return confirm('Are you sure want to Delete this file?');"

// Working
OnClientClick="event.returnValue=confirm('Are you sure want to Delete this file?');"

edited Sep 18 '12 at 10:08

Scott

21,211
8
65
72

answered Sep 18 '12 at 09:53

subrat

11
1

score 1 · Accepted Answer · answered Jan 25 '11 at 11:20

1

It does work: http://jsfiddle.net/AEC2U/
The problem is somewhere else in your code.
Post more code/stripped down example where it doesn't work.

answered Jan 25 '11 at 11:20

gblazex

49,155
12
98
91

score 0 · Answer 3 · answered Jan 25 '11 at 11:23

0

$(document).ready(function () {
    $('form').submit(function () {
        alert( 'test' )        
        return false;
    });
});

This works for me no problem in IE8. If anything all I did was get rid of the two passed event variables

answered Jan 25 '11 at 11:23

Andrew Jackman

13,781
7
35
44

How to cancel submit in IE8?

3 Answers3