In this tutorial, learn how to redirect to another page using jQuery and Javascript. Redirect as link or button click or auto-redirect to another page with jQuery or Javascript. Add certain delay to your redirection and perform a smoother redirect after button click.
Use the button for redirection to another page. The button works as a link which takes you to another page on click. The auto-redirect system takes to another page automatically without any button click. The auto-redirection is the HTTP redirect which replaces the location given in address bar.
Javascript Auto-redirection to Another Page (Behaviour as HTTP Redirect)
When you put the below code to your website page. It will automatically take you to the mentioned URL page. The setTimeout()
contains certain delay for smooth redirection.
Use the window.location.replace()
to perform this task. The replace()
does not save any history to the browser. If you press the back button, you will not get redirection to the previous page.
1 2 3 4 5 |
<script> setTimeout(function(){ window.location.replace('https://tutorialdeep.com/knowhow/get-current-page-url-jquery/'); }, 10000); </script> |
The above code is a javascript code for a redirect to another page. It takes a 10-second delay to take you to another page.
Redirect to Another Page Using Javascript (Behaviour as Link)
The below example works as a link redirection. It gives you the same behavour as an anchor link work. Place any URL in the href
part of the below code. The redirection will not trigger until you press the button.
Use the window.location.href()
to perform this task.
1 2 3 4 5 6 7 8 |
<script> function jslinkRedirection(){ setTimeout(function(){ window.location.href="https://tutorialdeep.com/knowhow/get-current-page-url-jquery/"; // Put url to redirect }, 3000); } </script> <button type="button" onclick="jslinkRedirection()">Click to Redirect with Javascript</button> |
Output
Click the button given in the example above. It takes time delay of 3 seconds to take to the mentioned URL page.
jQuery Auto-redirection to Another Page (Behaviour as HTTP Redirect)
If you want to perform the auto-redirection to another page using jQuery. You have to use the below given jQuery code.
Put the below code to the page where you want to make redirection. After you place the below code, open the page in the browser to see the automatic redirection.
Use the $(window).attr("location","url")
to perform this task. Change the URL with the URL where you want to make redirection.
1 2 3 4 5 |
<script> setTimeout(function(){ $(window).attr('location','https://tutorialdeep.com/knowhow/get-current-page-url-jquery/'); }, 10000); </script> |
The above example of jQuery takes 10 seconds to make redirection. You will automatically get redirected to the mentioned URL.
Redirect to Another Page Using jQuery (Behaviour as Link)
If you want to create a button with behavior same as an anchor link. You can perform this task using jQuery attr()
. The first argument is the attribute href
and the second is the URL.
The example using the click event of the button to trigger the redirection.
Use the $(window).attr("href",'url')
to perform this task. Change URL with the required URL for redirection.
1 2 3 4 5 6 7 8 |
<script> $(document).ready(function(){ $('.jqRedirectionbtn').click(function(){ $(location).attr("href","https://tutorialdeep.com/knowhow/get-current-page-url-jquery/"); // Put url to redirect }); }); </script> <button type="button" class="jqRedirectionbtn">Click to Redirect with jQuery</button> |
Output
Click the above button to redirect to another page using jQuery. There is no time delay given in the above example. You will be redirected to the another page immediately on button click.
DOWNLOAD Free jQuery CHEAT SHEET
You may also like to read.
- Get current page URL on click in jQuery
- How to get selected checkbox id on click in jQuery
- Disable every form element using jQuery
Hope, you like this tutorial of how to redirect to another page using jQuery and Javascript. If you have any query regarding the tutorial, please comment below.
Also tell me, which method are you using to perform redirection to another page.