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 · Accepted Answer · 2011-06-03 18:59:06Z

2

Something like this?

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

edited Jun 3, 2011 at 18:59

answered Jun 3, 2011 at 17:11

NakedBrunch

49.5k14 gold badges75 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eystein Bye · Accepted Answer · 2011-06-03 17:14:53Z

1

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;

answered Jun 3, 2011 at 17:14

Eystein Bye

5,1462 gold badges22 silver badges18 bronze badges

Comments

Venkat Raghavan G · Accepted Answer · 2011-06-03 17:15:53Z

1

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

answered Jun 3, 2011 at 17:15

Venkat Raghavan G

333 bronze badges

Comments

dev4life · Accepted Answer · 2011-06-03 19:04:32Z

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 3, 2011 at 19:04

dev4life

9042 gold badges9 silver badges20 bronze badges

2 Comments

Zach Nicodemous Over a year ago

I've added my form code above. Can you look and tell me where I would add your code? Thanks

dev4life Over a year ago

Sorry it took so long to write back. I was on vacation. It would look like this: jsfiddle.net/NVGu6

Roi · Accepted Answer · 2014-03-10 20:55:45Z

0

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

answered Mar 10, 2014 at 20:55

Roi

1,64717 silver badges21 bronze badges

Collectives™ on Stack Overflow

Javascript / jQuery - Goto URL based on Drop Down Selections

5 Answers 5

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related