/    Sign up×
Community /Pin to ProfileBookmark

Dynamic select box

Copy linkTweet thisAlerts:
Jun 03.2003

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!!

to post a comment
JavaScript

18 Comments(s) ↴

Copy linkTweet thisAlerts:
@JonaJun 03.2003 — [font=arial][color=maroon]You could do this...[/color][/font]

[font=courier new]

<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>

[/font]

[b]Jona[/b]
Copy linkTweet thisAlerts:
@jrthor2authorJun 03.2003 — 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.
Copy linkTweet thisAlerts:
@JonaJun 03.2003 — [font=arial][color=maroon]Change the values to whatever you want. Notice I didn't use this.options[this.selectedIndex][b].value[/b]. 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.[/color][/font]

[b]Jona[/b]
Copy linkTweet thisAlerts:
@Mr_JJun 03.2003 — I'd already started something like this, but Jona beat me to it

?

<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>
Copy linkTweet thisAlerts:
@JonaJun 03.2003 — [i]Originally posted by Mr J [/i]

[B]I'd already started something like this, but Jona beat me to it[/B][/QUOTE]

[font=arial][color=maroon]?[/color][/font]

[b]Jona[/b]
Copy linkTweet thisAlerts:
@jrthor2authorJun 03.2003 — 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>
Copy linkTweet thisAlerts:
@JonaJun 03.2003 — [font=courier new]

<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> [/font]

[b]Jona[/b]
Copy linkTweet thisAlerts:
@jrthor2authorJun 03.2003 — 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>
Copy linkTweet thisAlerts:
@Mr_JJun 03.2003 — When you say address text box and label do you mean still 2 textboxes?
Copy linkTweet thisAlerts:
@jrthor2authorJun 04.2003 — No, there will only be 1 text box for some of the options
Copy linkTweet thisAlerts:
@jrthor2authorJun 05.2003 — any other helpers here?
Copy linkTweet thisAlerts:
@JonaJun 05.2003 — [font=arial][color=maroon]Did you try the code I posted?[/color][/font]

[b]Jona[/b]
Copy linkTweet thisAlerts:
@jrthor2authorJun 05.2003 — 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>
Copy linkTweet thisAlerts:
@JonaJun 05.2003 — [font=courier new]

sel=table.index;

[/font]

[font=arial][color=maroon]The above should be:[/color][/font]

[font=courier new]

sel=table.value;

[/font]

[b]Jona[/b]
Copy linkTweet thisAlerts:
@jrthor2authorJun 05.2003 — yep, that did it. Thanks!
Copy linkTweet thisAlerts:
@JonaJun 05.2003 — [font=arial][color=maroon]No problem. ?



The simple things in life... ?[/color][/font]

[b]Jona[/b]
Copy linkTweet thisAlerts:
@Mr_JJun 05.2003 — 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>
Copy linkTweet thisAlerts:
@jrthor2authorJun 05.2003 — Sorry Mr. J, Jona beat you to the punch. I already got this working.

Thanks for your help
×

Success!

Help @jrthor2 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...