Form w/ 2 drop-down boxes, submit button, links

Hi All,

This is my first post! I think this site is amazing.

So my question is this: how can I make a form that has two drop down menus (the first with 2 options and the second with 3) and a submit button which upon clicking will take the user to one of 6 html pages on my website.

     Drop down 1:  -Fairy Goddess
                          -Inner Warrior

     Drop down 2:  -Young Adult
                          -20 Something
                          -30 and up

Possible outcomes: 1. Fairy Goddess - Young Adult
2. Fairy Goddess - 20 Something
3. Fairy Goddess - 30 and up
4. Inner Warrior - Young Adult
5. Inner Warrior - 20 Something
6. Inner Warrior - 30 and up

I’ve tried to get a start by modifying this check-box & submit disclaimer code that I successfully implemented on one page. I haven’t an idea how to modify the JS to match what I want to do with the HTML. Please correct and direct me to solve this! :slight_smile:

The code I have now:

<SCRIPT language=JavaScript>

function checkCheckBox(f){
if (f.agree.checked == false )
{
alert('Please agree to the terms by checking the box to continue.');
return false;
}else{
return true;
}
}

  </SCRIPT>

followed by:

<!-- Consultation form code -->            
             <form action="fairy-goddess.html" autocomplete="on">
  Choose your Guide 
              <input list="guides" name="guide">
                <datalist id="guides">
                  <option value="Fairy Goddess">
                  <option value="Inner Warrior">
                 </datalist><br>
                 Choose your age group 
              <input list="age-groups" name="age-group">
                <datalist id="age-groups">
                  <option value="Young Adult">
                  <option value="20 Something">
                  <option value="30 & up">
                 </datalist><br>
  <input type="button" class="btn btn-default" value="Submit" onclick="document.location.href='../disclaimer.html';">
</form>
<!-- Consultation form code --> 

THANKS!!

Hi I noticed that as a form action you have fairy-goddess.html, while you want the user to redirect to a page depending on what choice they made from the drop-down lists, right? If that is the case you need to prevent the form from it’s default action and submit it true Javascript. What are those html page names?