Click here to Skip to main content
11,716,938 members (86,039 online)
Click here to Skip to main content

redirecting when submitting in IE

, 28 Apr 2008 CPOL 12.6K 7
Rate this:
Please Sign up or sign in to vote.
how to redirect in IE(7) when submitting a form

Introduction

The goal of the code is to redirect to a specific URL when submitting a form in IE.

That sounds straightforward doesn't it? But there's a catch. Actually, a few catches. The solution is simple and can be written in 5 statements, but the time it would take to get these 5 statements might take a bit longer than just writing those lines.

Background

I was asked to create a search form that redirects when it's submitted. The first version just had an onclick event on the button but that kind of only solves half the problem.

If the user presses 'enter' the form gets submitted but the onclick is never called (which is fair since the button was never clicked) so I thought I'd just move the eventhandler to the forms onsubmit.

(Those of you not coding .NET skip the next paragraph)

Then I encountered my first problem. The JScript code I needed to call is specific to a page but the form is declared in a master page so setting the onsubmit handler is not straightforward but I'll show one possible solution.

After figuring out how to get the eventhandler in place, I encountered the second problem.
When you're submitting and redirecting at the "same time" in IE, the post action wins so you end up in the action location (note: changing the action and method was not an option for us).

One might consider just cancelling the submission but that turned out to be not so straightforward.

The Code

The first part for the master page is only needed if you actually have a master page in play otherwise only the submit function is needed. First let's look at the onsubmit attribute of the form:

if(formSubmit){ 
  var shouldPost = new referenceBoolean();
  formSubmit(shouldPost);
  return shouldPost.value;
}

A few things happen here: first we test if the method formSubmit is actually declared taking advantage of null being treated as false. This ensures that the method will only be invoked on a child page if it's actually defined (omitting will give the user a warning that an error occurred if the method is not declared). Next we instantiate a new object. The implementation of the 'type' looks like this:

function referenceBoolean(){
 this.value = true;
} 

This just holds a boolean value. Why we need it is explained later, for now just know it's just the type of object that formSubmit expects. After instantiating the object we pass it to formSubmit and after the call we return the value of our shouldPost.

If shouldPost.value is true, the form is submitted, if the value is false it's not submitted. Why go this long way of instantiating an object and passing that instead of just returning the value from the method? I'll tell you.

The first attempt at the submit handler I made looked like this:

function formSubmit(){
  window.location.href = "redirect url";
}

This actually works in FF but not in IE. If there's a redirect in the onsubmit in FF that effectively short circuits the post back which then never happens. But in IE things are different. The post back actually short circuits the redirect, so from the user's perspective the redirect never happens.

Second attemtpt:

function formSubmit(){
  window.location.href = "redirect url";
  return false;
}

Well you would think this solved the problem, right? I know I did, but actually the result of this code in IE is the same as what I used in my first attempt. The problem is that the redirect for some reason implicitly returns from the method with true (I'm not talking about what might actually happen but how the system acts). Calling the above still submits the form and hence the redirect never happens (from the user's point of view).

That then led to my third attempt:

function formSubmit(shouldPost){
  shouldPost.value = false;
  window.location.href = "redirect url";
  return shouldPost.value;
} 

The thing to notice here is that the value of shouldPost is set before the redirect and is only returned for completeness.

The reason why this works is also the reason why we're passing an object to the method. Objects are passed by reference so that all changes made to them in the method is reflected anywhere else the same object is used. Basically we're setting our return value before calling the redirect code.

With the third version in place all we need to do is test shouldPost.value instead of the return value and if you take a look in the declaration of the eventhandle that's exactly what happens.

Points of Interest

The part used in the master page can be used as an example on a general way of "inheriting" abstract JavaScript methods from master pages in child pages

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

RuneFS
Architect
Denmark Denmark
No Biography provided

You may also be interested in...

Comments and Discussions

 
GeneralSentences should start with a capital letter Pin
John C28-Apr-08 11:38
memberJohn C28-Apr-08 11:38 
Generalgrammar Pin
J4amieC28-Apr-08 3:00
mvpJ4amieC28-Apr-08 3:00 
JokeRe: grammar Pin
Vasudevan Deepak Kumar28-Apr-08 3:04
memberVasudevan Deepak Kumar28-Apr-08 3:04 
QuestionUsing the code without code? Pin
Maruf Maniruzzaman28-Apr-08 2:58
memberMaruf Maniruzzaman28-Apr-08 2:58 
AnswerRe: Using the code without code? [modified] Pin
RuneFS28-Apr-08 3:09
memberRuneFS28-Apr-08 3:09 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150901.1 | Last Updated 28 Apr 2008
Article Copyright 2008 by RuneFS
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid