Reputation: 8294
I have a simple HTML drop-down select box.
I would like this to function as 'once something is selected' > the page then redirects to a custom URL.
Below is my mark-up.
<fieldset id="size"><legend>Product Options</legend>
<div class="wpsc_variation_forms">
<table>
<tr><td class="col1"><label for="variation_select_48_5">Choose Size:</label></td>
<td class="col2"><select class="wpsc_select_variation" name="variation[5]" id="variation_select_48_5">
<option value="0" >-- Please Select --</option>
<option value="8" >Large</option>
<option value="7" >Medium</option>
<option value="6" >Small</option>
</select></td></tr>
</table>
</div><!--close wpsc_variation_forms-->
</fieldset>
I found a similar question; but the solution given seems a bit clunky.
SELECT Dropdown that redirects without Javascript
Upvotes: 1
Views: 4705
Reputation: 24733
I would write i litte function and then trigger it depending on the retuned result
<?PHP
function redirect($where){
header("Location: $where");
}
if ($_REQUEST['select1'] == '8'){
redirect('http://example.com/somewhere.php');
}elseif($_REQUEST['select1'] == '7'){
redirect('http://example.com/elsewhere.php');
}elseif($_REQUEST['select1'] == '6'){
redirect('http://example.com/elsewhere.php');
}
?>
<form>
<select name="select1" class="wpsc_select_variation" name="variation[5]" id="variation_select_48_5" onchange="this.form.submit()">
<option value="0" >-- Please Select --</option>
<option value="8" >Large</option>
<option value="7" >Medium</option>
<option value="6" >Small</option>
</select>
the only javascript required is within the select
tag to trigger the submit onchange="this.form.submit()"
Upvotes: 1
Reputation: 23
Hope this helps
$("select#wpsc_select_variation").change(function(){
if ($(this).val() !== 0) {
switch($(this).val())
{
case(8):
window.location.href = http://www.8.com
case(7):
window.location.href = http://www.7.com
case(6):
window.location.href = http://www.6.com
}
}
});
Upvotes: 0
Reputation: 5795
The easiest way i know of is assigning an onchange
event to select element and making options' values as urls.
<select onchange="window.location = this.options[this.selectedIndex].value;">
<option value="http://your-url">Large</option>
</select>
Upvotes: 1
Reputation: 2046
With jQuery:
$(function() {
$('#variation_select_48_5').change(function() {
document.location = 'http://customurl.abc';
});
});
Upvotes: 3