Javascript - URL перехода на основе выпадающего списка (продолжение!)

Question

Это продолжается здесь: Javascript / jQuery - URL перехода на основе выпадающего списка

Некоторые замечательные люди дали мне несколько примеров кода, но у меня возникли реальные проблемы с тем, гдечтобы вставить код в форму примера.

Может кто-нибудь сообщить мне, где именно код, указанный в предыдущем месте вопроса, должен быть добавлен в форму для правильной работы?

Answer 1

Где-то в вашем файле JavaScript вам нужно привязать функцию к событию onsubmit вашей формы, чтобы она могла делать что угодно.

Если вы используете jQuery, сделайте следующее:

$(function(){

  $('form').submit(function(e){

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

      e.preventDefault();

    });
});

Проверьте, как это работает здесь: http://jsfiddle.net/WDtGK/2/

добавлен HTML для контекста

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

В Javascript:

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

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