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><selectclass="dropdown"id="dd1"><option>http://</option><option>ftp://</option><option>https://</option></select><selectclass="dropdown"id="dd2"><option>google</option><option>yahoo</option><option>bbc</option><option>hotmail</option></select><selectclass="dropdown"id="dd3"><option>.com</option><option>.net</option><option>.co.uk</option></select><inputtype="submit"name="button"id="button"value="Go!"></form>

Solution 2:

<form><selectclass="dropdown"id="dd1"style="margin-right:10px;width:130px"><option>http://</option><option>ftp://</option><option>https://</option></select><selectclass="dropdown"id="dd2"style="margin-right:10px;width:130px"><option>google</option><option>yahoo</option><option>bbc</option><option>hotmail</option></select><selectclass="dropdown"id="dd3"style="width:130px;margin-right:20px"><option>.com</option><option>.net</option><option>.co.uk</option></select><buttonid="button"type="button">GO</button><!-- notice this change --></form>

In Javascript:

$(document).ready(function () {
      $("#button").click(function(){navigate();});
});

functionnavigate(){
window.location.href = $('#dd1').val() + $('#dd2').val() + $('#dd3').val();
}