Javascript - Goto URL Based On Drop Down Selections (continued!)
This is continued from here: Javascript / jQuery - Goto URL based on Drop Down Selections Some great folks have given me some code examples, but I am having real trouble on where t
Solution 1:
Somewhere in your JavaScript file you need to bind a function to the onsubmit
event of your form, so it can do whatever you want.
If you are using jQuery do this:
$(function(){
$('form').submit(function(e){
window.location.href = $('#dd1').val() +
$('#dd2').val()+
$('#dd3').val();
e.preventDefault();
});
});
Check how it works here: http://jsfiddle.net/WDtGK/2/
added HTML for context
<form>
<select class="dropdown" id="dd1">
<option>http://</option>
<option>ftp://</option>
<option>https://</option>
</select>
<select class="dropdown" id="dd2">
<option>google</option>
<option>yahoo</option>
<option>bbc</option>
<option>hotmail</option>
</select>
<select class="dropdown" id="dd3">
<option>.com</option>
<option>.net</option>
<option>.co.uk</option>
</select>
<input type="submit" name="button" id="button" value="Go!">
</form>
Solution 2:
<form>
<select class="dropdown" id="dd1" style="margin-right:10px;width:130px">
<option>http://</option>
<option>ftp://</option>
<option>https://</option>
</select>
<select class="dropdown" id="dd2" style="margin-right:10px;width:130px">
<option>google</option>
<option>yahoo</option>
<option>bbc</option>
<option>hotmail</option>
</select>
<select class="dropdown" id="dd3" style="width:130px;margin-right:20px">
<option>.com</option>
<option>.net</option>
<option>.co.uk</option>
</select>
<button id="button" type="button">GO</button> <!-- notice this change -->
</form>
In Javascript:
$(document).ready(function () {
$("#button").click(function(){navigate();});
});
function navigate(){
window.location.href = $('#dd1').val() + $('#dd2').val() + $('#dd3').val();
}
Post a Comment for "Javascript - Goto URL Based On Drop Down Selections (continued!)"