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 (eg 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.
3 answers
solution1
1 2012-09-18 09:53:39
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?');"
solution2
1 ACCPTED 2011-01-25 11:20:10
- 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.
solution3
0 2011-01-25 11:23:18
$(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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.