Javascript does not redirect to URL in an if-else case

Question

I have tried the following javascript page loaders for the sake of trying what's not working:

window.location.href = url
window.location = url
window.location.assign(url)
window.location.redirect(url)

Not one of them makes it to the correct page. And everytime I click on the button, it keeps on catching the first if case even though I clicked the second button. Am I doing something wrong with my if-else statements or the way I redirect it?

I also tried doing onclick=, paired with a switch case, window.location.href still doesn't come through.

My HTML:

<form id="action_option" onsubmit="redirect_to_url()" action="">
        <input type="submit" class="btn btn-primary btn-lg btn-space col-sm-3" value="View Object"/>
        <input type="submit" class="btn btn-primary btn-lg btn-space col-sm-3" value= "View Detail"/>
        <input type="submit" class="btn btn-primary btn-lg btn-space col-sm-4" value="View Inventory"/>
</form>

My Javascript:

 function redirect_to_url(){
    var action_option = document.getElementById("action_option");
    alert(action_option);

    var url = document.URL;
    url = url.slice(0, -1);


    if (action_option.elements[0].click) {
         url = url + "{% url 'objects_view' %}";
         alert(url);
         window.location.href(url);
    }
    else if(action_option.elements[1].click) {
        url = url + "{% url 'details_view' %}";
        alert(url);
        window.location.href(url);
    }
    else {
        url = url + "{% url 'inventory' %}";
        alert(url);
        window.location.href(url);
    }
    return false;
}

Edit:

Console Error -

TypeError: window.location.href is not a function

Removed Error by changing to window.location.href = url but still doesn't redirect.

Possible duplicate of [How to redirect to another webpage?](https://stackoverflow.com/questions/503093/how-to-redirect-to-another-webpage) — MaxG, Nov 25 '17 at 11:49

maxpaj · Answer 1 · 2017-11-25T12:04:01.417

Try window.location.href = url; instead.

If you don't need a form specifically, I would remove the form and do something like this:

<input type="submit" onclick="redirect_to_url(1)" class="btn btn-primary btn-lg btn-space col-sm-3" value="View Object"/>
<input type="submit" onclick="redirect_to_url(2)" class="btn btn-primary btn-lg btn-space col-sm-3" value= "View Detail"/>
<input type="submit" onclick="redirect_to_url(3)" class="btn btn-primary btn-lg btn-space col-sm-4" value="View Inventory"/>

And then in your Javascript:

function redirect_to_url(submitId){

    var url = document.URL;
    url = url.slice(0, -1);

    if (submitId === 1) {
         url = url + "{% url 'objects_view' %}";
         alert(url);
         window.location.href(url);
    }
    else if(submitId === 2) {
        url = url + "{% url 'details_view' %}";
        alert(url);
        window.location.href(url);
    }
    else {
        url = url + "{% url 'inventory' %}";
        alert(url);
        window.location.href(url);
    }
    return false;
}

this only removed my console error. mistyped this one thanks for pointing it out. But still doesn't redirect — Reiion, Nov 25 '17 at 11:56

Onur Yıldırım · Accepted Answer · 2017-11-25T12:08:56.907

You're confusing window.location.assign() method with window.location.href property.

window.location.href = url;  // directs the page to new location
window.location.assign(url); // navigates to a new page

See docs.

And your logic has flaws. You're checking if some element has a click member: if (action_option.elements[0].click) { ... }. This will always return true. So you'll never see the else sections execute.
Don't use multiple submit buttons. Make them regular buttons. Also you don't need a form, you're not submitting anything.

Do something like this:

function redirectToURL(url) {
    window.location.href = url;
}

<button type="button" onclick="redirectToURL('URL 1')">button 1</button>
<button type="button" onclick="redirectToURL('URL 2')">button 2</button>
<button type="button" onclick="redirectToURL('URL 3')">button 3</button>

yeah you're right. however I tried this now, but it only performs `action_option.elements[0].click` even though I clicked the second button element. what do you think? — Reiion, Nov 25 '17 at 11:58
You're right! Thank you for explaining well. I was making it harder than it should be. — Reiion, Nov 25 '17 at 12:13

score 1 · Answer 3 · answered Nov 25 '17 at 12:38

Check below code, I made some changes in your code and its working fine.

 function redirect_to_url(x){
    /*var action_option = document.getElementById("action_option");*/
    //alert(action_option);

    var url = document.URL;
    url = url.slice(0, -1);


    if (x=="View Object") {
         url = url + "{% url 'objects_view' %}";
         alert(url);
   //console.log("objects_view");
         window.location.href=url;
    }
    else if(x=="View Detail") {
        url = url + "{% url 'details_view' %}";
        alert(url);
  //console.log("details_view");
        window.location.href=url;
    }
    else if(x=="View Inventory") {
        url = url + "{% url 'inventory' %}";
        alert(url);
  //console.log("inventory");
        window.location.href=url;
    }
    return false;
}

   <form id="action_option"  action="">
        <input type="button" class="btn btn-primary btn-lg btn-space col-sm-3" value="View Object" onclick="redirect_to_url(this.value)" />
        <input type="button" class="btn btn-primary btn-lg btn-space col-sm-3" value= "View Detail" onclick="redirect_to_url(this.value)"/>
        <input type="button" class="btn btn-primary btn-lg btn-space col-sm-4" value="View Inventory" onclick="redirect_to_url(this.value)"/>
 </form>

score 0 · Answer 4 · answered Nov 25 '17 at 11:48

0

Try document.location = 'URL';

answered Nov 25 '17 at 11:48

Godsayah

134
2
10

score 0 · Answer 5 · answered Nov 25 '17 at 11:57

You are confusing here. window.location.href = url is simulating a link clicked by the user. window.location = url is transfering the user the desired url. window.location.redirect(url) redirects the the user to the desired url with extra boolean param stating if the user should load the page from the server.

Javascript does not redirect to URL in an if-else case

5 Answers5