Last Updated on April 25, 2024 by Roshan Parihar
To refresh a page on button click using jQuery or javascript, use the location.reload() function for both jQuery and Javascript.
You can also refresh or reload the page after some time delay in seconds using jQuery. Let’s find out with the examples given below.
Refresh Page Using jQuery or Javascript on Button Click
If you want to refresh a page on a button click using jQuery, you have to use location.reload() function. It requires no argument to refresh the page on a button click.
Example 1
|
1 2 3 4 5 6 7 8 |
<script> $(document).ready(function(){ $('.btnRefreshjquery').click(function(){ location.reload(); }); }); </script> <button type="button" class="btnRefreshjquery">Click me to Refresh</button> |
Output
The above example contains the button and the script to refresh the page. When you click the above button, the page will get refreshed immediately.
However, if you want to refresh the page after some seconds, please read further.
Reload a Page Using Function and OnClick Attribute in Javascript
You can reload a page using function in Javascript. For this, firstly, declate a function with location.reload() function inside it. After that, add the function in onclick attribute of the button element.
Example 2
|
1 2 3 4 5 6 |
<script> function myReload(){ location.reload(); } </script> <button type="button" onclick="myReload()">Refresh with Javascript</button> |
Output
When you click the button given above, it refresh the page immediately on execution of the function defined above.
Add Time Delay in Seconds to Reload Pages
In addition to the above example, you can also refresh a page on button click with some time delay using the setTimeout() function of jQuery. Define some time delay within the function with the code location.reload() to reload the page on a button click.
The time delay value will be in milliseconds to reload the page after a certain time delay.
Example 3
|
1 2 3 4 5 6 7 8 9 10 |
<script> $(document).ready(function(){ $('.btnRefreshdelay').click(function(){ setTimeout(function(){ location.reload(); }, 5000); }); }); </script> <button type="button" class="btnRefreshdelay">Refresh with Delay in Seconds</button> |
Output
The above example contains the button that you have to click to reload the page on button click. It takes 5 seconds after which the page refresh code executes to refresh a page. This is useful to execute your code and refresh the page after some time delay.
You can change the time delay to 5 seconds for the above example. Replace the time delay given above as per your requirement.
You May Also Like to Read