PHP Without Dropdown Refresh

amax

Hi All, I would love some advice on this. I am populating 3 dropdown selections from a database i.e. user selects dropdown 1 and dropdown 2 is populated depending on the selection. I have this working perfectly, and populate my dropdowns as follows:

<select name="cat" onchange="reload(this.form)">
<option value=''>Select Main Category</option>
<?php
while($categorySelect = mysql_fetch_array($mainCategoryQuery)) { 
if($categorySelect['category']==@$cat){
echo "<option selected value='$categorySelect[category]'>$categorySelect[category]</option>"."<BR>";
}
else{echo  "<option value='$categorySelect[category]'>$categorySelect[category]</option>";}
}
?>
</select>

My javascript function is as follows:

function reload(form)
{
var val=form.cat.options[form.cat.options.selectedIndex].value; 
self.location='index.php?cat=' + val;
enableField();
}

However, my question is that each time the user chooses a selection, the page refreshes to give me the index.php?cat= part of the URL. Is there anyway I can still form this URL without having the page refresh each time, whilst still using a PHP only solution, or do I need to look at AJAX or something else.

ixalmida

Not sure why you'd use a form refresh (or if it even works). On my site I use Javascript arrays to dynamically populate drop-downs on the client.

Example:

<script>
var box2array = new array(new array());
var box3array = new array(new array());

<?PHP
$query = "SELECT box1_value, box2_value, box2_desc FROM Box2Table ORDER BY box1_value ASC";
$result = mysql_query($query, $conn);
$i = 0;
while($row = mysql_fetch_array($result))
  {
  extract($row);
  echo "box2array[$box1_value][$i] = ['$box2_desc', '$box2_value']";
  $i++;
  }

$query = "SELECT box2_value, box3_value, box3_desc FROM Box3Table ORDER BY box2_value ASC";
$result = mysql_query($query, $conn);
$i = 0;
while($row = mysql_fetch_array($result))
  {
  extract($row);
  echo "box3array[$box2_value][$i] = ['$box3_desc', '$box3_value']";
  $i++;
  }
?>

function populateBox2(box1_value)
  {
  var v = box1_value;
  var x;
  for(x = 0; x < box2array[box1_value].length; ++x)
    {
    document.form1.box2.options[x] = new Option(box2array[v][x][0], box2array[v][x][1], null);
    }
  }

function populateBox3(box2_value)
  {
  var v = box2_value;
  var x;
  for(x = 0; x < box3array[box2_value].length; ++x)
    {
    document.form1.box3.options[x] = new Option(box3array[v][x][0], box3array[v][x][1], null);
    }
  }
</script>

<body>

<form name="form1">
  <select name="box1" onChange="populateBox2(this.value);">
    <!-- populate box1 manually or using PHP here ... -->
  </select>

  <select name="box2" onChange="populateBox3(this.value);"></select>
  <select name="box3"></select>
</form>

</body>

I believe this script will work as-is, though I haven't tested it. I use something very similar on my own site.

ixalmida

Oops, I just noticed....when echoing the Javascript in my code above, don't forget your semicolons and maybe a newline to make the HTML more readable. 🙂