Home jQuery

jQuery Redirect onClick Event (New or Same Window)

jQuery Quick Tip: This time I'm gonna show you how to redirect a page to another page or website when a user selected a value from a dropdown list and clicked a button.

We have two buttons here, the first one will redirect you to a website in the same page and the second one will redirect you in new tab (or window, in safari.)

jquery redirect onclick event to a page

Here's the live demo and code:

jQuery Redirect onClick Step by Step

Step 1: Prepare basic HTML page code.

<!doctype html>
<html>
   <head>
      <title>jQuery Redirect OnClick</title>
   </head>
<body>

</body>
</html>

Step 2: Put a drop down list of URLs you want your page to redirect.

<!--
  Here are our form elements,
  we have the select box / dropdown list
  which contains our URLs or links
-->
<select id="websites" style="width:200px;">
  <option value="http://demos.codeofaninja.com/tutorials/jQuery/get_dynamic_div_height.php">Get Dynamic</option>
  <option value="http://google.com">Google</option>
  <option value="https://codeofaninja.com">Blog</option>
  <option value="http://apple.com">Apple</option>
</select>

Step 3: Put the buttons for opening the URL in the same window or another window or tab.

<!--
  And our buttons, the first one is "Open In Same Window"
  which opens the link selected on the dropdown in the same window.
 
  The other button is the "Open In New Tab" which opens the link in
  new tab (or window in safari)
-->
<input type="button" value="Open In Same Window" id="open_same_window" />
<input type="button" value="Open In New Tab" id="open_new_tab" />

Step 4: Include jQuery library and basic jQuery code.

<!-- include our library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {

});
</script>

Step 5: Inside the basic jQuery code $(document).ready(function() {..., put the button click event triggers.

//this will be triggered when the first button was clicked
$("#open_same_window").click(function(){
  //this will find the selected website from the dropdown
  var go_to_url = $("#websites").find(":selected").val();
 
  //this will redirect us in same window
  document.location.href = go_to_url;
});

//this will be triggered when the second button was clicked
$("#open_new_tab").click(function(){
  //this will find the selected website from the dropdown
  var go_to_url = $("#websites").find(":selected").val();
 
  //this will redirect us in new tab
  window.open(go_to_url, '_blank');
});

Complete jQuery Redirect onClick Page

 <html>
   <head>
      <title>jQuery Redirect OnClick</title>
   </head>
<body>

<div style="margin:200px 200px;">
   <!--
      Here are our form elements,
      we have the select box / dropdown list
      which contains our URLs or links
   -->
   <select id="websites" style="width:200px;">
      <option value="http://demos.codeofaninja.com/tutorials/jQuery/get_dynamic_div_height.php">Get Dynamic</option>
      <option value="http://google.com">Google</option>
      <option value="https://codeofaninja.com">Blog</option>
      <option value="http://apple.com">Apple</option>
   </select>
 
   <!--
      And our buttons, the first one is "Open In Same Window"
      which opens the link selected on the dropdown in the same window.
     
      The other button is the "Open In New Tab" which opens the link in
      new tab (or window in safari)
   -->
   <input type="button" value="Open In Same Window" id="open_same_window" />
   <input type="button" value="Open In New Tab" id="open_new_tab" />
</div>

<!-- include our library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {

   //this will be triggered when the first button was clicked
   $("#open_same_window").click(function(){
      //this will find the selected website from the dropdown
      var go_to_url = $("#websites").find(":selected").val();
     
      //this will redirect us in same window
      document.location.href = go_to_url;
   });
 
   //this will be triggered when the second button was clicked
   $("#open_new_tab").click(function(){
      //this will find the selected website from the dropdown
      var go_to_url = $("#websites").find(":selected").val();
     
      //this will redirect us in new tab
      window.open(go_to_url, '_blank');
   });
 
});
</script>

</body>
</html>

Redirecting a page using JavaScript is fun. If you have any other techniques of doing this jQuery redirect onClick event, please drop it in the comments section below! Thanks!

Download Source Code
You can download all the code used in this tutorial for only $9.99 $5.55!

Related Tutorials

Thank you for learning from our post about jQuery Redirect onClick Event (New or Same Window)!

Before you write a comment, please read this guide and our code of conduct.