Reputation: 1951

Button that refreshes the page on click

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">

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

But neither worked.

Upvotes: 177

Answers (17)

esotericpig

Reputation: 292

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>

Upvotes: 0

Pedro Lobito

Reputation: 99011

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

Upvotes: 377

user18377368

Reputation: 17

   <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>

Upvotes: 1

dankswoops

Reputation: 173

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>

Upvotes: 2

Christian Samu

Reputation: 45

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

function reload() {
  window.location.refresh();
}

<button onClick="reload()"></button>

Upvotes: 0

Sajin SA

Reputation: 1

<button type="submit" onclick="refresh">refresh</button>

This worked for me!

Upvotes: 0

Manjunath Akalawadi

Reputation: 395

This works for me:

function refreshPage(){
    window.location.reload();
}

<button type="submit" onClick="refreshPage()">Refresh Button</button>

Upvotes: 20

Krishna Saxena

Reputation: 41

<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">

Upvotes: 4

Smile

Reputation: 4088

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

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

Upvotes: 7

volt

Reputation: 1003

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">

Upvotes: 13

prashant kute

Reputation: 343

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

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

Upvotes: 2

Love Kumar

Reputation: 1124

button that refresh the page on click

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

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

Upvotes: 6

Richard Taylor-Kenny

Reputation: 70

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");
}

Upvotes: 0

Thielicious

Reputation: 4452

<button onclick=location=URL>Refresh</button>

This might look funny but it really does the trick.

Upvotes: 5

ilias iliadis

Reputation: 631

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.

Upvotes: 8

Awais Jameel

Reputation: 2206

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

This really works perfect for me.

Upvotes: 11

Hamid s k

Reputation: 238

just create the empty reference on link such as following

 <a href="" onclick="dummy(0);return false;" >

Upvotes: 5

Button that refreshes the page on click

Answers (17)

Related Questions