1

so I want to direct users to different pages based off their choice of 2 different down down menus

so if we have:
Menu 1
girl
boy

and
Menu 2
blue
green
yellow
red

I'd like to redirect to different pages if they choose girl + blue, boy+ blue, and boy+green,etc. for all combinations. Thanks so much for any help! I tried searching of course but couldn't find how to deal with this rather simple situation.

here's what I have so far:

 <td><span class="style1">You're a:</span><br>
                    <select name="select1" id="select1" onchange="getACupOfCoffee(this)">
                      <option selected="selected">-- Please Select --</option>
                      <option value="1">Male seeking Female</option>
                      <option value="2">Female seeking Male</option>
                      <option value="3">Male seeking Male</option>
                      <option value="4">Female seeking Female</option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <td><img src="http://cdn.qtxi.com/dm/datespace/_spacer.gif" height="35" width="300"></td>
                </tr>

                <tr>
                  <td><span class="style1">Relationship I'm looking for:</span><br>
                    <select name="select2" id="select2">
                      <option>-- Please Select --</option>
                      <option value="1b">Casual</option>
                      <option value="2b">Serious / Longterm</option>
                      <option selected="selected" value="3b">Friend</option>
                      <option value="4b">Nothing</option>
                    </select></td>
                </tr>
                <tr>
                </tr>
              <tr>
                  <td><input type="image" src="continue2.jpg" width="149" height="37" border="0" /><a onclick="internalLink=true" href="redirect-30074.php"><img src="free.gif" alt="continue" /></a></td>
KConstantin
  • 31
  • 4
  • Your question is not very clear. Fix the HTML formatting for a start - just realise you're more likely to get help the more effort you put into the question. – deed02392 Mar 15 '12 at 14:43
  • You can post your form to a PHP resource, where - according to the values - a location header redirecting to appropriate resource will be generated. Always depends on what the target will be. – Bernhard Döbler Mar 15 '12 at 14:52
  • any suggested resources? i think the question was relatively clear – KConstantin Mar 15 '12 at 15:36

6 Answers6

1

Since i see a onchange function and there is no form i'm going to assume you use javascript

I personaly use jQuery when dealing with javascript so ill use it in my awnser aswell, if you don't use jquery. the method should still point in the right direction.

give ur continue button a id

$('#continue').click(function(){
    if( $('#select1').val() == "1" ){
    //male seeking female
        if( $('#select2').val() == "1b"){
        //casual in male seeking female
        window.location = "1/1b/page.html";
        }
    }
    if( $('#select1').val() == "2" ){
    //female seeking male
        if( $('#select2').val() == "1b"){
        //casual in female seeking male
        window.location = "2/1b/page.html";
        }
    }
});

and repeat.... hope it helps

MakuraYami
  • 3,398
  • 3
  • 16
  • 19
1

You can use jQuery for this , for ex.

$(document).ready(function(){

$("#select2").change(function(){
var selA=$("#select1 option:selected").val();
var selB=$("#select2 option:selected").val();
document.location.href="http://your_url_here/"+selA+selB;

});

});

This code will make a redirect to your url using the values in the select option if the select2 changes

BenMorel
  • 34,448
  • 50
  • 182
  • 322
Vit Kos
  • 5,535
  • 5
  • 44
  • 58
1

Your html requires a form tag and a submit button that directs to a php page that decides what to do.

Lets say you did that and called the php page decision.php .

In decision.php you then compare the values you received from the form.

You receive the info in either $_POST or $_GET variables depending on which html form tag you used.

Sanitize your variables you received and then use a php case statement.

switch ($_POST['select1'].$_POST['select2']) {
    case "11b":
        $redirectLocation = "MaleseekingFemaleCasual.html";
    case "12b":
        $redirectLocation = "MaleseekingFemaleSerious.html";

ect.

header ("Location: ".$redirectLocation);

Hope it helps.

Nightwolf
  • 945
  • 2
  • 9
  • 23
  • Why would it need php, hes clearly using javascript... no offence but did you even look at his code – MakuraYami Mar 15 '12 at 14:59
  • I'm fine with whatever the most elegant solution is, but yea if i can simply edit my javascript that'd be better. – KConstantin Mar 15 '12 at 15:04
  • @MakuraYami: He has the php tag, and it is a lot simpler to grasp than using javascript. If he needed a javascript solution then he most probably already had a php solution and he would have specifically asked for a javascript solution. – Nightwolf Mar 15 '12 at 15:05
  • I see, well excuse me i focused more on OP's posted code then added tags. anyhow there's plenty of answers for him to choose from now :) – MakuraYami Mar 15 '12 at 15:12
0

Please try this code as an example

<html>

<head>


<script>
 function openPage(){
 var a=document.getElementById("drop1").value;
 var b=document.getElementById("drop2").value;

   if (a==1 && b==1){

   window.location.href = "a.html";
   }
   if (a==1 && b==2){
   window.location.href = "b.html";
   }

   }

   </script>
</head>

<body>

 <select name="dropdown" id="drop1">
    <option value="1">Diesel</option>
    <option value="2">Gas petrol</option>
 </select>​

<select name="dropdown" id="drop2">
    <option value="1">Auto</option>
    <option value="2">Heavy Duty trucks</option>
    <option value="3">light Duty trucks</option>
</select>​

<button onclick="openPage()">Search</button>
</body>
</html>
Chandan Sahu
  • 34
  • 1
  • 5
0

You could create a javascript that gets called when a user click on an item from the second dropdown list?

Something like:

<select onchange="MyFunc(this.options[this.selectedIndex].value)">
    <option value="">Choose a destination...</option>
    <option value="Blue">Blue</option>
    <option value="Red">Red</option>
</select>

And in the function you get the value from the first DropDown list.

EDIT:

In the MyFunc-function just check the value of the first dropdown and compare it to the value that you take in as a parameter in the function.

var e = document.getElementById("select1");
var result = e.options[e.selectedIndex].text; 

//Or var result = e.options[e.selectedIndex].value;

You then have both the values and can determine where to redirect the user.

Refer to this: Get selected value in dropdown list using JavaScript?

Community
  • 1
  • 1
Araw
  • 2,410
  • 3
  • 29
  • 57
  • I like the idea but Araw: how would i do that with using BOTH dropdown menus? like if they choose option1 in the first and option2 in the second, that should be different than option 2 in first and option 2 in second. – KConstantin Mar 15 '12 at 15:09
0

You need to go through the client side scripting to redirect user somewhere.

  • Add onchange event to your select2 id. This would be something like <select name="select2" id="select2" onchange="gotourl();">

  • Now, right your custom function in Clientside language that you can easily use. Code would take the value from your first drop down, generate url and redirect. Code would be something like this:

    function gotourl() { var choice_one = $('#select1').val(); var choice_two = $('#select2').val(); // MVC based side pattern window.location = "mywebsitename.com/".choice_one.'/'.choice_two; // CUSTOM PAGES BASED SITE. switch(choice_two) { case 'Casual': switch(choice_one) { case 'Male seeking Female': window.location = "mywebsitename.com/".choice_one.'/'.choice_two; break; //ANOTHER CASE FROM BELOW.... } break; // ANOTHER CASE from .. } }

I tried a lot but code is not going into the { } block. Try this code from your editor.

Hamza Waqas
  • 629
  • 4
  • 12