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

NakedBrunch · Answer 1 · 2011-06-03T18:59:06.987

2

Something like this?

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

edited Jun 03 '11 at 18:59

answered Jun 03 '11 at 17:11

NakedBrunch

48,713
13
73
98

score 1 · Answer 2 · answered Jun 03 '11 at 17:14

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;

score 1 · Answer 3 · answered Jun 03 '11 at 17:15

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

score 0 · Answer 4 · answered Mar 10 '14 at 20:55

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

score 0 · Accepted Answer · answered Jun 03 '11 at 19:04

0

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+"";

answered Jun 03 '11 at 19:04

dev4life

880
2
8
18

I've added my form code above. Can you look and tell me where I would add your code? Thanks – Zach Nicodemous Jun 04 '11 at 10:03
Sorry it took so long to write back. I was on vacation. It would look like this: http://jsfiddle.net/NVGu6/ – dev4life Jun 10 '11 at 14:21

Javascript / jQuery - Goto URL based on Drop Down Selections

5 Answers5

Linked