CODEWITHSUNDEEP
html
Nick
Nick

Reputation: 158

Trying to have 2 drop down boxes point to a URL

So I am trying to have a page on my site that contains 2 drop down boxes and a submit button. The submit button will point to a URL when clicked and then that will take them to a new page. The URL will be based on whatever is selected in the drop down menus.

For example: Drop down 1 has options A and B Drop down 2 has options 1 and 2

Then there would be a different url for each combination A1 points to URL-1 A2 points to URL-2 B1 points to URL-3 B2 points to URL-4

I really don't know much about coding and have been searching for a way to do this for the last 3 hours and I just don't even know how to google it. I really appreciate any help I can get at this point. Thank you in advance! :)

Here is the code from my drop boxes. I edited the options to match the example with the A, B, 1, and 2. 

<html>
<body>
<form>
<select id="list1t">
  <option>Select one</option>
  <option>A</option>
  <option>B</option>
</select>
</form>
<form>
<select id="list2">
  <option>Select one</option>
  <option>1</option>
  <option>2</option>
</select>
</form>
</body>
</html>

Upvotes: 0

Views: 90

Answers (1)

Bhadra
Bhadra

Reputation: 2104

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var url;
$(function(){
$('#link').click(function(){
    var val1=$('#first').val();
    var val2=$('#second').val();
    if(val1=='A'){
        if(val2=='1'){
              url="URL1";
        }
        else{
              url="URL2";
        }
    }else{
        if(val2=='1'){
              url="URL3";
        }
        else{
              url="URL4";
        }
    }
    window.location.href=url;
});
});
</script>

the html would be

<select id="first">
    <option value="A" selected>A</option>
    <option value="B">B</option>
</select>
<select id="second">
    <option value="1" selected>1</option>
    <option value="2">2</option>
</select>

you can use a link for clicking . no need of form or submit button

<a href="#" id="link">BUTTON</a>

Upvotes: 1

Related Questions