Question

I have radio buttons which when selected populate a dropdwn menu from mysql. Below is the code for the radio button:

<div>
  <input type="radio"  id="radioButton1" name="design" style="vertical-align: middle"  value=3 <?php echo ($_GET['design'] == 3 ? 'checked' : '') ?>/>
  <label for="design">Single Vision</label> 
</div>

I have five radio buttons with different ids. Depending on which radio button is checked javascript enables the display to block. This is part of the javascript:

if (form.radioButton1.checked) {
  sv2.style.display = "none";
  sv3.style.display = "none";
  sv4.style.display = "none";
  sv5.style.display = "none";
  sv.style.display = "block";
  sv.selectedIndex = 0;
}

I have five dropdown menu all with display:none.

Now depending on the checked radio button this is the code for the dropdown menu to be shown:

<select style="width:200px; display:none" name="pGroup1" id="sv" >
  <option value="Choose an Option" selected="selected">Choose Single Vision Product Group</option>
  <?php $selGroup = isset($_GET['pGroup1'])?$_GET['pGroup1']:"";
    $sql="SELECT DISTINCT pGroup FROM cr39 WHERE ";
    $sql.="HeadingNo = 3  ORDER BY pGroup ASC";
    $result =mysql_query($sql);
    while ($data=mysql_fetch_assoc($result)){
  ?>
  <option <?php if($data['pGroup'] == $selGroup) echo 'selected="selected"'; ?>  value ="<?php echo $data['pGroup'] ?>" ><?php echo $data['pGroup'] ?></option><?php } ?>
</select>

I am using the GET method and the submitted form has values of dropdown menu display:none. This creates a problem on my query as I need only the value of the select with display:block not other select with display:none.

Answer 1

It looks like your submitting a form with radio buttons and the value of the form modify a query which displays a select box. If that is so, why not use $_POST instead of $_GET? Also, be sure to escape and sanitize your data with mysql_real_escape_string($_GET['pGroup1']) or htmlspecialchars($_GET['pGroup1'], ENT_QUOTES, 'UTF-8');

AJAX Solution:

Use the following HTML:

<input type="radio" name="radioGroup-single" value="1" /><label for="radioGroup-single">Single Vision</label> 
<input type="radio" name="radioGroup-whatever" value="2" /><label for="radioGroup-whatever">Whatever Vision</label> 
<input type="radio" name="radioGroup-another" value="3" /><label for="radioGroup-another">Another Vision</label> 

Use the following jQuery:

$("input:radio[name=radioGroup]").click(function() {
    var pGroupId = $(this).val();
    $('#myDropdownDiv').load('myDropdownBoxPage.php?pGroupId='+pGroupId);
});

Put a DIV in your page like this that will be filled with the contents:

<div id="myDropdownDiv"></div>

Create a page like this called myDropdownBoxPage.php:

<select style="width:200px; display:none" name="pGroup1" id="sv" >
  <option value="Choose an Option" selected="selected">Choose Single Vision Product Group</option>
  <?php $selGroup = isset($_GET['pGroupId'])?$_GET['pGroupId']:"";
    $sql="SELECT DISTINCT pGroup FROM cr39 WHERE ";
    $sql.="HeadingNo = 3  ORDER BY pGroup ASC";
    $result =mysql_query($sql);
    while ($data=mysql_fetch_assoc($result)){
  ?>
  <option <?php if($data['pGroup'] == $selGroup) echo 'selected="selected"'; ?>  value ="<?php echo $data['pGroup'] ?>" ><?php echo $data['pGroup'] ?></option><?php } ?>
</select>