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.)
Here’s the live demo and code:
Contents
- 1 jQuery Redirect onClick Step by Step
- 1.1 Step 1: Prepare basic HTML page code.
- 1.2 Step 2: Put a drop down list of URLs you want your page to redirect.
- 1.3 Step 3: Put the buttons for opening the URL in the same window or another window or tab.
- 1.4 Step 4: Include jQuery library and basic jQuery code.
- 1.5 Step 5: Inside the basic jQuery code $(document).ready(function() {…, put the button click event triggers.
- 2 Complete jQuery Redirect onClick Page
- 3 Related Tutorials
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>
<!--
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>
//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
We listed all our high quality full-stack web development tutorials here: Click here.
Thank you for learning from our post about jQuery Redirect onClick Event (New or Same Window)!
Thank you so much for this type of tutorials. I learn some thing new from here this is so much easy are and user friendly code.
You’re welcome @wakidur! Thank you for the kind words, please share our site to your friends if you have time.
Thanks so much, you saved me time and headache ! Perfect peace of code, thanks for sharing !
Glad to help and you’re welcome @Nady! Apologies for the late reply, I just read your comment.