sklim
asked on
dynamic list
Is it possible to combine JavaScript and php together so that the items in a combo box is dynamic?
The situation is : Let say I have two combo box (optSchool and optName), once i've selected an item from the first one, the content of the second combo box should change. And these content has to be retrieve from the mySQL database, not the static one.
How do i achieve this?
The situation is : Let say I have two combo box (optSchool and optName), once i've selected an item from the first one, the content of the second combo box should change. And these content has to be retrieve from the mySQL database, not the static one.
How do i achieve this?
ASKER
Sorry, i'm still don't quite get the way yet. Can u please explain a bit on the $conn1 and $conn2?
ASKER
Another question, does this code works for all the browsers?
ASKER
May I know what's wrong with these code?
Let say I have 2 combo box : optSchool and optName.
<script>
function show(){
index = document.frmCriteria.optSc
q = document.frmCriteria.optSc
<?php
$var = q;
$rsSelect = mysql_query("SELECT Secname, Firstname, ID FROM Membership WHERE School = '$var'", $dbEdu);
if ($rsName = mysql_fetch_array($rsSelec
$ctr = 0;
do{
$name = $rsName["ID"];
echo "document.frmCriteria.optN
$ctr = $ctr + 1;
//echo "<option>", $rsName["Secname"].", ".$rsName["Firstname"].", ".$rsName["ID"], "</option>";
} while ($rsName = mysql_fetch_array($rsSelec
} else {
echo "alert('nothing');";
}
?>
}
</script>
Let say I have 2 combo box : optSchool and optName.
<script>
function show(){
index = document.frmCriteria.optSc
q = document.frmCriteria.optSc
<?php
$var = q;
$rsSelect = mysql_query("SELECT Secname, Firstname, ID FROM Membership WHERE School = '$var'", $dbEdu);
if ($rsName = mysql_fetch_array($rsSelec
$ctr = 0;
do{
$name = $rsName["ID"];
echo "document.frmCriteria.optN
$ctr = $ctr + 1;
//echo "<option>", $rsName["Secname"].", ".$rsName["Firstname"].", ".$rsName["ID"], "</option>";
} while ($rsName = mysql_fetch_array($rsSelec
} else {
echo "alert('nothing');";
}
?>
}
</script>
ASKER
Edited text of question.
ASKER
Adjusted points from 100 to 150
ASKER
Can somebody please answer my question? if can solve my problem i promise to increase the points. : )
I already got the idea how to do the dynamic list but there is still a minor problem. How do I pass the value from the javascript (or from the form) to php.
eg.
<script>
var = document.frmName.frmOption
<?php>
// How to access var here?
$AAA = var; // this doesn't work
$AAA = $var; // this doesn't work too
// i need the value for the sql statement to access mysql database
$rsSelect = mysql_query("SELECT Firstname, ID FROM Membership WHERE School = '$AAA'", $dbEdu);
?>
</script>
I already got the idea how to do the dynamic list but there is still a minor problem. How do I pass the value from the javascript (or from the form) to php.
eg.
<script>
var = document.frmName.frmOption
<?php>
// How to access var here?
$AAA = var; // this doesn't work
$AAA = $var; // this doesn't work too
// i need the value for the sql statement to access mysql database
$rsSelect = mysql_query("SELECT Firstname, ID FROM Membership WHERE School = '$AAA'", $dbEdu);
?>
</script>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Below a piece of javascript which works:
<HTML>
<HEAD>
</HEAD>
<BODY>
<SCRIPT><!--
var arrayLength = 0;
function fillSelect(inForm)
{
if (inForm.pull1down1.selecte
<%
//add your php stuff here to create the option lists
%>
alphabet = new Array('a','b','c','d','e',
arrayLength = alphabet.length;
var option0 = new Option('a', 'alpha_a');
var option1 = new Option('b', 'alpha_b');
var option2 = new Option('c', 'alpha_c');
var option3 = new Option('d', 'alpha_d');
var option4 = new Option('e', 'alpha_e');
var option5 = new Option('f', 'alpha_f');
}
else {
<%
//add your php stuff here to create the option lists
%>
numbers = new Array(1,2,3,4,5,6);
arrayLength = numbers.length;
var option0 = new Option('1', 'num1');
var option1 = new Option('2', 'num2');
var option2 = new Option('3', 'num3');
var option3 = new Option('4', 'num4');
var option4 = new Option('5', 'num5');
var option5 = new Option('6', 'num6');
}
for (var i=0; i < arrayLength; i++) {
eval("inForm.pulldown2.opt
if (i==0) {
inForm.pulldown2.options[i
}
}
history.go(0);
}
// -->
</SCRIPT>
<FORM name="testForm">
<SELECT name="pull1down1" onChange="fillSelect(this.
<OPTION selected>Alphabet
<OPTION>Numbers
</SELECT>
<SELECT name="pulldown2">
</SELECT>
</FORM>
</BODY>
</HTML>
<HTML>
<HEAD>
</HEAD>
<BODY>
<SCRIPT><!--
var arrayLength = 0;
function fillSelect(inForm)
{
if (inForm.pull1down1.selecte
<%
//add your php stuff here to create the option lists
%>
alphabet = new Array('a','b','c','d','e',
arrayLength = alphabet.length;
var option0 = new Option('a', 'alpha_a');
var option1 = new Option('b', 'alpha_b');
var option2 = new Option('c', 'alpha_c');
var option3 = new Option('d', 'alpha_d');
var option4 = new Option('e', 'alpha_e');
var option5 = new Option('f', 'alpha_f');
}
else {
<%
//add your php stuff here to create the option lists
%>
numbers = new Array(1,2,3,4,5,6);
arrayLength = numbers.length;
var option0 = new Option('1', 'num1');
var option1 = new Option('2', 'num2');
var option2 = new Option('3', 'num3');
var option3 = new Option('4', 'num4');
var option4 = new Option('5', 'num5');
var option5 = new Option('6', 'num6');
}
for (var i=0; i < arrayLength; i++) {
eval("inForm.pulldown2.opt
if (i==0) {
inForm.pulldown2.options[i
}
}
history.go(0);
}
// -->
</SCRIPT>
<FORM name="testForm">
<SELECT name="pull1down1" onChange="fillSelect(this.
<OPTION selected>Alphabet
<OPTION>Numbers
</SELECT>
<SELECT name="pulldown2">
</SELECT>
</FORM>
</BODY>
</HTML>
What you need to do is create arrays in javascript that contain your options. These javascript arrays are dynamically built by php driven by some information resource such as MySQL.
The HTML code below was created using a php script. This was just a test I created to proove out PHP/MySQL. You should be able to paste the HTML code as an HTML document and have it run. You see that when an item in select box 1 is selected, select box 2 changes. You have to click the down arrow to see the changes in box 2.
**************************
**************************
**************************
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META NAME="GENERATOR" CONTENT="Mozilla/4.04 [en] (Win95; I) [Netscape]">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<TITLE>Employee Of The Month</TITLE>
<SCRIPT LANGUAGE="JavaScript1.1">
var pitm = new Array();
var ptyp = new Array();
pitm[0] = new Array("00000001","Director
ptyp[0] = new Array();
ptyp[0][0] = new Array("00000001","Black and Green");
ptyp[0][1] = new Array("00000002","Blue and Red");
ptyp[0][2] = new Array("00000003","item number 3");
pitm[1] = new Array("00000002","AM/FM Radio");
ptyp[1] = new Array();
ptyp[1][0] = new Array("00000001","White");
ptyp[1][1] = new Array("00000002","Black");
pitm[2] = new Array("00000004","Shoe Carnival Gift Certificate");
ptyp[2] = new Array();
ptyp[2][0] = new Array("00000001","Work Shoes");
ptyp[2][1] = new Array("00000002","Sandals"
ptyp[2][2] = new Array("00000003","Work Boots");
function changePtyp(itmsel) {
var selectOBJ = document.forms[0].typelist
var i
var x
if (itmsel == "") {
selectOBJ.length = 1;
selectOBJ.options[0] = new Option("--No Item Selected--",0);
} else {
selectOBJ.length = ptyp[itmsel].length + 1;
selectOBJ.options[0] = new Option("--No Item Selected--","");
for (i = 0; i < ptyp[itmsel].length; i++) {
selectOBJ.options[i + 1] = new Option(ptyp[itmsel][i][1],
}
}
selectOBJ.options[0].selec
}
function validate(form) {
if (form.emplist.value == "") {
alert('Employee Not Selected');
return false;
} else if (form.month.value == "" ) {
alert('Month Not Selected');
return false;
} else if (form.year.value == "" ) {
alert('Year Not Selected');
return false;
} else if (form.itemlist.value == "" ) {
alert('Item Not Selected');
return false;
} else if (form.typelist.value == "" ) {
alert('Item Type Not Selected');
return false;
} else {
i = form.itemlist.value;
form.itemlist.options[0].v
form.itemlist.options[0].s
x = form.typelist.value;
form.typelist.options[0].v
form.typelist.options[0].s
return true;
}
}
</SCRIPT>
</HEAD>
<BODY><H1 ALIGN="center">Employee Of The Month Award</H1>
<DIV ALIGN="center">
<FORM NAME="testfrm" METHOD="POST" onSubmit="return validate(this)">
<TABLE BORDER=0>
<TR>
<TD ALIGN="center" WIDTH="25%"><B>Employee Selection</B></TD>
<TD COLSPAN="2" ALIGN="center" WIDTH="15%"><B>Month</B></
<TD ALIGN="center" WIDTH="10%"><B>Year</B></T
<TD ALIGN="center" WIDTH="25%"><B>Item Selection</B></TD>
<TD ALIGN="center" WIDTH="25%"><B>Item Type Selection</B></TD>
<TR>
<TD ALIGN="center" VALIGN="top" WIDTH="25%">
<SELECT NAME="emplist">
<OPTION VALUE="" SELECTED>--Select Employee--
<OPTION VALUE=0001>0001 Emp1F Emp1L
<OPTION VALUE=0002>0002 Emp2F Emp2L
<OPTION VALUE=0003>0003 Emp3F Emp3L
</SELECT>
</TD>
<TD VALIGN="top" WIDTH="6%">
<INPUT TYPE="radio" NAME="month" VALUE="1" CHECKED>Jan<BR>
<INPUT TYPE="radio" NAME="month" VALUE="2" >Feb<BR>
<INPUT TYPE="radio" NAME="month" VALUE="3" >Mar<BR>
<INPUT TYPE="radio" NAME="month" VALUE="4" >Apr<BR>
<INPUT TYPE="radio" NAME="month" VALUE="5" >May<BR>
<INPUT TYPE="radio" NAME="month" VALUE="6" >Jun
</TD>
<TD VALIGN="top" WIDTH="6%">
<INPUT TYPE="radio" NAME="month" VALUE="7" >Jul<BR>
<INPUT TYPE="radio" NAME="month" VALUE="8" >Aug<BR>
<INPUT TYPE="radio" NAME="month" VALUE="9" >Sep<BR>
<INPUT TYPE="radio" NAME="month" VALUE="10">Oct<BR>
<INPUT TYPE="radio" NAME="month" VALUE="11">Nov<BR>
<INPUT TYPE="radio" NAME="month" VALUE="12">Dec
</TD>
<TD ALIGN="center" VALIGN="top" WIDTH="10%">
<INPUT TYPE="radio" NAME="year" VALUE="2000" CHECKED>2000<BR>
<INPUT TYPE="radio" NAME="year" VALUE="2001">2001
</TD>
<TD ALIGN="center" VALIGN="top" WIDTH="25%">
<SELECT NAME="itemlist" onChange="changePtyp(optio
<OPTION VALUE="" SELECTED>--Select Item--
<OPTION VALUE=0>Directors Chair
<OPTION VALUE=1>AM/FM Radio
<OPTION VALUE=2>Shoe Carnival Gift Certificate
</SELECT>
</TD>
<TD ALIGN="center" VALIGN="top" WIDTH="25%">
<SELECT NAME="typelist">
<OPTION VALUE="" SELECTED>--No Item Selected--
</SELECT>
</TD>
</TR>
<TR>
<TD COLSPAN="6" ALIGN="center" VALIGN="bottom">
<BR><BR><BR><BR>
<INPUT TYPE="submit" VALUE="SUBMIT" NAME="submit">
<INPUT TYPE="reset" VALUE="RESET" NAME="reset">
</TD>
</TR>
</TABLE>
</FORM>
</DIV>
</BODY>
</HTML>
**************************
**************************
**************************
Each set of items were dynamically built from a MySQL database. Below is the PHP script I created to accomplish this task:
**************************
**************************
<?php
// this is a test
// Connect to the database
$db = mysql_connect("localhost",
mysql_select_db("storedb",
if ($submit) {
$sql = "SELECT *
FROM empawards
WHERE empno = '$emplist'
AND month = '$month'
AND year = '$year'";
$awrd_r = mysql_query($sql,$db);
if (mysql_num_rows($awrd_r)) {
$sql = "UPDATE empawards
SET itemno = '$itemlist',
itemtype = '$typelist'
WHERE empno = '$emplist'
AND month = '$month'
AND year = '$year'";
} else {
$sql = "INSERT
INTO empawards
( empno,
month,
year,
itemno,
itemtype
)
VALUES ( '$emplist',
'$month',
'$year',
'$itemlist',
'$typelist'
)";
}
mysql_query($sql,$db);
}
/* Get list of prize items available
The items are stored in a 2 dimensional array:
pitm is an array of arrays where each pitm[] is dimensioned by 2.
pitm[0] is the first item in the list (which also is an array), pitm[1]
is the second item in the list (which also is an array) and so on.
pitm[itempointer][item num/item description]
pitm[0][0] = the item number for item #1.
pitm[0][1] = the item description for item #1.
pitm[1][0] = the item number for item #2.
etc....
*/
$przi_q = mysql_query("SELECT * FROM prizeitem",$db);
if ($przi_r = mysql_fetch_array($przi_q)
do {
$pitm[] = array($przi_r["itemno"], $przi_r["descript"]);
} while ($przi_r = mysql_fetch_array($przi_q)
}
$itmcnt=count($pitm);
/* Get list of prize item types by item.
The item types are stored in a 3 dimensional array by item. The ptyp
array is an array of arrays of arrays.
ptyp[itemnumber][prizetype
ptyp[0][0][0] = The prize type number for prize type #1 of
item #1.
ptyp[0][0][1] = The prize type description for prize type #1 of
item #1.
ptyp[0][1][0] = The prize type number for prize type #2 of
item #1.
ptyp[1][1][1] = The prize type description for prize type #2 of
item #2.
*/
?>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META NAME="GENERATOR" CONTENT="Mozilla/4.04 [en] (Win95; I) [Netscape]">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<TITLE>Employee Of The Month</TITLE>
<SCRIPT LANGUAGE="JavaScript1.1">
var pitm = new Array();
var ptyp = new Array();
<?php
/*
Create the arrays used in the javascript function to recreate the list of
prize types for the prize type selection box of the HTML page
Get list of prize item types by item.
The item types are stored in a 3 dimensional array by item. The ptyp
array is an array of arrays of arrays.
ptyp[itemnumber][prizetype
ptyp[0][0][0] = The prize type number for prize type #1 of item #1.
ptyp[0][0][1] = The prize type description for prize type #1 of item #1.
ptyp[0][1][0] = The prize type number for prize type #2 of item #1.
ptyp[1][1][1] = The prize type description for prize type #2 of item #2.
*/
for ($i = 0; $i < $itmcnt; ++$i) {
$itm = $pitm[$i][0];
$sql = "SELECT *
FROM prizetype
WHERE itemno = $itm";
$przt_q = mysql_query($sql,$db);
printf("pitm[%s] = new Array(\"%s\",\"%s\");\n",
$i,$pitm[$i][0],$pitm[$i][
printf("ptyp[%s] = new Array();\n",$i);
$j = 0;
if ($przt_r = mysql_fetch_array($przt_q)
do {
printf("ptyp[%s][%s] = new Array(\"%s\",\"%s\");\n",
$i,$j++,$przt_r["itemtype"
} while ($przt_r = mysql_fetch_array($przt_q)
}
}
?>
function changePtyp(itmsel) {
var selectOBJ = document.forms[0].typelist
var i
var x
if (itmsel == "") {
selectOBJ.length = 1;
selectOBJ.options[0] = new Option("--No Item Selected--",0);
} else {
selectOBJ.length = ptyp[itmsel].length + 1;
selectOBJ.options[0] = new Option("--No Item Selected--","");
for (i = 0; i < ptyp[itmsel].length; i++) {
selectOBJ.options[i + 1] = new Option(ptyp[itmsel][i][1],
}
}
selectOBJ.options[0].selec
}
function validate(form) {
if (form.emplist.value == "") {
alert('Employee Not Selected');
return false;
} else if (form.month.value == "" ) {
alert('Month Not Selected');
return false;
} else if (form.year.value == "" ) {
alert('Year Not Selected');
return false;
} else if (form.itemlist.value == "" ) {
alert('Item Not Selected');
return false;
} else if (form.typelist.value == "" ) {
alert('Item Type Not Selected');
return false;
} else {
i = form.itemlist.value;
form.itemlist.options[0].v
form.itemlist.options[0].s
x = form.typelist.value;
form.typelist.options[0].v
form.typelist.options[0].s
return true;
}
}
</SCRIPT>
</HEAD>
<BODY><H1 ALIGN="center">Employee Of The Month Award</H1>
<DIV ALIGN="center">
<FORM NAME="testfrm" METHOD="POST" onSubmit="return validate(this)">
<TABLE BORDER=0>
<TR>
<TD ALIGN="center" WIDTH="25%"><B>Employee Selection</B></TD>
<TD COLSPAN="2" ALIGN="center" WIDTH="15%"><B>Month</B></
<TD ALIGN="center" WIDTH="10%"><B>Year</B></T
<TD ALIGN="center" WIDTH="25%"><B>Item Selection</B></TD>
<TD ALIGN="center" WIDTH="25%"><B>Item Type Selection</B></TD>
<TR>
<TD ALIGN="center" VALIGN="top" WIDTH="25%">
<SELECT NAME="emplist">
<OPTION VALUE="" SELECTED>--Select Employee--
<?php
// Create the employee select box
$empl_q = mysql_query("SELECT * FROM employee",$db);
if ($empl_r = mysql_fetch_array($empl_q)
do {
printf("<OPTION VALUE=%s>%s %s %s\n",
$empl_r["empno"],$empl_r["
$empl_r["fname"],$empl_r["
} while ($empl_r = mysql_fetch_array($empl_q)
}
?>
</SELECT>
</TD>
<TD VALIGN="top" WIDTH="6%">
<INPUT TYPE="radio" NAME="month" VALUE="1" CHECKED>Jan<BR>
<INPUT TYPE="radio" NAME="month" VALUE="2" >Feb<BR>
<INPUT TYPE="radio" NAME="month" VALUE="3" >Mar<BR>
<INPUT TYPE="radio" NAME="month" VALUE="4" >Apr<BR>
<INPUT TYPE="radio" NAME="month" VALUE="5" >May<BR>
<INPUT TYPE="radio" NAME="month" VALUE="6" >Jun
</TD>
<TD VALIGN="top" WIDTH="6%">
<INPUT TYPE="radio" NAME="month" VALUE="7" >Jul<BR>
<INPUT TYPE="radio" NAME="month" VALUE="8" >Aug<BR>
<INPUT TYPE="radio" NAME="month" VALUE="9" >Sep<BR>
<INPUT TYPE="radio" NAME="month" VALUE="10">Oct<BR>
<INPUT TYPE="radio" NAME="month" VALUE="11">Nov<BR>
<INPUT TYPE="radio" NAME="month" VALUE="12">Dec
</TD>
<TD ALIGN="center" VALIGN="top" WIDTH="10%">
<INPUT TYPE="radio" NAME="year" VALUE="2000" CHECKED>2000<BR>
<INPUT TYPE="radio" NAME="year" VALUE="2001">2001
</TD>
<TD ALIGN="center" VALIGN="top" WIDTH="25%">
<SELECT NAME="itemlist" onChange="changePtyp(optio
e);">
<OPTION VALUE="" SELECTED>--Select Item--
<?php
// Create the prize item select box
for ($i = 0; $i < $itmcnt; ++$i) {
printf("<OPTION VALUE=%s>%s\n",$i,$pitm[$i
}
?>
</SELECT>
</TD>
<TD ALIGN="center" VALIGN="top" WIDTH="25%">
<SELECT NAME="typelist">
<OPTION VALUE="" SELECTED>--No Item Selected--
</SELECT>
</TD>
</TR>
<TR>
<TD COLSPAN="6" ALIGN="center" VALIGN="bottom">
<BR><BR><BR><BR>
<INPUT TYPE="submit" VALUE="SUBMIT" NAME="submit">
<INPUT TYPE="reset" VALUE="RESET" NAME="reset">
</TD>
</TR>
</TABLE>
</FORM>
</DIV>
</BODY>
</HTML>
The HTML code below was created using a php script. This was just a test I created to proove out PHP/MySQL. You should be able to paste the HTML code as an HTML document and have it run. You see that when an item in select box 1 is selected, select box 2 changes. You have to click the down arrow to see the changes in box 2.
**************************
**************************
**************************
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META NAME="GENERATOR" CONTENT="Mozilla/4.04 [en] (Win95; I) [Netscape]">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<TITLE>Employee Of The Month</TITLE>
<SCRIPT LANGUAGE="JavaScript1.1">
var pitm = new Array();
var ptyp = new Array();
pitm[0] = new Array("00000001","Director
ptyp[0] = new Array();
ptyp[0][0] = new Array("00000001","Black and Green");
ptyp[0][1] = new Array("00000002","Blue and Red");
ptyp[0][2] = new Array("00000003","item number 3");
pitm[1] = new Array("00000002","AM/FM Radio");
ptyp[1] = new Array();
ptyp[1][0] = new Array("00000001","White");
ptyp[1][1] = new Array("00000002","Black");
pitm[2] = new Array("00000004","Shoe Carnival Gift Certificate");
ptyp[2] = new Array();
ptyp[2][0] = new Array("00000001","Work Shoes");
ptyp[2][1] = new Array("00000002","Sandals"
ptyp[2][2] = new Array("00000003","Work Boots");
function changePtyp(itmsel) {
var selectOBJ = document.forms[0].typelist
var i
var x
if (itmsel == "") {
selectOBJ.length = 1;
selectOBJ.options[0] = new Option("--No Item Selected--",0);
} else {
selectOBJ.length = ptyp[itmsel].length + 1;
selectOBJ.options[0] = new Option("--No Item Selected--","");
for (i = 0; i < ptyp[itmsel].length; i++) {
selectOBJ.options[i + 1] = new Option(ptyp[itmsel][i][1],
}
}
selectOBJ.options[0].selec
}
function validate(form) {
if (form.emplist.value == "") {
alert('Employee Not Selected');
return false;
} else if (form.month.value == "" ) {
alert('Month Not Selected');
return false;
} else if (form.year.value == "" ) {
alert('Year Not Selected');
return false;
} else if (form.itemlist.value == "" ) {
alert('Item Not Selected');
return false;
} else if (form.typelist.value == "" ) {
alert('Item Type Not Selected');
return false;
} else {
i = form.itemlist.value;
form.itemlist.options[0].v
form.itemlist.options[0].s
x = form.typelist.value;
form.typelist.options[0].v
form.typelist.options[0].s
return true;
}
}
</SCRIPT>
</HEAD>
<BODY><H1 ALIGN="center">Employee Of The Month Award</H1>
<DIV ALIGN="center">
<FORM NAME="testfrm" METHOD="POST" onSubmit="return validate(this)">
<TABLE BORDER=0>
<TR>
<TD ALIGN="center" WIDTH="25%"><B>Employee Selection</B></TD>
<TD COLSPAN="2" ALIGN="center" WIDTH="15%"><B>Month</B></
<TD ALIGN="center" WIDTH="10%"><B>Year</B></T
<TD ALIGN="center" WIDTH="25%"><B>Item Selection</B></TD>
<TD ALIGN="center" WIDTH="25%"><B>Item Type Selection</B></TD>
<TR>
<TD ALIGN="center" VALIGN="top" WIDTH="25%">
<SELECT NAME="emplist">
<OPTION VALUE="" SELECTED>--Select Employee--
<OPTION VALUE=0001>0001 Emp1F Emp1L
<OPTION VALUE=0002>0002 Emp2F Emp2L
<OPTION VALUE=0003>0003 Emp3F Emp3L
</SELECT>
</TD>
<TD VALIGN="top" WIDTH="6%">
<INPUT TYPE="radio" NAME="month" VALUE="1" CHECKED>Jan<BR>
<INPUT TYPE="radio" NAME="month" VALUE="2" >Feb<BR>
<INPUT TYPE="radio" NAME="month" VALUE="3" >Mar<BR>
<INPUT TYPE="radio" NAME="month" VALUE="4" >Apr<BR>
<INPUT TYPE="radio" NAME="month" VALUE="5" >May<BR>
<INPUT TYPE="radio" NAME="month" VALUE="6" >Jun
</TD>
<TD VALIGN="top" WIDTH="6%">
<INPUT TYPE="radio" NAME="month" VALUE="7" >Jul<BR>
<INPUT TYPE="radio" NAME="month" VALUE="8" >Aug<BR>
<INPUT TYPE="radio" NAME="month" VALUE="9" >Sep<BR>
<INPUT TYPE="radio" NAME="month" VALUE="10">Oct<BR>
<INPUT TYPE="radio" NAME="month" VALUE="11">Nov<BR>
<INPUT TYPE="radio" NAME="month" VALUE="12">Dec
</TD>
<TD ALIGN="center" VALIGN="top" WIDTH="10%">
<INPUT TYPE="radio" NAME="year" VALUE="2000" CHECKED>2000<BR>
<INPUT TYPE="radio" NAME="year" VALUE="2001">2001
</TD>
<TD ALIGN="center" VALIGN="top" WIDTH="25%">
<SELECT NAME="itemlist" onChange="changePtyp(optio
<OPTION VALUE="" SELECTED>--Select Item--
<OPTION VALUE=0>Directors Chair
<OPTION VALUE=1>AM/FM Radio
<OPTION VALUE=2>Shoe Carnival Gift Certificate
</SELECT>
</TD>
<TD ALIGN="center" VALIGN="top" WIDTH="25%">
<SELECT NAME="typelist">
<OPTION VALUE="" SELECTED>--No Item Selected--
</SELECT>
</TD>
</TR>
<TR>
<TD COLSPAN="6" ALIGN="center" VALIGN="bottom">
<BR><BR><BR><BR>
<INPUT TYPE="submit" VALUE="SUBMIT" NAME="submit">
<INPUT TYPE="reset" VALUE="RESET" NAME="reset">
</TD>
</TR>
</TABLE>
</FORM>
</DIV>
</BODY>
</HTML>
**************************
**************************
**************************
Each set of items were dynamically built from a MySQL database. Below is the PHP script I created to accomplish this task:
**************************
**************************
<?php
// this is a test
// Connect to the database
$db = mysql_connect("localhost",
mysql_select_db("storedb",
if ($submit) {
$sql = "SELECT *
FROM empawards
WHERE empno = '$emplist'
AND month = '$month'
AND year = '$year'";
$awrd_r = mysql_query($sql,$db);
if (mysql_num_rows($awrd_r)) {
$sql = "UPDATE empawards
SET itemno = '$itemlist',
itemtype = '$typelist'
WHERE empno = '$emplist'
AND month = '$month'
AND year = '$year'";
} else {
$sql = "INSERT
INTO empawards
( empno,
month,
year,
itemno,
itemtype
)
VALUES ( '$emplist',
'$month',
'$year',
'$itemlist',
'$typelist'
)";
}
mysql_query($sql,$db);
}
/* Get list of prize items available
The items are stored in a 2 dimensional array:
pitm is an array of arrays where each pitm[] is dimensioned by 2.
pitm[0] is the first item in the list (which also is an array), pitm[1]
is the second item in the list (which also is an array) and so on.
pitm[itempointer][item num/item description]
pitm[0][0] = the item number for item #1.
pitm[0][1] = the item description for item #1.
pitm[1][0] = the item number for item #2.
etc....
*/
$przi_q = mysql_query("SELECT * FROM prizeitem",$db);
if ($przi_r = mysql_fetch_array($przi_q)
do {
$pitm[] = array($przi_r["itemno"], $przi_r["descript"]);
} while ($przi_r = mysql_fetch_array($przi_q)
}
$itmcnt=count($pitm);
/* Get list of prize item types by item.
The item types are stored in a 3 dimensional array by item. The ptyp
array is an array of arrays of arrays.
ptyp[itemnumber][prizetype
ptyp[0][0][0] = The prize type number for prize type #1 of
item #1.
ptyp[0][0][1] = The prize type description for prize type #1 of
item #1.
ptyp[0][1][0] = The prize type number for prize type #2 of
item #1.
ptyp[1][1][1] = The prize type description for prize type #2 of
item #2.
*/
?>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META NAME="GENERATOR" CONTENT="Mozilla/4.04 [en] (Win95; I) [Netscape]">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<TITLE>Employee Of The Month</TITLE>
<SCRIPT LANGUAGE="JavaScript1.1">
var pitm = new Array();
var ptyp = new Array();
<?php
/*
Create the arrays used in the javascript function to recreate the list of
prize types for the prize type selection box of the HTML page
Get list of prize item types by item.
The item types are stored in a 3 dimensional array by item. The ptyp
array is an array of arrays of arrays.
ptyp[itemnumber][prizetype
ptyp[0][0][0] = The prize type number for prize type #1 of item #1.
ptyp[0][0][1] = The prize type description for prize type #1 of item #1.
ptyp[0][1][0] = The prize type number for prize type #2 of item #1.
ptyp[1][1][1] = The prize type description for prize type #2 of item #2.
*/
for ($i = 0; $i < $itmcnt; ++$i) {
$itm = $pitm[$i][0];
$sql = "SELECT *
FROM prizetype
WHERE itemno = $itm";
$przt_q = mysql_query($sql,$db);
printf("pitm[%s] = new Array(\"%s\",\"%s\");\n",
$i,$pitm[$i][0],$pitm[$i][
printf("ptyp[%s] = new Array();\n",$i);
$j = 0;
if ($przt_r = mysql_fetch_array($przt_q)
do {
printf("ptyp[%s][%s] = new Array(\"%s\",\"%s\");\n",
$i,$j++,$przt_r["itemtype"
} while ($przt_r = mysql_fetch_array($przt_q)
}
}
?>
function changePtyp(itmsel) {
var selectOBJ = document.forms[0].typelist
var i
var x
if (itmsel == "") {
selectOBJ.length = 1;
selectOBJ.options[0] = new Option("--No Item Selected--",0);
} else {
selectOBJ.length = ptyp[itmsel].length + 1;
selectOBJ.options[0] = new Option("--No Item Selected--","");
for (i = 0; i < ptyp[itmsel].length; i++) {
selectOBJ.options[i + 1] = new Option(ptyp[itmsel][i][1],
}
}
selectOBJ.options[0].selec
}
function validate(form) {
if (form.emplist.value == "") {
alert('Employee Not Selected');
return false;
} else if (form.month.value == "" ) {
alert('Month Not Selected');
return false;
} else if (form.year.value == "" ) {
alert('Year Not Selected');
return false;
} else if (form.itemlist.value == "" ) {
alert('Item Not Selected');
return false;
} else if (form.typelist.value == "" ) {
alert('Item Type Not Selected');
return false;
} else {
i = form.itemlist.value;
form.itemlist.options[0].v
form.itemlist.options[0].s
x = form.typelist.value;
form.typelist.options[0].v
form.typelist.options[0].s
return true;
}
}
</SCRIPT>
</HEAD>
<BODY><H1 ALIGN="center">Employee Of The Month Award</H1>
<DIV ALIGN="center">
<FORM NAME="testfrm" METHOD="POST" onSubmit="return validate(this)">
<TABLE BORDER=0>
<TR>
<TD ALIGN="center" WIDTH="25%"><B>Employee Selection</B></TD>
<TD COLSPAN="2" ALIGN="center" WIDTH="15%"><B>Month</B></
<TD ALIGN="center" WIDTH="10%"><B>Year</B></T
<TD ALIGN="center" WIDTH="25%"><B>Item Selection</B></TD>
<TD ALIGN="center" WIDTH="25%"><B>Item Type Selection</B></TD>
<TR>
<TD ALIGN="center" VALIGN="top" WIDTH="25%">
<SELECT NAME="emplist">
<OPTION VALUE="" SELECTED>--Select Employee--
<?php
// Create the employee select box
$empl_q = mysql_query("SELECT * FROM employee",$db);
if ($empl_r = mysql_fetch_array($empl_q)
do {
printf("<OPTION VALUE=%s>%s %s %s\n",
$empl_r["empno"],$empl_r["
$empl_r["fname"],$empl_r["
} while ($empl_r = mysql_fetch_array($empl_q)
}
?>
</SELECT>
</TD>
<TD VALIGN="top" WIDTH="6%">
<INPUT TYPE="radio" NAME="month" VALUE="1" CHECKED>Jan<BR>
<INPUT TYPE="radio" NAME="month" VALUE="2" >Feb<BR>
<INPUT TYPE="radio" NAME="month" VALUE="3" >Mar<BR>
<INPUT TYPE="radio" NAME="month" VALUE="4" >Apr<BR>
<INPUT TYPE="radio" NAME="month" VALUE="5" >May<BR>
<INPUT TYPE="radio" NAME="month" VALUE="6" >Jun
</TD>
<TD VALIGN="top" WIDTH="6%">
<INPUT TYPE="radio" NAME="month" VALUE="7" >Jul<BR>
<INPUT TYPE="radio" NAME="month" VALUE="8" >Aug<BR>
<INPUT TYPE="radio" NAME="month" VALUE="9" >Sep<BR>
<INPUT TYPE="radio" NAME="month" VALUE="10">Oct<BR>
<INPUT TYPE="radio" NAME="month" VALUE="11">Nov<BR>
<INPUT TYPE="radio" NAME="month" VALUE="12">Dec
</TD>
<TD ALIGN="center" VALIGN="top" WIDTH="10%">
<INPUT TYPE="radio" NAME="year" VALUE="2000" CHECKED>2000<BR>
<INPUT TYPE="radio" NAME="year" VALUE="2001">2001
</TD>
<TD ALIGN="center" VALIGN="top" WIDTH="25%">
<SELECT NAME="itemlist" onChange="changePtyp(optio
e);">
<OPTION VALUE="" SELECTED>--Select Item--
<?php
// Create the prize item select box
for ($i = 0; $i < $itmcnt; ++$i) {
printf("<OPTION VALUE=%s>%s\n",$i,$pitm[$i
}
?>
</SELECT>
</TD>
<TD ALIGN="center" VALIGN="top" WIDTH="25%">
<SELECT NAME="typelist">
<OPTION VALUE="" SELECTED>--No Item Selected--
</SELECT>
</TD>
</TR>
<TR>
<TD COLSPAN="6" ALIGN="center" VALIGN="bottom">
<BR><BR><BR><BR>
<INPUT TYPE="submit" VALUE="SUBMIT" NAME="submit">
<INPUT TYPE="reset" VALUE="RESET" NAME="reset">
</TD>
</TR>
</TABLE>
</FORM>
</DIV>
</BODY>
</HTML>
Everyone is giving these very long code samples, but I think that the answer to your original question is "no, you can't do it". Basically, you can't go BACK to the database once the page has been created. So if you're waiting for someone to hit the first dropdown to load the second, you have to have all possible values for the second already in the page HTML (as the html isn't being transfered anymore).
Your better off having 2 functions (pages). One that assumes input is coming from the first box (leaving the second box always blank) and the second that assumes the first box has input, can take input from either box, and shows your drop down lists.
If you combine that with some onChange javascript to show when the person made a change to the page, the end result won't be very far from what you originally wanted (and if you make the pages identical except for the content of the drop down, most people will think they are on the same page, provided your database connection is quick enough).
Your better off having 2 functions (pages). One that assumes input is coming from the first box (leaving the second box always blank) and the second that assumes the first box has input, can take input from either box, and shows your drop down lists.
If you combine that with some onChange javascript to show when the person made a change to the page, the end result won't be very far from what you originally wanted (and if you make the pages identical except for the content of the drop down, most people will think they are on the same page, provided your database connection is quick enough).
ASKER
First of all, I would like to thank everybody who have tried to help me. THANK YOU VERY MUCH.
If I'm not mistaken, i can only choose to accept one answer. So, i'll have to choose arkamax's answer. His answer is not very complete compared with the others but it gave me a clue to solve my question. (Although later I managed to discover another better way) ; )
Ps. To chorizo : The answer for my question is definitely not "no, you can't do it".
If I'm not mistaken, i can only choose to accept one answer. So, i'll have to choose arkamax's answer. His answer is not very complete compared with the others but it gave me a clue to solve my question. (Although later I managed to discover another better way) ; )
Ps. To chorizo : The answer for my question is definitely not "no, you can't do it".
ASKER
Comment accepted as answer
What you said was "once i've selected an item from the first one, the content of the second combo box should change. And these content has to be retrieve from the mySQL database, not the static one."
Once the page is loaded and HTML has been flushed from the buffer to apache and to the client, there is no way to get back into the PHP processing session. The only way to start PHP up again is to start a new session with the server, done through another HTTP page request. The second part of your comment said that the content had to come from the mySQL database and not a static one, and from that I take it that the SELECTION inputed by the client in dropdown #1 is used in the query to generate dropdown #2. If it is not, and dropdown #2 is generated using a very large list of options hidden in javascript, then you really didn't need to go to the mySQL database to get it in the first place, it could have sat in javascript.
There is no way for you to take the input from the first form field and have it used in a database query to generate the second without establishing another HTTP request. You can hack the hell out of it, you can make 2 frames and have javascript load one while the other stays the same, you may be able to have a hidden frame do the php query and set up javascript arrays that are referenced by the original frame.
But as you asked, and as I said in my response, there is no way to do it on the same page while querying the database, and arkamax's response was the correct one and typical of what most applications employ.
Once the page is loaded and HTML has been flushed from the buffer to apache and to the client, there is no way to get back into the PHP processing session. The only way to start PHP up again is to start a new session with the server, done through another HTTP page request. The second part of your comment said that the content had to come from the mySQL database and not a static one, and from that I take it that the SELECTION inputed by the client in dropdown #1 is used in the query to generate dropdown #2. If it is not, and dropdown #2 is generated using a very large list of options hidden in javascript, then you really didn't need to go to the mySQL database to get it in the first place, it could have sat in javascript.
There is no way for you to take the input from the first form field and have it used in a database query to generate the second without establishing another HTTP request. You can hack the hell out of it, you can make 2 frames and have javascript load one while the other stays the same, you may be able to have a hidden frame do the php query and set up javascript arrays that are referenced by the original frame.
But as you asked, and as I said in my response, there is no way to do it on the same page while querying the database, and arkamax's response was the correct one and typical of what most applications employ.
I'm not completely agree with you.
My first comment works for me. It creates the javascript with PHP.
But it's not really portable...
My first comment works for me. It creates the javascript with PHP.
But it's not really portable...
Just courious, what other way did you use to accomplish your task?
ASKER
Wow, cool down... everyone. First of all, I'm only a beginner, (I only know about php two months ago), so I'm a bit slow. :)
To us111 : I really appreciate your answer. However, as i've said, i can only accept one answer, or else i'll accept yours too.
To chorizo : As u can see that i've chosen the answer from arkamax, u probably know the way that i use to accomplish my task. It's true that I made another HTTP request (back to the same page) after the OnChange. (Basically everyone is trying to give me this hint)
Then I posted some codings, the problem is how to pass the variable from the javascript to php so that i can include the variable in the SQL statement.
TO ALL : With arkamax's suggestion, i managed to pass the variable, but some problems occurred (eg. phrases with spaces in between them were passed as a word [the first word only] in Netscape.)
Finally, I discover that i can actually put the variable that i want to a hidden typed input and submit back to the same page. : )
in javascript :
document.frm.hiddenVar.val
document.frm.submit();
then during the second loading, i can use the value that i want in php as $hiddenVar and put in into my SQL statement.
To us111 : I really appreciate your answer. However, as i've said, i can only accept one answer, or else i'll accept yours too.
To chorizo : As u can see that i've chosen the answer from arkamax, u probably know the way that i use to accomplish my task. It's true that I made another HTTP request (back to the same page) after the OnChange. (Basically everyone is trying to give me this hint)
Then I posted some codings, the problem is how to pass the variable from the javascript to php so that i can include the variable in the SQL statement.
TO ALL : With arkamax's suggestion, i managed to pass the variable, but some problems occurred (eg. phrases with spaces in between them were passed as a word [the first word only] in Netscape.)
Finally, I discover that i can actually put the variable that i want to a hidden typed input and submit back to the same page. : )
in javascript :
document.frm.hiddenVar.val
document.frm.submit();
then during the second loading, i can use the value that i want in php as $hiddenVar and put in into my SQL statement.
Hey ... nobody is hot:() You mentioned you had found a better way than what was suggested by arkamax. I was just courious as to what it was ... maybe we could learn something new. Even newbies can have original good ideas:)
Have fun...
dgrimes
Have fun...
dgrimes
<script LANGUAGE="JavaScript1.1">
if (typeof(Option)+"" != "undefined") v=true;
LANGUAGE="JavaScript">
function jump(form,ind)
{ with (document.forms[form].elem
{ i=selectedIndex;
location=options[i].value;
}
}
function O(opt,val)
{ opttab[k]=new Option(opt,val);
k++;
}
function relate(form,ind)
{ if(v)
{ k=1;
if (form==1)
{
<?
$j=0; # counter ind
// display all topics
while($conn2->next_record(
{
$i=$conn2->field_value("to
$query1="SELECT * FROM Table";
$conn1->query($query1);
print "if(ind==".$j.")";
print "{";
print "opttab=new Array(".$conn1->num_rows()
// display all categories
while($conn1->next_record(
{
$titre=$conn1->field_value
$k=$conn1->field_value("ca
print 'O("'.$titre.'","'.$k.'");
}
print "}\n";
$j++;
}
?>
}
opttab_size=opttab.length;
with (document.forms[form].cat)
{
for (var i=options.length-1;i>0;i--
for (var i=1;i<opttab_size;i++) options[i-1]=opttab[i];
options[0].selected=true;
}
}
else
{ jump(form-1,0); }
}
</script>
<form name="f0" METHOD="POST" ACTION="" onSubmit="return false;">
<select name="top" onChange="relate(1,this.se
<? $conn2->seek(0);
$conn2->next_record();
for ($i=0;$i<$conn2->num_rows(
{
$j=$i+1;
print '<option value="'.$j.'"';
if ($i==0)
print " selected";
print ">".$conn2->field_value(my
$conn2->next_record();
}?>
</select>
</form>
<form name="f1" METHOD="POST" ACTION="pag.phtml">
<select name="cat">
<?
$conn2->seek(0);
$conn2->next_record();
# select all categories for the selected topic
$topic=$conn2->field_value
$query1="SELECT * FROM Table ";
$conn1->query($query1);
$i=0;
while($conn1->next_record(
{
$j=$conn1->field_value(cat
print '<option value="'.$j.'"';
if ($i==0)
print " selected";
print ">".$conn1->field_value(my
$i++;
}?>
<input type="submit" value="Continuer">
</form>