Redirecting to a new URL using javascript

Question

I am trying to redirect my page to a different url depending on what the user selects from the drop down list. If the user selects "A", the url is the default URL that's in the action attribute of the form but if the user selects "B", I want to redirect it to a different url.

My problem has been no matter what I do, it always redirects to the default URL(ie oldUrl.do) even if I select "B" from the drop down.

What can I do to point it to the newUrl.do?

Note: I am using Struts 1.2 and testing it on IE8.

My jsp page:

<form name="myForm" method="post" action="oldUrl.do" id="myForm">

    <select name="modeOfT" id="choice"><option value="A">A</option>
        <option value="A">A</option>
        <option value="B">B</option>
    </select> 

    <input type="submit" name="submitBtn" onclick="submitForm()">
</form>

Javascript function:

function submitForm(){
    var form = document.getElementById("myForm");
    var mode = document.getElementById("choice");
    if(mode.value == "B"){
        $(form).attr("action", "newUrl.do");
    }
}

Following are other things I have tried and they still take me to "oldUrl.do":

document.location.href("newUrl.do");
window.location.href="newUrl.do";
top.location.href="newUrl.do";
parent.location.href="newUrl.do";
window.location.replace("newUrl.do");
window.location="newUrl.do";

Your code seems to work fine http://jsfiddle.net/xv3Uf/5/ (I still suggest using the submit handler as in my answer) — Ruan Mendes, Feb 12 '13 at 18:11
@javaStudent Please provide some feedback on what we've told you. I'm curious to find out what wasn't working... — Ruan Mendes, Feb 12 '13 at 18:59

Ruan Mendes · Answer 1 · 2013-02-12T18:04:59.190

4

You should not handle the click event. To deal with a form being submitted you should use the submit event, for this and many other reasons (people can use enter, they can hit space while focus in on the submit button)

Working example http://jsfiddle.net/xv3Uf/2/

HTML

<form name="myForm" method="post" action="oldUrl.do" id="myForm" onsubmit="return submitForm()" >

JS

function submitForm(){
    var form = document.getElementById("myForm");
    var mode = document.getElementById("choice");
    if(mode.value == "B"){
        form.action = "newUrl.do";
    }
}

And since you're already using jQuery, why not drink the kool-aid and stop the pre-enlightenment practice of setting JS handlers in the HTML? http://jsfiddle.net/xv3Uf/3/

<form name="myForm" method="post" action="oldUrl.do" id="myForm">

JS

$('#myForm').submit(function(e){
    if ( $('#choice').val() === 'B') {
        this.action = 'newUrl.do'
    }
});

edited Feb 12 '13 at 18:04

answered Feb 12 '13 at 17:45

Ruan Mendes

90,375
31
153
217

Thank you for the answer. I tried your first approach and it seems to work in FF but gives me the following error in IE8 when I debug it "Error Message: Object doesn't support this property or method. Line: 804". At line 804 is stmt: form.action = "newUrl.do"; – Susie Feb 12 '13 at 19:03
@javaStudent Take a look at this http://stackoverflow.com/questions/266794/javascript-form-submit-object-doesnt-support-this-property-or-method-ie7 This is saying that similar problems can come from the fact that IE automatically created globals out of ids. Also, it's hard to help when you don't show what the actual code you tried is. I would also suggest you remove the name from the form (suggested in the answer I linked to). – Ruan Mendes Feb 12 '13 at 19:09
@javaStudent You can also try `form.setAttribute('action', 'newUrl.do')` http://stackoverflow.com/questions/12243428/javascript-form-field-submit-object-doesnt-support-this-property-or-method-in – Ruan Mendes Feb 12 '13 at 20:17
I tried the setAttribute(). Now it doesn't give any error like before in IE but it still ends up at the same url. Works fine with FF. Thank you. – Susie Feb 12 '13 at 21:35
If it doesn't work **only** in IE, dont worry. It exists only to give you bad headaches ;) – UltraInstinct Feb 12 '13 at 22:55
@JuanMendes I wouldn't say your solution is wrong -- just that it sends unneeded form data to "newUrl.do", in case OP doesn't want to *send data* to new URLs. In that case, a plain javascript'ish redirect would do. – UltraInstinct Feb 12 '13 at 23:01

score 3 · Answer 2 · answered Feb 12 '13 at 17:42

3

Turn the <submit> into a regular <button>.

In the submitForm() function, at the end, call:

document.forms["myForm"].submit();

answered Feb 12 '13 at 17:42

mightyrick

910
4
6

What difference does making it a button make? A button without `type="button"` behaves exactly like a submit button – Ruan Mendes Feb 12 '13 at 17:57
calling `form.submit()` is a workaround for not understanding what's going on. The form is already in the process of being submitted when you click the button. The intention of this code is to undo something that the submit button gives you and implement it yourself. The `onsubmit` handler is the *correct* place to do it, just modify the `action` of the form and you're done – Ruan Mendes Feb 12 '13 at 17:59
@JuanMendes The code example given is only modifying a form field (with the intent to submit). It is not vetoing the submit. You are inferring a requirement that is not there. If OP intends to veto the submission, then yes, you are correct. But that isn't what was stated. – mightyrick Feb 12 '13 at 18:15
Vetoing the submission is not the only reason to use the submit event. It makes the most sense because it's the most semantic, it's what fires when the form is submitted, no matter how it's submitted (not always a click) – Ruan Mendes Feb 12 '13 at 18:20
@RickGrashel I tried this. It works in FF but not in IE. In IE, it still redirects to the same url which is "oldUrl.do" – Susie Feb 12 '13 at 22:04

score 3 · Accepted Answer · answered Feb 12 '13 at 17:43

3

You could:

Have the server send back an HTTP/redirect header depending on what the user selects in the form.
If you want the redirect to be handled at the browser, use an "onsubmit" attribute, and return a false value. You can handle the redirection within this function using window.location = <URL>;
```
<form onsubmit="return myJSFunc()" .. >
   ...
   <input type="submit">
</form>
```

answered Feb 12 '13 at 17:43

UltraInstinct

43,308
12
81
104

This worked. I used the window.location='newUrl.do'; and then return false; Returning false was the key. Can you please tell me why this worked? I tried @Juan suggestion and it worked for FF but not in IE. – Susie Feb 12 '13 at 22:45
@javaStudent Because, it prevents default action which in this case is submitting the form. – UltraInstinct Feb 12 '13 at 22:53
@javaStudent If your problem is solved, please "accept" the answer that solved your problem. – UltraInstinct Feb 12 '13 at 23:06

Redirecting to a new URL using javascript

3 Answers3