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.
1 Answer