Require drop down box selection

[CharlieWon]

I have a form set up with some drop down boxes. I also have a validation form which collects the information from the first form for people to see what they put in there. If someone doesn't select one of the drop down menus then it doesn't carry anything over to the validation form and it doesn't have the selection box options anymore. I have it set up on the first form that depending on what the user selects for box 1 (category) dictates what options will be shown in box 2 (products).

What would be the best way to set up the drop downs to be required. So that people cannot even leave the first form unless they have selected all something from both of my drop down boxes?

Thank you for your help! Let me know if you need to see some code.

[Boogle]

It would be good to see some code, Charliewon just to get a feel for it. I think your problem will easily be sovled then!

Boog's

[CharlieWon]

Here is the code I am working with:

The javascript for the first box that decides what will be shown in the second box:

function setOptions(chosen) {
var selbox = document.rmavalidation.opttwo;

selbox.options.length = 0;
if (chosen == " ") {
selbox.options[selbox.options.length] = new Option('--Please choose a model--',' ');

}
if (chosen == "Made for Sansa(TM)") {
selbox.options[selbox.options.length] = new Option('--Please choose a model--');
selbox.options[selbox.options.length] = new Option('Made for Sansa(TM) Travel Kit');
selbox.options[selbox.options.length] = new Option('SAN-360 FM Transmitter & Charger');
selbox.options[selbox.options.length] = new Option('iM-490S iMetal Isolation Earphones');
selbox.options[selbox.options.length] = new Option('S42 Data & Charging Cable');

}
if (chosen == "Earphones & Headsets") {
selbox.options[selbox.options.length] = new Option('--Please choose a model--');
selbox.options[selbox.options.length] = new Option('iM-490S iMetal Isolation Earphones');
selbox.options[selbox.options.length] = new Option('iM-390 iMetal Isolation Earphones');
selbox.options[selbox.options.length] = new Option('iM-290 iMetal Stereo Earphones');
selbox.options[selbox.options.length] = new Option('iP-HS2 iMetal Isolation Headset');
selbox.options[selbox.options.length] = new Option('iP-HS1 iMetal Stereo Headset');
}
if (chosen == "FM Transmitters") {
selbox.options[selbox.options.length] = new Option('--Please choose a model--');
selbox.options[selbox.options.length] = new Option('SAN-360 FM Transmitter & Charger');
selbox.options[selbox.options.length] = new Option('ATB-350 FM Transmitter');
}
if (chosen == "MountMaster TV Mounts") {
selbox.options[selbox.options.length] = new Option('--Please choose a model--');
selbox.options[selbox.options.length] = new Option('MountMaster Pro-60 Premium Wall Mount');
selbox.options[selbox.options.length] = new Option('MountMaster Pro-52 Premium Wall Mount');
selbox.options[selbox.options.length] = new Option('MountMaster Tilt-60 Tilting Wall Mount');
selbox.options[selbox.options.length] = new Option('MountMaster Tilt-52 Tilting Wall Mount');
selbox.options[selbox.options.length] = new Option('MountMaster Tilt-45 Tilting Wall Mount');
selbox.options[selbox.options.length] = new Option('MountMaster Flat-60 Low-Profile Wall Mount');
selbox.options[selbox.options.length] = new Option('MountMaster Flat-52 Low-Profile Wall Mount');
selbox.options[selbox.options.length] = new Option('MountMaster Flat-45 Low-Profile Wall Mount');
selbox.options[selbox.options.length] = new Option('MountMaster Flat-32 Low-Profile Wall Mount');
selbox.options[selbox.options.length] = new Option('MountMaster SW-24 Swivel Wall Mount');
selbox.options[selbox.options.length] = new Option('MountMaster CP-3025 Ceiling Mount');
}
if (chosen == "Digital Cables") {
selbox.options[selbox.options.length] = new Option('--Please choose a model--');
selbox.options[selbox.options.length] = new Option('USB 2.0');
selbox.options[selbox.options.length] = new Option('FireWire/1394');
selbox.options[selbox.options.length] = new Option('FireWire800/1394b');
selbox.options[selbox.options.length] = new Option('Made for Sansa');
selbox.options[selbox.options.length] = new Option('ioAccessories: USB 2.0/FireWire/Network');
}

The HTML for that code:

 <tr>
               <td><font color="red">*</font>Product Category:<br />              </td>
               <td ><select name="optone" size="1"
onchange="setOptions(document.rmavalidation.optone.options[document.rmavalidation.optone.selectedIndex].value);" required>
<option>--Please choose a category--</option>
<option value="Made for Sansa(TM)">Made for Sansa<font size="-1">TM</font></option>
<option value="Earphones &amp; Headsets">Earphones & Headsets</option>
<option value="FM Transmitters">FM Transmitters</option>
<option value="Digital Cables">Digital Cables</option>
<option value="MountMaster TV Mounts">MountMaster TV Mounts</option>

               </select><br /><br /></td></tr>
<tr><td><font color="red">*</font>Product Model:<br /></td><td>
<select name="opttwo" size="1" required>
<option value>--Please Choose a Model--</option>
</select> <br /><br />
           </td> 
          </tr>

Then on the Validation page HTML:

<tr>
                      <td class='inputverify'>Product Category:</td>
                                             <td>  <br />
                          <select name="optone" size="1">
                            <option value='<?PHP echo($optone)?>'><?PHP echo($optone) ?></option>
                            <option value="Made for Sansa">Made for Sansa</option>
                            <option value="Earphones $ Headsets">Earphones &amp; Headsets</option>
                            <option value="FM Transmitters">FM Transmitters</option>
                            <option value="Digital Cables">Digital Cables</option>
                            <option value="MountMaster TV Mounts">MountMaster TV Mounts</option>
                          </select>
                          <?PHP if (!$optone)
      echo "<font face=arial size=2 color=red>&nbsp; Product Category is Required. Please go <a class=type1 href=rmareq.html onClick=history.go(-1)>Back</a> and fill it in.</font>";?>
                          
                          <br />
                          <br /></td>
                    </tr>
                    <tr>
                      <td class='inputverify'>Product Model:</td>
                                             <td>  <br />
                          <select name="opttwo" size="1">
                            <option value='<?PHP echo($opttwo)?>'><?PHP echo($opttwo)?></option>
                          </select>
                          <?PHP if (!$opttwo)
      echo "<font face=arial size=2 color=red>&nbsp; Product is Required. Please go <a class=type1 href=rmareq.html onClick=history.go(-1)>Back</a> and fill it in.</font>";?>
                          <br />
                          <br />                      </td>
                    </tr>

The Javascript is the same as the first page.

Thank you for taking a look!

[Boogle]

Before we 'delve' into the code, are your menus ever going to change? This is a really really 'stale' and ineffective way of populating menus- you should be using a database or xml...

it's not difficult and there's much easier bunches of code for this!

Meanwhile i will look into your problem

Boog's

[CharlieWon]

Thanks Boogle! I am very much up for learning the correct way to do things. Just point me in the right direction, maybe some links to sites I can learn from. Or examples. I mostly need this to work correctly ASAP and then I can change it later with better code.

[Boogle]

this code should stop people from going forwards

<script type="text/javascript">
function validateSelections()
{
var dropDown1 = document.GetElementByID(yourDropDown1)
var dropDown2 = document.GetElementByID(yourDropDown2)

var sIndex1  = dropdown1.selectedIndex;
var sIndex2  = dropdown2.selectedIndex;

if(dropdown1.options[sIndex1].text == "" || dropdown2.options[sIndex2].text == "")
{
alert("Select an option from both please...");
}
}

</script>

Remember to give your <select></select> tags an id with yourDropDown1 and yourDropDown2 or choose your own

That works for me, but i still think you should definitly be using XML/DB to be populating menu's and PHP caters for this i am sure. However, I don't do PHP so couldn't help you with that bit.


HTH's
Boog's

[Boogle]

Link for PHP data example is this.

Just search in Google for PHP Data Dropdown lists or similar you will get the results you want...

Boog's

[CharlieWon]

I tried the above code to keep it from going anywhere. But I think my problem is that the second drop down box isn't populated until the first one has something selected. How do I require that someone select the first box and then require them to select the second box and not get taken to the validation page unless they have chosen something? The code is above. Thanks!!