I have been looking round the net for answer to my problem , but nothing points to the same problem I have.
I know this can be done because I know a couple of sites that do it.
anyway heres my problem. I run a motocross site with videos and images. On the images page I have a heading called championship and a group of links listed below taken from a mysql db. I then call an sql command to connect to the db to list the tracks etc etc
anyway i want to use drop downs and not reload the page.
heres some example code of what i have done so far, but what I need is to be able to pass the value of the javascript variable 'champ' to the php variable $champ
<HEAD>
<script type="text/javascript">
var arrItems1 = new Array();
var arrItemsGrp1 = new Array();
var champ=document.getElementById("Choice");
<?
$champ=?>document.champ.value<?
$i=0;
require("connect.php");
$sql="SELECT * FROM images WHERE championship='$champ' ";
$rs=mysql_query($sql);
$num=mysql_numrows($rs);
while ($row=mysql_fetch_array($rs))
{
$track[$i]=$row['track'];
?>
arrItems1[<? echo $i; ?>] = "<? echo $track[$i]; ?>";
arrItemsGrp1[<? echo $i; ?>] = 1;
<?
$i++;
}
?>
function selectChange(control, controlToPopulate, ItemArray, GroupArray) {
var myEle ;
var x ;
// Empty the second drop down box of any choices
for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
if (control.name == "firstChoice") {
// Empty the third drop down box of any choices
for (var q=form.thirdChoice.options.length;q>=0;q--) form.thirdChoice.options[q] = null;
}
// ADD Default Choice - in case there are no values
myEle = document.createElement("option") ;
myEle.value = 0 ;
myEle.text = "[SELECT]" ;
// controlToPopulate.add(myEle) ;
controlToPopulate.appendChild(myEle)
// Now loop through the array of individual items
// Any containing the same child id are added to
// the second dropdown box
for ( x = 0 ; x < ItemArray.length ; x++ ) {
if ( GroupArray[x] == control.value ) {
myEle = document.createElement("option") ;
//myEle.value = x ;
myEle.setAttribute('value',x);
// myEle.text = ItemArray[x] ;
var txt = document.createTextNode(ItemArray[x]);
myEle.appendChild(txt)
// controlToPopulate.add(myEle) ;
controlToPopulate.appendChild(myEle)
}
}
}
function selectChange(control, controlToPopulate, ItemArray, GroupArray) {
var myEle ;
var x ;
// Empty the second drop down box of any choices
for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
if (control.name == "firstChoice") {
// Empty the third drop down box of any choices
for (var q=form.thirdChoice.options.length;q>=0;q--) form.thirdChoice.options[q] = null;
}
// ADD Default Choice - in case there are no values
myEle=document.createElement("option");
theText=document.createTextNode("[SELECT]");
myEle.appendChild(theText);
myEle.setAttribute("value","0");
controlToPopulate.appendChild(myEle);
// Now loop through the array of individual items
// Any containing the same child id are added to
// the second dropdown box
for ( x = 0 ; x < ItemArray.length ; x++ ) {
if ( GroupArray[x] == control.value ) {
myEle = document.createElement("option") ;
//myEle.value = x ;
myEle.setAttribute("value",x);
// myEle.text = ItemArray[x] ;
var txt = document.createTextNode(ItemArray[x]);
myEle.appendChild(txt)
// controlToPopulate.add(myEle) ;
controlToPopulate.appendChild(myEle)
}
}
}
// -->
</script>
</HEAD>
<BODY>
<form name=form>
<table align="center">
<tr>
<td>
<select id="Choice" action=" name="firstChoice" onchange="selectChange(this, form.secondChoice, arrItems1, arrItemsGrp1);">
<option value="0" selected>[SELECT]</option>
<option value="1">British Championship</option>
<option value="2">DEP Championship</option>
<option value="3">BYMX</option>
</select>
</td><td>
</td>
</tr>
</table>
</form>
any help would be grateful.
I know this can be done because I know a couple of sites that do it.
anyway heres my problem. I run a motocross site with videos and images. On the images page I have a heading called championship and a group of links listed below taken from a mysql db. I then call an sql command to connect to the db to list the tracks etc etc
anyway i want to use drop downs and not reload the page.
heres some example code of what i have done so far, but what I need is to be able to pass the value of the javascript variable 'champ' to the php variable $champ
<HEAD>
<script type="text/javascript">
var arrItems1 = new Array();
var arrItemsGrp1 = new Array();
var champ=document.getElementById("Choice");
<?
$champ=?>document.champ.value<?
$i=0;
require("connect.php");
$sql="SELECT * FROM images WHERE championship='$champ' ";
$rs=mysql_query($sql);
$num=mysql_numrows($rs);
while ($row=mysql_fetch_array($rs))
{
$track[$i]=$row['track'];
?>
arrItems1[<? echo $i; ?>] = "<? echo $track[$i]; ?>";
arrItemsGrp1[<? echo $i; ?>] = 1;
<?
$i++;
}
?>
function selectChange(control, controlToPopulate, ItemArray, GroupArray) {
var myEle ;
var x ;
// Empty the second drop down box of any choices
for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
if (control.name == "firstChoice") {
// Empty the third drop down box of any choices
for (var q=form.thirdChoice.options.length;q>=0;q--) form.thirdChoice.options[q] = null;
}
// ADD Default Choice - in case there are no values
myEle = document.createElement("option") ;
myEle.value = 0 ;
myEle.text = "[SELECT]" ;
// controlToPopulate.add(myEle) ;
controlToPopulate.appendChild(myEle)
// Now loop through the array of individual items
// Any containing the same child id are added to
// the second dropdown box
for ( x = 0 ; x < ItemArray.length ; x++ ) {
if ( GroupArray[x] == control.value ) {
myEle = document.createElement("option") ;
//myEle.value = x ;
myEle.setAttribute('value',x);
// myEle.text = ItemArray[x] ;
var txt = document.createTextNode(ItemArray[x]);
myEle.appendChild(txt)
// controlToPopulate.add(myEle) ;
controlToPopulate.appendChild(myEle)
}
}
}
function selectChange(control, controlToPopulate, ItemArray, GroupArray) {
var myEle ;
var x ;
// Empty the second drop down box of any choices
for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
if (control.name == "firstChoice") {
// Empty the third drop down box of any choices
for (var q=form.thirdChoice.options.length;q>=0;q--) form.thirdChoice.options[q] = null;
}
// ADD Default Choice - in case there are no values
myEle=document.createElement("option");
theText=document.createTextNode("[SELECT]");
myEle.appendChild(theText);
myEle.setAttribute("value","0");
controlToPopulate.appendChild(myEle);
// Now loop through the array of individual items
// Any containing the same child id are added to
// the second dropdown box
for ( x = 0 ; x < ItemArray.length ; x++ ) {
if ( GroupArray[x] == control.value ) {
myEle = document.createElement("option") ;
//myEle.value = x ;
myEle.setAttribute("value",x);
// myEle.text = ItemArray[x] ;
var txt = document.createTextNode(ItemArray[x]);
myEle.appendChild(txt)
// controlToPopulate.add(myEle) ;
controlToPopulate.appendChild(myEle)
}
}
}
// -->
</script>
</HEAD>
<BODY>
<form name=form>
<table align="center">
<tr>
<td>
<select id="Choice" action=" name="firstChoice" onchange="selectChange(this, form.secondChoice, arrItems1, arrItemsGrp1);">
<option value="0" selected>[SELECT]</option>
<option value="1">British Championship</option>
<option value="2">DEP Championship</option>
<option value="3">BYMX</option>
</select>
</td><td>
</td>
</tr>
</table>
</form>
any help would be grateful.