Javascript - Goto URL based on Drop Down Selections (continued!)

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?

jaime · Accepted Answer · 2011-06-05T19:26:32.453

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>

edited Jun 05 '11 at 19:26

answered Jun 05 '11 at 18:50

jaime

41,961
10
82
52

Is there any way to add an additional function that checks the URL before going to it, and say, for example, if the last character is an "a" then replace it with a "b" - My URLs sometimes include the "+" character which I need to remove if its the last character in a URL. So it basically needs to be "if last character is +, remove it" – Zach Nicodemous Jun 06 '11 at 14:25
You can store the url into a variable and then use regular expressions. A very simple case would be `url = url.replace(/\+$/,'')` which would remove that last `+` in the string. – jaime Jun 06 '11 at 20:41
I wouldn't use the "+" at all.. rather use: [$('#dd1').val(),$('#dd2').val(),$('#dd3').val()].join("") – Roi Mar 10 '14 at 20:46

score 0 · Answer 2 · answered Jun 05 '11 at 19:11

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

Javascript - Goto URL based on Drop Down Selections (continued!)

2 Answers2

Linked