167

I need a button that will refresh the page on the user's click. I tried this:

<input type="button" value="Reload Page" onClick="reload">

or

<input type="button" value="Refresh Page" onClick="refresh">

But neither worked.

17 Answers 17

368

Use onClick with window.location.reload(), e.g. :

<button onClick="window.location.reload();">Refresh Page</button>

Or history.go(0), e.g.:

<button onClick="history.go(0);">Refresh Page</button>

Or window.location.href=window.location.href for 'full' reload, e.g.:

<button onClick="window.location.href=window.location.href">Refresh Page</button>

The Button element - developer.mozilla.org

3
  • 5
    what's the difference between these three options? Is one better than the others for some situations?
    – ashleedawg
    Mar 2, 2019 at 11:15
  • 1st and 2nd are different ways to reload the page, but the 3rd does a "full" reload, meaning that if there's any text on input forms. they'll emptied. Feb 5, 2021 at 1:00
  • Tested the suggestions and noticed that it needs to be logged in to work. Is impossible to make a button that does a reload on the page even if the user is anonymous?
    – Christer
    Mar 7, 2023 at 10:45
20

This works for me:

function refreshPage(){
    window.location.reload();
} 
<button type="submit" onClick="refreshPage()">Refresh Button</button>
12

I noticed that all the answers here use inline onClick handlers. It's generally recommended to keep HTML and Javascript separate.

Here's an answer that adds a click event listener directly to the button. When it's clicked, it calls location.reload which causes the page to reload with the current URL.

const refreshButton = document.querySelector('.refresh-button');

const refreshPage = () => {
  location.reload();
}

refreshButton.addEventListener('click', refreshPage)
.demo-image {
  display: block;
}
<button class="refresh-button">Refresh!</button>
<img class="demo-image" src="https://picsum.photos/200/300">

11
<a onClick="window.location.reload()">Refresh</a>

This really works perfect for me.

8

Only this realy reloads page (Today)

<input type="button" value="Refresh Page" onClick="location.href=location.href">

Others do not exactly reload. They keep values inside text boxes.

5
  • Can you please explain what do you mean by: "Only this realy reloads page (Today)" ? Dec 12, 2017 at 7:48
  • "Today" means the day I wrote it (because every day something changes). "Only this" is relevant to answers given above by Pedro Lobito. Dec 13, 2017 at 10:29
  • 2
    All answets on SO are "as of today" and subject to be updated if anything changes, that's the nature of almost anything in life, not only answers. Dec 23, 2017 at 6:39
  • Still good advice today:) Had a form that was not getting updated using other page refresh methods, this one solved the issue for me! Thank you, was pulling my hair out...
    – Woody
    Mar 13, 2021 at 22:28
  • Hi all, which one of the examples does a forced reload of the page, i.e. not using the browser cache? Or do they all?
    – David.P
    Oct 31, 2022 at 17:24
7

Though the question is for button, but if anyone wants to refresh the page using <a>, you can simply do

<a href="./">Reload</a>
6

button that refresh the page on click

Use onClick button with window.location.reload():

<button onClick="window.location.reload();">
5

just create the empty reference on link such as following

 <a href="" onclick="dummy(0);return false;" >
5
<button onclick=location=URL>Refresh</button>

This might look funny but it really does the trick.

4
<button onClick="window.location.reload();">Reload</button>

Or you can also use

<form action="<same page url>" method="GET">
<button>Reload</button>
</form>

Note: Change "<same page link>" with the url of same page you want to reload. for example: <form action="home.html> method="GET">

2

Use this its work fine for me to reload the same page:

<button onClick="window.location.reload();">
1

When designing a website, it's always important to consider the best practices for Content Security Policy and disabled JavaScript users.

-Inline scripts like onClick are a vulnerability.

-Ignoring the <noscript> tag and styling your elements hidden then using JS to change the display: back to its respective styling forces the user to enable JS.

This is the simplest solution for all situations.

<a href="/">Reload Page</a>
1
  • JavaScript in itself is a vulnerability, doesn't matter if it's inline, or in a file. Aug 10, 2022 at 11:40
1
   <script>
    function locationreload() {
        location.reload();
          
    }
   </script>

    <button type="submit" onclick="return confirm('Do you really want to refresh your page?') , locationreload();" class="btn btn-success">Refresh</button>
0

If you are looking for a form reset:

<input type="reset" value="Reset Form Values"/>

or to reset other aspects of the form not handled by the browser

<input type="reset" onclick="doFormReset();" value="Reset Form Values"/>

Using jQuery

function doFormReset(){
    $(".invalid").removeClass("invalid");
}
0
<button type="submit" onclick="refresh">refresh</button>

This worked for me!

0

I didn't want to use JavaScript, so I figured out a way using a "hidden form." Here's an example:

<form method="get" accept-charset="utf-8">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

  <input type="submit" value="Read">
  <input type="submit" value="Reload" form="hidden_form">
</form>

<form id="hidden_form" method="get"></form>

-1

"reload" and "refresh" aren't JavaScript functions. Try using the following code:

function reload() {
  window.location.refresh();
}
<button onClick="reload()"></button>

1
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Feb 3, 2022 at 19:17

Not the answer you're looking for? Browse other questions tagged or ask your own question.