PDA

Click to See Complete Forum and Search --> : Dynamic select box

jrthor2
06-03-2003, 12:51 PM
I have a select box that looks lik this:

<select name="table" id="table">
<option value="PNCST_CUSTOMER" <?if($table=="PNCST") { echo " selected";} ?>>PNCST</option>
</select>

and I have 2 rows that have text boxes that look like this:

<tr valign="top">
<td width="47%">Customer Number:</td>
<td width="53%"><input name="cust_nbr" type="text" id="cust_nbr3" size="9" maxlength="9" value="<? echo $cust_nbr ?>">
</td>
</tr>
<tr valign="top">
<td>Package ID:</td>
<td><input name="pkgid" type="text" id="pkgid" size="6" maxlength="9" value="<? echo $pkgid ?>"></td>
</tr>

What I would like to do, is if they select an option in the select box (right now there is only 1, but there will be plenty more), it shows the proper text boxes, for example, if I select PNCST from the dropdown, it shows me Customer Number and Package ID text boxes, but if I choose PNADR, it shows me an address text box. I don't know JavaScript very much.

Any help is greatly appreciated!!
Jona
06-03-2003, 01:10 PM
You could do this...


<script type="text/javascript">
<!--
var str = "";
function Process(sel){
if(sel==1){
str+="<br><b>Name:</b> <input type=text name='userName'>";
str+="<br><b>Email:</b> <input type=text name='userEmail'>";
} else {
str+="<br><b>Email:</b> <input type=text name='userEmail'>";
}
document.getElementById("addedForm").innerHTML=str;
}
//-->
</script></head>
<body>
<form action="" name="myForm"><div>
<select size="1" name="sel" onChange="Process(this[this.selectedIndex]);">
<option selected value="-1">Choose one</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<div id="addedForm"></div>
</div></form></body>
</html>


Jona
jrthor2
06-03-2003, 01:17 PM
This wouldn't quite work, because I need to keep my option values the way I have them because they get on to another page.
Jona
06-03-2003, 01:39 PM
Change the values to whatever you want. Notice I didn't use this.options[this.selectedIndex].value. I used, this.options[this.selectedIndex]. Which means that the 0th option would be the first one, the 1st one would be the second and the third one would be the second. You can make the values whatever you want. It makes no difference.

Jona
Mr J
06-03-2003, 01:45 PM
I'd already started something like this, but Jona beat me to it

:D

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<script>

function chk(n){

switch (n){

case "PNCST_CUSTOMER" :
document.f1.cust_nbr. value="<? echo $cust_nbr ?>"
document.f1.pkgid. value="<? echo $pkgid ?>"
txt1.innerText="Customer Number:"
txt2.innerText="Package ID:"
break;

case "PNADR" :
document.f1.cust_nbr. value="address"
document.f1.pkgid. value="12 345"
txt1.innerText="Address"
txt2.innerText="Code"
break;

case "Test 3" :
document.f1.cust_nbr. value="<textbox 3>"
document.f1.pkgid. value="<num 3>"
txt1.innerText="Sample 3"
txt2.innerText="3"
break;

case "Test 4" :
document.f1.cust_nbr. value="<textbox 4>"
document.f1.pkgid. value="<num 4>"
txt1.innerText="Sample 4"
txt2.innerText="4"
break;

default :
alert("Please select an option")
}

}


</script>
</HEAD>
<BODY>
<form name="f1">

<table border="1">
<tr valign="top">
<td width="150" id="txt1">Customer Number:</td>
<td><input type="text" name="cust_nbr" size="9" maxlength="9" value="<? echo $cust_nbr ?>"></td>
</tr>
<tr valign="top">
<td id="txt2">Package ID:</td><td><input type="text" name="pkgid" size="6" maxlength="9" value="<? echo $pkgid ?>"></td>
</tr>
</table>

<select name="select1" id="table" onchange="chk(this.form.select1.options[this.form.select1.selectedIndex].value)">
<option value="PNCST_CUSTOMER">PNCST_CUSTOMER</option>
<option value="PNADR">PNADR</option>
<option value="Test 3">Test 3</option>
<option value="Test 4">Test 4</option>
</select>

</form>

</BODY>
</HTML>
Jona
06-03-2003, 01:47 PM
Originally posted by Mr J
I'd already started something like this, but Jona beat me to it

:D

Jona
jrthor2
06-03-2003, 02:08 PM
Mr. J,

I tried your code, but when I select something from the dropdown, it is not changing the page to show what I need to show.

I could not get Jona's code to work either. Here is what i have:

<script>

function chk(n){

switch (n){

case "PNCST_CUSTOMER" :
document.f1.cust_nbr. value="<? echo $cust_nbr ?>"
document.f1.pkgid. value="<? echo $pkgid ?>"
txt1.innerText="Customer Number:"
txt2.innerText="Package ID:"
break;

case "PNADR" :
document.f1.cust_nbr. value="address"
document.f1.pkgid. value="12 345"
txt1.innerText="Address"
txt2.innerText="Code"
break;

case "Test 3" :
document.f1.cust_nbr. value="<textbox 3>"
document.f1.pkgid. value="<num 3>"
txt1.innerText="Sample 3"
txt2.innerText="3"
break;

case "Test 4" :
document.f1.cust_nbr. value="<textbox 4>"
document.f1.pkgid. value="<num 4>"
txt1.innerText="Sample 4"
txt2.innerText="4"
break;

default :
alert("Please select an option")
}

}


</script>
</head>
<form method="get" action="table_search_results.php" name="f1">
<input type="hidden" name="table" value="<? echo $_GET['table']; ?>">
<input type="hidden" name="cust_nbr" value="<? echo $_GET['cust_nbr']; ?>">
<input type="hidden" name="pkgid" value="<? echo $_GET['pckgid']; ?>">
<input type="hidden" name="env" value="http://acdevel.rss.riteaid.com/acweb/acdevel.rss">
<input type="hidden" name="passurl" value=<? echo $_GET['env'] . "+" . "/NG/Table Search.rox?Submint;__schedtype=immed;__wait=wait;table=" . $_GET['table'] . ";" . $_GET['cust_nbr'] . ";" . $_GET['pckgid']?>>
<table width="53%" border="0" cellspacing="0" cellpadding="5">
<tr valign="top">
<td>Table:</td>
<td><select name="table" id="table" onchange="chk(this.form.select1.options[this.form.table.selectedIndex].value)">
<option value="PNCST_CUSTOMER" <?if($table=="PNCST") { echo " selected";} ?>>PNCST</option>
<option value="PNADR">PNADR</option>
<option value="Test 3">Test 3</option>
<option value="Test 4">Test 4</option>
</select></td>
</tr>
<tr valign="top">
<td width="47%">Customer Number:</td>
<td width="53%"><input name="cust_nbr" type="text" id="cust_nbr3" size="9" maxlength="9" value="<? echo $cust_nbr ?>">
</td>
</tr>
<tr valign="top">
<td>Package ID:</td>
<td><input name="pkgid" type="text" id="pkgid" size="6" maxlength="9" value="<? echo $pkgid ?>"></td>
</tr>
<tr>
<td colspan="2" valign="top"><p align="center">
<input type="submit" name="Submit" value="Compare">
<input type="hidden" name="submit" value="1">
</p></td>
</tr>
</table>
</form>
Jona
06-03-2003, 02:19 PM
<script type="text/javascript">
<!--
var str = "";
function Process(sel){
sel=sel.index;
if(sel==1){
str="<br><b>Name:</b> <input type=text name='userName'>\n<br><b>Email:</b> <input type=text name='userEmail'>";
} else {
str="<br><b>Email:</b> <input type=text name='userEmail'>";
}
document.getElementById("addedForm").innerHTML=str;
}
//-->
</script></head>
<body>
<form action="" name="myForm"><div>
<select size="1" name="sel" onChange="Process(this[this.selectedIndex]);">
<option selected value="-1">Choose one</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<div id="addedForm"></div>
</div></form></body>
</html>

Jona
jrthor2
06-03-2003, 02:25 PM
Mr. J,

I got your code working, but I need it to only show the cusomer number and package id if they choose pncst_customer, and if they choose pnadr, it should only show an address text box and label?? Below is my code

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Rite Aid - Get Customer Number</title>
<link rel="stylesheet" href="../nav/vorfa_style.css" type="text/css">
<script src="/ra-apps/documentation/vorfa/js/ua.js"></script>
<script src="/ra-apps/documentation/vorfa/js/ftiens4.js"></script>
<?php include_once "../js/vorfa_menu.php" ?>
<script>

function chk(n){

switch (n){

case "PNCST_CUSTOMER" :
document.f1.cust_nbr. value="<? echo $cust_nbr ?>"
document.f1.pkgid. value="<? echo $pkgid ?>"
txt1.innerText="Customer Number:"
txt2.innerText="Package ID:"
break;

case "PNADR" :
document.f1.cust_nbr. value="address"
document.f1.pkgid. value="12 345"
txt1.innerText="Address"
txt2.innerText="Code"
break;

case "Test 3" :
document.f1.cust_nbr. value="<textbox 3>"
document.f1.pkgid. value="<num 3>"
txt1.innerText="Sample 3"
txt2.innerText="3"
break;

case "Test 4" :
document.f1.cust_nbr. value="<textbox 4>"
document.f1.pkgid. value="<num 4>"
txt1.innerText="Sample 4"
txt2.innerText="4"
break;

default :
alert("Please select an option")
}

}


</script>
</HEAD>
<body bgcolor="#ffffff" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" bottommargin="0" rightmargin="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2">
<? include "../nav/top.php"; ?>
</td>
</tr>
<tr>
<td width="3%" rowspan="9" valign="top" bgcolor="#9cb0d3">
<script>initializeDocument()</script>
</td>
<td valign="top">

<form method="get" action="table_search_results.php" name="f1">
<input type="hidden" name="tablesel" value="<? echo $_GET['table']; ?>">
<input type="hidden" name="cust_nbr" value="<? echo $_GET['cust_nbr']; ?>">
<input type="hidden" name="pkgid" value="<? echo $_GET['pckgid']; ?>">
<input type="hidden" name="env" value="http://acdevel.rss.riteaid.com/acweb/acdevel.rss">
<input type="hidden" name="passurl" value=<? echo $_GET['env'] . "+" . "/NG/Table Search.rox?Submint;__schedtype=immed;__wait=wait;table=" . $_GET['tablesel'] . ";" . $_GET['cust_nbr'] . ";" . $_GET['pckgid']?>>

Table:
<select name="table" id="table" onChange="chk(this.form.table.options[this.form.table.selectedIndex].value)">
<option value="PNCST_CUSTOMER">PNCST_CUSTOMER</option>
<option value="PNADR">PNADR</option>
<option value="Test 3">Test
3</option>
<option value="Test 4">Test
4</option>
</select>
<br>
<br>
<table border="0">
<tr valign="top">
<td width="150" id="txt1">Customer Number:</td>
<td><input type="text" name="cust_nbr" size="9" maxlength="9" value="<? echo $cust_nbr ?>"></td>
</tr>
<tr valign="top">
<td id="txt2">Package ID:</td><td><input type="text" name="pkgid" size="6" maxlength="9" value="<? echo $pkgid ?>"></td>
</tr>
<tr>
<td colspan="2" valign="top"><p align="center">
<input type="submit" name="Submit" value="Compare">
<input type="hidden" name="submit" value="1">
</td>
</tr>

</table>

</form>
</td>
</tr>
<tr>
<td valign="top">&nbsp;</td>
</tr>
<tr>
<td valign="top">&nbsp;</td>
</tr>
<tr>
<td valign="top">&nbsp;</td>
</tr>
<tr>
<td valign="top"><strong></strong></td>
</tr>
<tr>
<td valign="top"><p>&nbsp;</p></td>
</tr>
<tr>
<td valign="top">&nbsp;</td>
</tr>
<tr>
<td valign="top">&nbsp;</td>
</tr>
<tr>
<td valign="top">&nbsp;</td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
</table>
</body>
</html>

</BODY>
</HTML>
Mr J
06-03-2003, 02:42 PM
When you say address text box and label do you mean still 2 textboxes?
jrthor2
06-04-2003, 07:21 AM
No, there will only be 1 text box for some of the options
jrthor2
06-05-2003, 11:05 AM
any other helpers here?
Jona
06-05-2003, 11:15 AM
Did you try the code I posted?

Jona
jrthor2
06-05-2003, 11:26 AM
Yes, but it only shows me the else code (only the email field). Here is what I have:

<script src="/ra-apps/documentation/vorfa/js/ua.js"></script>
<script src="/ra-apps/documentation/vorfa/js/ftiens4.js"></script>
<?php include_once "../js/vorfa_menu.php" ?>
<script type="text/javascript">
<!--
var str = "";
function Process(table){
sel=table.index;
if(sel=="PNCST_CUSTOMER"){
str="<br><b>Name:</b> <input type=text name='userName'>\n<br><b>Email:</b> <input type=text name='userEmail'>";
}
if(sel=="PNADR"){
str="<br><b>Address:</b> <input type=text name='userName'>\n";
}
else {
str="<br><b>Email:</b> <input type=text name='userEmail'>";
}
document.getElementById("addedForm").innerHTML=str;
}
//-->
</script></HEAD>
<body bgcolor="#ffffff" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" bottommargin="0" rightmargin="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2">
<? include "../nav/top.php"; ?>
</td>
</tr>
<tr>
<td width="3%" rowspan="9" valign="top" bgcolor="#9cb0d3">
<script>initializeDocument()</script>
</td>
<td valign="top">

<form method="get" action="<? echo $env . $_GET['passurl'] ?>" name="f1">
<input type="hidden" name="env" value="http://acdevel.rss.riteaid.com/acweb/acdevel.rss/">
<input type="hidden" name="passurl" value=<? echo $_GET['env'] . "/NG/Table Search.rox?Submit;__schedtype=immed;__wait=wait;table=" . $_GET['tablesel'] . ";" . $_GET['cust_nbr'] . ";" . $_GET['pckgid']?>>
&nbsp;Table:
<select name="table" id="table" onChange="Process(this[this.selectedIndex]);">
<option value="-1">Select a table --></option>
<option value="PNCST_CUSTOMER">PNCST_CUSTOMER</option>
<option value="PNADR">PNADR</option>
<option value="Test 3">Test
3</option>
<option value="Test 4">Test
4</option>
</select>
<br>
<br>
<table border="0">
<tr valign="top">
<td width="150" id="txt1"><div id="addedForm"></div></td>
</tr>
<tr>
<td colspan="2" valign="top"><p align="center">
<input type="submit" name="Submit" value="Compare">
<input type="hidden" name="submit" value="1">
</td>
</tr>

</table>

</form>
</td>
Jona
06-05-2003, 11:30 AM
sel=table.index;

The above should be:


sel=table.value;


Jona
jrthor2
06-05-2003, 11:32 AM
yep, that did it. Thanks!
Jona
06-05-2003, 11:37 AM
No problem. ;)

The simple things in life... :)
Jona
Mr J
06-05-2003, 01:47 PM
Please try the following



<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<script>

function chk(n){

switch (n){

case "PNCST_CUSTOMER" :
document.f1.cust_nbr. value="<? echo $cust_nbr ?>"
document.f1.pkgid. style.visibility="visible"
document.f1.pkgid. value="<? echo $pkgid ?>"
txt1.innerText="Customer Number:"
txt2.innerText="Package ID:"
break;

case "PNADR" :
document.f1.cust_nbr. value="address"
document.f1.pkgid. style.visibility="hidden"
txt1.innerText="Address"
txt2.innerText=" "
break;

case "Test 3" :
document.f1.cust_nbr. value="<textbox 3>"
document.f1.pkgid. value="<num 3>"
txt1.innerText="Sample 3"
txt2.innerText="3"
break;

case "Test 4" :
document.f1.cust_nbr. value="<textbox 4>"
document.f1.pkgid. value="<num 4>"
txt1.innerText="Sample 4"
txt2.innerText="4"
break;

default :
alert("Please select an option")
}

}


</script>
</HEAD>
<BODY>
<form name="f1">

<table border="1">
<tr valign="top">
<td width="150" id="txt1">Customer Number:</td>
<td><input type="text" name="cust_nbr" size="9" maxlength="9" value="<? echo $cust_nbr ?>"></td>
</tr>
<tr valign="top">
<td id="txt2">Package ID:</td><td><input id="ins" type="text" name="pkgid" size="6" maxlength="9" value="<? echo $pkgid ?>"></td>
</tr>
</table>

<select name="select1" id="table" onchange="chk(this.form.select1.options[this.form.select1.selectedIndex].value)">
<option value="PNCST_CUSTOMER">PNCST_CUSTOMER</option>
<option value="PNADR">PNADR</option>
<option value="Test 3">Test 3</option>
<option value="Test 4">Test 4</option>
</select>

</form>

</BODY>
</HTML>
jrthor2
06-05-2003, 01:50 PM
Sorry Mr. J, Jona beat you to the punch. I already got this working.

Thanks for your help