Javascript / jQuery - Goto URL based on Drop Down Selections

Question

I have 3 drop down boxes and a go button. I need to goto a URL that is built based on what is selected in the 3 URL boxes - here is an example of my code.

  <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>
  <input type="submit" name="button" id="button" value="Go!">
  </form>

So, for example, if a user selects http:// + yahoo + .net - then hits a "Go" button, they would be sent to http://yahoo.net or if the user selects https// + hotmail +.com then they are sent to https://hotmail.com

Is there some jQuery or Javascript code that would detect the selections from the dropdowns, then built the correct URL and goto it when the "Go" button is pressed?

Thanks Zach

Answer 1

Something like this?

window.location.href = $('#Dropwdown_1').val()+$('#Dropwdown_2').val()+$('#Dropwdown_3').val();

Answer 2

Get the values of the dropdowns

var searcher = document.getElementById("ddlSearch");
var searchDomain =searcher.options[searcher.selectedIndex].text;

Same for the other two

Then concatenate strings using the +

var url = searchProtocol + searchDomain + searchTopLevel;

The go to the page:

location.href= url;

Answer 3

@zach

This should be simple.

• Use Select HTML tag and assign the option for the 3 dropdowns
• Create a function createURL() in JS.
• Get the value of the three boxes. You may use document.getElementById('Select1').options[document.getElementById('Select1').selectedIndex].value and concatenate using plus symbol.
• You may also use JQuery which would make work simpler.
• You may use window.location.href to open in the same page.

Answer 4

While the other answers work... I would prefer handling it in this sort of fashion (using jQuery):

$("form").on("submit", function(e) {
    // Define our global url array
    var url = [];

    // Prevent the form from processing
    e.preventDefault();

    // Loop through the drop down fields, storing the value of each into our "url" array
    $(this).find(".dropdown").each(function() {
        url.push($(this).val());
    });

    // Change the page location
    window.location = url.join("");
});

Answer 5

var d1 = $("#dd1").find(":selected").attr("value");
var d2 = $("#dd2").find(":selected").attr("value");
var d3 = $("#dd3").find(":selected").attr("value");

location.href = d1+d2+d3+"";