Javascript - Goto URL based on Drop Down Selection

Question

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 to insert the code in my example form.

Can someone let me know where exactly the code provided in the previous question location should be added in a form to work properly?

Answer 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>

Answer 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();
}