How can I make a button redirect my page to another page?

Question

I have been trying the following:

<form action="/home" class="inline">
    <button class="float-left submit-button" >Home</button>
</form>

It seems to work but it goes to the page "/home?"

Is there a better way for me to make a button inside a form make the page go to a new location?

A form element can only take you to other pages within the same site. If you want to redirect to other websites, you need to use JavaScript's location.href or similar. — Adrian Wiik, Dec 20 '19 at 13:43

score 416 · Accepted Answer · edited Feb 12 '14 at 06:15

416

Just add an onclick event to the button:

<button onclick="location.href = 'www.yoursite.com';" id="myButton" class="float-left submit-button" >Home</button>

But you shouldn't really have it inline like that, instead, put it in a JS block and give the button an ID:

<button id="myButton" class="float-left submit-button" >Home</button>

<script type="text/javascript">
    document.getElementById("myButton").onclick = function () {
        location.href = "www.yoursite.com";
    };
</script>

edited Feb 12 '14 at 06:15

Community

1
1

answered May 15 '13 at 10:30

mattytommo

54,375
15
123
144

2

ACCEPT – JoshYates1980 Aug 26 '16 at 13:52
Do I need to have a form tag in this HTML that describes the method and submit action? – Himansz Aug 29 '16 at 09:35
3

@Himansz Not if you're not going to submit the form. If it's a simple re-direction then you don't need a form. – mattytommo Aug 29 '16 at 16:53
does this work on mobile too? – Angger May 19 '17 at 17:46
How can i send POST data when calling location.href – Aseem Dec 13 '18 at 10:07
3

why not have it inline? – Nabeel Khan May 10 '19 at 08:08
@NabeelKhan Old question, but if you need it : One advantage of not having it inline is that you can then put it in a JS resource file that is loaded from the server, which allows you to implement Content Security Policies (https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) – Antoine Oct 19 '20 at 14:07
Just for the next person that stumbles upon this: without a http:// or https:// in front of the link, my browser treats it as a relatvie path. So just add that if you're facing the same issue – Hobbamok Jun 15 '21 at 08:27

score 59 · Answer 2 · answered May 15 '13 at 10:33

59

try

<button onclick="window.location.href='b.php'">Click me</button>

answered May 15 '13 at 10:33

Ehmad Imtiaz

626
5
6

Boostrap Submit and Cancel Buttons - Do this; – MarcoZen Jul 11 '17 at 19:12

score 18 · Answer 3 · edited Jun 17 '21 at 22:30

18

Use this:

 <button onclick="window.location='page_name.php';" value="click here" />

Basically you are using javascript snippet to redirect and onclick event of the button to trigger it.

edited Jun 17 '21 at 22:30

Atharva Kadlag

302
3
13

answered May 15 '13 at 10:41

Veer Shrivastav

5,314
11
50
83

Hope you will find this useful. Please try this: `` – McElie Apr 29 '15 at 11:05

score 11 · Answer 4 · answered May 15 '13 at 10:38

11

Just another variation:

    <body>
    <button name="redirect" onClick="redirect()">

    <script type="text/javascript">
    function redirect()
    {
    var url = "http://www.(url).com";
    window.location(url);
    }
    </script>

answered May 15 '13 at 10:38

Ben Taylor

165
1
5

3

window.location is not a function! Use this: setTimeout('window.location.href="url"', 0); or JQuery: $(location).attr('href',url); – Sinan Dizdarević Apr 08 '15 at 13:36
1

This doesnt work, instead use window.location.href="http..."; – Shalin Jirawla Jul 22 '16 at 11:24
@GeneralKimi Why timeout? – akinuri Jun 13 '18 at 12:46

score 4 · Answer 5 · answered May 15 '13 at 10:30

you could do so:

<button onclick="location.href='page'">

you could change the action attribute of the form on click the button:

<button class="float-left submit-button" onclick='myFun()'>Home</button>

<script>
myFun(){
$('form').attr('action','new path');
}
</script>

How can I make a button redirect my page to another page?

5 Answers5

Linked