How to change the location.href property dynamically through jQuery?

Question

I want to change the href of a button:

<button class="btn btn-info btn-lg" id="home" onclick="location.href='index.php'">Home</button>

I tried this:

$('#home').prop("href" , "home.php");

PHP:

<button class="btn btn-info btn-lg" id="home" onclick="location.href='<?php echo $link; ?>'">Home</button>

but it didn't work.

Thats because the `href` isn't an attribute of your `button`. It is a part of your `onclick` handler. — putvande, Nov 01 '16 at 18:54
If it has to be an onclick, replace where it navigates to with a variable, then edit the variable when you need to change where it redirects to. — Henrik Ginnerup, Nov 01 '16 at 18:55
Why aren't you using an anchor tag as semantically what you are doing is incorrect. — putvande, Nov 01 '16 at 18:56
Possible duplicate of [How to change window.location.href in JavaScript and then execute more JS?](http://stackoverflow.com/questions/8209626/how-to-change-window-location-href-in-javascript-and-then-execute-more-js) — Heretic Monkey, Nov 01 '16 at 20:49

score 0 · Answer 1 · 2016-11-02T13:47:41.003

0

Wrap #home around an anchor <a> tag then you can change it like so:

Edit: As @putvande's comments below suggest that I cannot have a button inside an anchor tag since it's semantically incorrect, I will change the <button> tag to a <span> with class btn.

<a href="<?php echo $link; ?>">
    <span class="btn btn-info btn-lg" id="home">Home</span>
</a>

<script type="text/javascript">
$('#home').parent().attr('href', 'home.php');
</script>

edited Nov 02 '16 at 13:47

answered Nov 01 '16 at 18:54

1

This is semantically incorrect. You can't have a button inside an anchor tag. – putvande Nov 02 '16 at 08:48
@putvande Thanks. TIL. I will modify my answer accordingly. – Nov 02 '16 at 13:45

score 0 · Answer 2 · answered Nov 01 '16 at 18:58

0

Try this

$("#home")[0].onclick = null;
$("#home").click(function() { location.href="home.php";});

answered Nov 01 '16 at 18:58

void

36,090
8
62
107

score -1 · Answer 3 · answered Nov 01 '16 at 18:54

-1

I think what you're looking for is attr() not .prop()

JS:

$('#home').attr("href" , "home.php");

See fiddle:

https://jsfiddle.net/epL9gb6t/

answered Nov 01 '16 at 18:54

Phillip Chan

993
7
17

He's using a button, not an anchor tag. – Tyr Nov 01 '16 at 18:55
1

It is unclear whether he is referring to a semantic ` – Phillip Chan Nov 01 '16 at 18:56
P.s. this was before he posted his source HTML code. – Phillip Chan Nov 01 '16 at 18:58

How to change the location.href property dynamically through jQuery?

3 Answers3