[adinserter block=”34″]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.)
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!
[purchase_link id=”12260″ text=”Download Now” style=”button” color=”green”]
Related Tutorials
[adinserter block=”1″]
Thank you for learning from our post about jQuery Redirect onClick Event (New or Same Window)!
Leave a Reply