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.
18 Answers
Use onClick with window.location.reload(), i.e. :
<button onClick="window.location.reload();">Refresh Page</button> Or history.go(0), i.e.:
<button onClick="history.go(0);">Refresh Page</button> Or window.location.href=window.location.href for 'full' reload, i.e.:
<button onClick="window.location.href=window.location.href">Refresh Page</button> The Button element - developer.mozilla.org
2This works for me:
function refreshPage(){ window.location.reload(); } <button type="submit" onClick="refreshPage()">Refresh Button</button> 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>Refresh!</button> <img src=""><a onClick="window.location.reload()">Refresh</a> This really works perfect for me.
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.
4just create the empty reference on link such as following
<a href="" onclick="dummy(0);return false;" > <button onclick=location=URL>Refresh</button> This might look funny but it really does the trick.
button that refresh the page on click
Use onClick button with window.location.reload():
<button onClick="window.location.reload();"> <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">
Though the question is for button, but if anyone wants to refresh the page using <a>, you can simply do
<a href="./">Reload</a> Use this its work fine for me to reload the same page:
<button onClick="window.location.reload();"> <script> function locationreload() { location.reload(); } </script> <button type="submit" onclick="return confirm('Do you really want to refresh your page?') , locationreload();">Refresh</button> 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"); } 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" name="name"> <input type="submit" value="Read"> <input type="submit" value="Reload" form="hidden_form"> </form> <form method="get"></form> <button type="submit" onclick="refresh">refresh</button> This worked for me!
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> "reload" and "refresh" aren't JavaScript functions. Try using the following code:
function reload() { window.location.refresh(); }<button onClick="reload()"></button>1Don't need Js, you can put button tag in a form tag:
<form> <button>Restart</button> </form> Test it and give me your opinion!