PHP and Javascript Drop Down Dynamic Boxes

[emmahodd2]

After searching the Internut day and night, I have seen this problem many times before, but can't find a solution for what I need.

I have great problems understanding how the arrays work with javascript and php. I have seen what I want to achieve at
http://www.javascriptkit.com/script/script2/triplecombo.shtml

but how do i get my data in the arrays, instead of the current static values using php and mysql.

Mmmmm
Emma

[emmahodd2]

I have been hitting my head against a brick wall about this.

Has anyone ever managed to do it?

Emma

[synergypoint]

To do this you need to write PHP that outputs JavaScript.

Get you data from a DB, form input, or text file, and then write a script to output JavaScript that populates the arrays you need.

Here is a script I used to get some dates from a MySQL DB and then populate some dynamic drop down menu's using JS. In this example, when you select a year in the first drop down menu, the month select menu changes to only show months with events in the DB for the selected year.

<?PHP

/*
*******************************************************
*
*	Events Calendar Navigator
*
********************************************************
*/

//$DEBUG='TRUE';

//Events Selector

if(!$DBH)
{
	include(getenv("DOCUMENT_ROOT").'/common/include/opendb_inc.php');
}

//Get Months and Years which have dates

$result=$query("SELECT DISTINCT DATE_FORMAT(Date,'%Y') 'Year', DATE_FORMAT(Date,'%c') 'Month' FROM tEvents e, tEventDates d WHERE e.event_id=d.EventID AND e.active='Y' AND Date >= CURDATE() ORDER BY Year,Month");
if (mysql_errno())
{
	$result=db_error($errnofunc(),$errorfunc(),'','','');
	$message.=$result;
	if($DEBUG){trigger_error($result);}
}

while($row=$fetch_array($result))
{
	$active_events[$row['Year']][$row['Month']]='Y';
}

//Get Event Categories

$result=$query("SELECT DISTINCT c.ID 'ID', c.Title 'Title' FROM tEventCats c, tEventsXCats ec, tEvents e, tEventDates d WHERE e.active='Y' AND e.event_id=ec.EventID AND ec.CatID=c.ID AND c.Active='Y' AND e.event_id=d.EventID AND Date >= CURDATE() ORDER BY c.Title");
if (mysql_errno())
{
	$result=db_error($errnofunc(),$errorfunc(),'','','');
	$message.=$result;
	if($DEBUG){trigger_error($result);}
}

while($row=$fetch_array($result))
{
	$event_cats[]=array('ID'=>$row['ID'],'Title'=>$row['Title']);
}	

//Set Up Arrays to pass to JS

$js_output='';
$eventYears=array_keys($active_events);
for($i=0;$i<count($eventYears);$i++)
{
	$js_output.= "\t eventYears[$i]='$eventYears[$i]';\n";
	$js_output.= "\t var events_$eventYears[$i] = new Array(12);\n";

	for($j=1;$j<=12;$j++)
	{
		if($active_events[$eventYears[$i]][$j])
		{
			${'events_'.$eventYears[$i]}[$j]='y';
		}
		else
		{
			${'events_'.$eventYears[$i]}[$j]='n';
		}
		$js_output.="\t events_$eventYears[$i][$j]='".${'events_'.$eventYears[$i]}[$j]."';\n";
	}
	if($DEBUG)
	{
		echo '<br>';
		print_r(${'events_'.$eventYears[$i]});
	}
}

//Create Initial Month/Year Drop Down Menu
$monthYear_menu='';
if(count($eventYears)>0)
{
	//$year_menu.="<OPTION value=\"$eventYears[0]\" selected>$eventYears[0]</OPTION>\n";
	for($i=0;$i<count($eventYears);$i++)
	{
		$monthYear_menu.="<OPTION value=\"$eventYears[$i]\"";
		if($monthYear==$eventYears[$i])
		{
			$monthYear_menu.=" selected";
			$selected_year=$monthYear;
		}
		$monthYear_menu.=">$eventYears[$i]</OPTION>\n";
	}
}

//Create Initial Category/Year Drop Down Menu
$catYear_menu='';
if(count($eventYears)>0)
{
	//$year_menu.="<OPTION value=\"$eventYears[0]\" selected>$eventYears[0]</OPTION>\n";
	for($i=0;$i<count($eventYears);$i++)
	{
		$catYear_menu.="<OPTION value=\"$eventYears[$i]\"";
		if($catYear==$eventYears[$i])
		{
			$catYear_menu.=" selected";
		}
		$catYear_menu.=">$eventYears[$i]</OPTION>\n";
	}
}


$months=array(
	1=>'January  ',
	2=>'February ',
	3=>'March    ',
	4=>'April    ',
	5=>'May      ',
	6=>'June     ',
	7=>'July     ',
	8=>'August   ',
	9=>'September',
	10=>'October  ',
	11=>'November ',
	12=>'December '
);

//Create Initial Month Drop Down Menu
$month_menu='';
if(count($eventYears)>0)
{		
	$month_viewer="/events/month_view.php";

	if($selected_year)
	{
		$init_year=$selected_year;
	}
	else
	{
		$init_year=$eventYears[0];
	}

	$month_menu.="<OPTION value=\"\">Select Month</OPTION>\n";
	for($i=1;$i<=12;$i++)
	{
		if(${'events_'.$init_year}[$i]=='y')
		{
			$value=$i;
			$text=$months[$i];
			$month_menu.="<OPTION value=\"$value\"";
			if($selected_year && $month==$value)
			{
				$month_menu.=" selected";
			}
			$month_menu.=">$text</OPTION>\n";
		}
	}
}

//Create Category Select Radio Buttons

if(count($event_cats)>0)
{
	if(!$category)
	{
		$selected[0]='checked';
	}
	$cat_rbuttons.="<TABLE cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n";

	for($i=0;$i<count($event_cats);$i++)
	{
		if($category==$event_cats[$i]['ID'])
		{
			$selected[$i]='checked';
		}
		$cat_rbuttons.="<TR>\n";
		$cat_rbuttons.="<TD><INPUT type=\"radio\" name=\"category\" value=\"".$event_cats[$i]['ID']."\"". $selected[$i]."></TD>\n";
		$cat_rbuttons.="<TD class=\"bodytext\">".$event_cats[$i]['Title']."</TD>\n";
		$cat_rbuttons.="</TR>\n";
	}
	$cat_rbuttons.="</TABLE>\n";
}

?>
<SCRIPT language="JavaScript">

var eventYears = new Array();

<?=$js_output?>

function updateMonths(year)
{
	var listObj=document.dateSelectForm.month;

	var months= new Array(12);
	months[1]='January  ';
	months[2]='February ';
	months[3]='March    ';
	months[4]='April    ';
	months[5]='May      ';
	months[6]='June     ';
	months[7]='July     ';
	months[8]='August   ';
	months[9]='September';
	months[10]='October ';
	months[11]='November';
	months[12]='December';

	//Delete old list
	listObj.options.length=0;

	//Re-create list for selected year
	j=1;
	listObj.options[0] = new Option('Select Month','')
	for(i=1;i<=12;i++)
	{
		varname='events_'+year+'['+i+']';
		if(eval(varname)=='y')
		{
			listObj.options[j] = new Option(months[i],i)
			j++;
		}
	}
}	//End UpdateYear

function viewMonth(form)
{
	selObj=form.month;
	if(selObj.options[0].selected)
	{
		alert('Please select a month.');
		return false;
	}
	else
	{
		form.action="/events/month_view.php";
		//form.view="month";
		form.submit();
	}

}	//End viewMonth

function viewYear(form)
{
	form.action="/events/year_view.php";
	//form.view="year";
	form.submit();

}	//End viewYear

</SCRIPT>

<FORM name="dateSelectForm" action="">
<!--<input type="hidden" name="view" value="">-->
  <TABLE border="0" cellpadding="2" cellspacing="3">
  <TR>
    <TD class="bodytext"><font color="#CC0000"><b>View Events by the Month</b></font></TD>
  </TR>
  <TR>
    <TD><TABLE border="0" cellspacing="3" cellpadding="0">
      <TR>
        <TD><SELECT name="monthYear" id="year" onChange="updateMonths(this.value);" class="formtext"><?=$monthYear_menu?></SELECT></TD>
        <TD><SELECT name="month" id="month" class="formtext"><?=$month_menu?></SELECT></TD>
        <TD><INPUT name="viewmonth" type="image" src="/common/images/go.gif" width="28" height="28" border="0" onClick="viewMonth(this.form);return false;"></TD>
      </TR>
    </TABLE></TD>
  </TR>
  <TR>
    <TD><IMG src="/common/images/spacer.gif" width="10" height="5"></TD>
  </TR>
  <TR>
    <TD class="bodytext"><font color="#CC0000"><b>View Events by the Year</b></font></TD>
  </TR>
  <TR>
    <TD class="bodytext"><b>Event Type</b> (select one)</TD>
  </TR>
  <TR>
    <TD><?=$cat_rbuttons?></TD>
  </TR>
  <TR>
    <TD><TABLE border="0" cellspacing="3" cellpadding="0">
      <TR>
        <TD><SELECT name="catYear" id="Year2" class="formtext"><?=$catYear_menu?></SELECT></TD>
        <TD><INPUT name="viewyear" type="image" src="/common/images/go.gif" width="28" height="28" border="0" onClick="viewYear(this.form);return false;">
        </TD>
      </TR>
    </TABLE></TD>
  </TR>
</TABLE>
</FORM>