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.
preventDefaultis normally unsupported by IE, but jQuery is cross-browser compatible, so it makes it available to every browser. Soevent.preventDefault()should work. Are you sure you are passing theeventobject to thesubmithandler?submitevent the form will be submitted as thereturn falsewill never be reached.. make sure you don't get such error.$('form').submit(function ...and we'll try to see what might be the problem.event.preventDefault()as early as possible. Due to the reason @Shadow explained.