PDA

View Full Version : Display textbox based on selection from dropdown list



stevema4567
07-25-2006, 03:24 PM
I am new to this. Please help!
How do I display a textbox only if a certain value is selected from a dropdown list within a form?
I have the following code which is pulling values fro a sql database. If the selected item = Enter/Edit/Delete Beyond 60 days then I need to display a text box for the user to type in a reason.

<tr class=formlabel><td colspan=2 height=<%=spacerheight%>></td></tr>

<%

Category_name = rstemp2("Category_name")
Category_number = rstemp2("Category_number")
Category_index = rstemp2("Category_index")

%>
<tr><td align=right width=<%=widthpercent%> class=formlabel>

<%
response.write Category_name & ":</td><td align=left class=formboxholder>"
response.write "<select name=c" & rstemp2("category_number") & " size = 1>"
response.write "<option value= >Ignore</option>"

Do While rstemp2.EOF <> True
'-->AKS<-- Added CINT functions to match both sides of <>.
if CInt(rstemp2("Category_number")) <> CInt(Category_number) THEN
response.write "</select></td>"
response.write "</tr>"
Response.write "<td align=right class=formlabel>"
Response.write rstemp2("Category_Name") & ":</td><td align=left class=formboxholder>" & chr(10)
response.write "<select name=c" & rstemp2("category_number") & " size = 1>" & chr(10)
response.write "<option value= >Ignore</option>"
Category_number = rstemp2("Category_number")
End If

' Checked if this option is already select for this case
If CaseNumber <> "" Then
'-->AKS<-- Added CInt function to match both sides of =
If CInt(rstemp("C" & Category_number)) = CInt(rstemp2("item_number")) Then
response.write "<option SELECTED value=" & rstemp2("item_number") & ">" & rstemp2("item_name") & "</option>" & chr(10) & chr(13)
Else
response.write "<option value=" & rstemp2("item_number") & ">" & rstemp2("item_name") & "</option>" & chr(10) & chr(13)
End IF
End If ' End of case_number <> ""

If CaseNumber = "" Then
response.write "<option value=" & rstemp2("item_number") & ">" & rstemp2("item_name") & "</option>" & chr(10) & chr(13)
End If
rstemp2.MoveNext
Loop
response.write "</select></td></tr></table></center>"
End IF


rstemp2.close
set rstemp2=nothing

' If Not new case then close the other record set
If Case_Number <> "" Then
rstemp.close ' close the original record set
set rstemp=nothing
End IF


conntemp.close ' Close the connection
set conntemp=nothing

%>

</td></tr>

jscheuer1
07-26-2006, 06:13 AM
That looks almost certainly to be VBscript/ASP programming, definitely not javascript. There is an ASP forum here but you might have better luck at another forum (codingforums.com has a much larger base of ASP and VBscript participants, for example). Javascript could be used in conjunction with your code but, unless it was run server side as the code you currently have is, it wouldn't be able to be relied upon if the user were to have javascript disabled.

stevema4567
08-09-2006, 06:21 PM
Many thanks for the reply. It is VBscript/ASP programming, I will post at codingforums.com too. I'm not worried about javascript being disabled.

jscheuer1
08-09-2006, 07:26 PM
Here is one example of how this can be done in javascript (client side):


<form action="">
<select onchange="if (this.selectedIndex==2){this.form['box'].style.visibility='visible'}else {this.form['box'].style.visibility='hidden'};">
<option value="">0</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>
<input style="visibility:hidden;" type="text" name="box">
</form>

The result in non-javascript enabled browsers would be that the textbox would never be seen. With a bit more code it could be worked out that non-javascript browsers would always see the textbox.

stevema4567
08-14-2006, 03:03 PM
Thanks for the quick response. I have your code working great for me, however instead of using a static list, I need it to dynamicly pull the options from a sql database. Any ideas on how to do that and still perform the select onchange?

jscheuer1
08-14-2006, 05:10 PM
OK, well the selectedIndex doesn't rely upon the populated values or text displayed by the select element. The selectedIndex is simply a number that refers to which item is selected. To make this a bit clearer, we could have this:


<form action="">
<select onchange="if (this.selectedIndex==2){this.form['box'].style.visibility='visible'}else {this.form['box'].style.visibility='hidden'};">
<option value="">Bob</option>
<option value="">Henri</option>
<option value="">Martin</option>
<option value="">Jessica</option>
</select>
<input style="visibility:hidden;" type="text" name="box">
</form>

and it would still work. Selecting 'Martin' would reveal the text input. I used the numbers in my example just to show the selectedIndex of each option. Each will have that selectedIndex no matter what it displays and no matter what its value attribute is set to.

If you need to populate and set which selectedIndex reveals the box, you will need to populate this number (red) as well as the options themselves:


<select onchange="if (this.selectedIndex==2){this.form['box'].style.visibility='visible'}else {this.form['box'].style.visibility='hidden'};">

The selectedIndex is always numbered from 0 to whatever on down the list of available options.

stevema4567
08-15-2006, 01:14 PM
Thanks again for your help. I think that I understand that. I'm having trouble putting it into action with the code that I initially posted above. That code above when ran generates the following HTML code:
<center>

<table class=innnerformwrapper width="97%" cellspacing=0 cellpadding=0>
<tr class=formlabel><td colspan=2 height=5></td></tr>
<tr><td colspan=2 class=minorformtitle height="1%">Select the best category choices below:</td></tr>
<tr class=formlabel><td colspan=2 height=5></td></tr>


<tr><td align=right width=40% class=formlabel>

Problem Type:</td><td align=left class=formboxholder><select name=c1 size = 1<option value= >Ignore</option><option value=1>Problem</option>

<option value=2>Question</option>

<option value=3>Request</option>

<option value=4>Comment</option>

<option value=5>Other</option>

</select></td></tr><td align=right class=formlabel>Resource:</td><td align=left class=formboxholder>
<select name=c2 size = 1>
<option value= >Ignore</option><option value=1>Forgot Password</option>

<option value=2>Account Locked Out</option>

<option value=3>Enter/Edit/Delete Beyond 60 days</option>

<option value=4>Add NP Contract</option>

<option value=5>Non-Normal Hours Access</option>

<option value=6>Application Issues</option>

<option value=7>Reports Issues</option>

<option value=8>Computer Hardware</option>

<option value=9>Other Equipment</option>

</select></td></tr></table></center>

Every time I put the "onchange" in at the select I get an expected end of statement error. Any ideas?

jscheuer1
08-15-2006, 05:19 PM
First thing I notice and it might be the problem - I can't tell because you don't show your onchange event and how that falls exactly into the above - is that attributes in HTML must be quoted to be valid. Browsers will usually let you slide on this. But, if they get confused as to where the quotes should have been, you have problems. The onchange event is both an attribute of sorts and an event, so it is doubly important that its value be quoted. I'd try making sure all of this is taken care of then see if the problem persists.

Examples:


<td colspan="2" height="5">

not:


<td colspan=2 height=5>


. . . value="">

not:


. . . value= >

You have tons of these.

Also, this is just plain wrong:


<select name=c1 size = 1<option value= >

The opening select tag isn't closed, try:


<select name="c1" size="1"><option value="">

stevema4567
08-21-2006, 05:05 PM
I think that you missed my point. I'm running the code that I originally posted and from that code if I do a View/Source I see the HTML code that I posted and you say it needs to be quoted.

If putting quotes in the original code is what I need to do, I can't figure out where to put them. If I was writing the HTML code straight out it would be no problem to insert the quotes that you're talking about, but I have been furnished this other code to use.

I don't show the onchange event, because if I the "onchange" in at the select I get an expected end of statement error and no code to show you.

jscheuer1
08-22-2006, 02:18 AM
Well then, rewrite your server side code so that it produces valid HTML and javascript source, if you are still having problems, get back to us.

Just because your code is generated server side doesn't mean it can generate invalid code and still work. The principals are the same, no matter how the code is written. Browsers will give you quite a bit of leeway but, once they can no longer understand what you meant to write (or meant to have be written by the server), they will give errors.

The moral to this story is to write (or have written) valid code. Then, when problems arise (which is much less likely with valid code), they will be easy to spot.

With invalid code, it isn't always just one straw that breaks the camel's back but, often a cascading effect of errors. With valid code, it's usually just one thing.

sway2721
08-24-2006, 07:01 PM
i have been reading your posting which have been helpful with what i am trying to do, but i am stuck on this:

i have created a js that when you select the value of the 1st drop down menu it changes the options on the next drop down box depending on what is selected, what i need to do now is when they select the option in the 2nd drop down box i need it to display the text box depending on which value they select, i have an html page reading a .js for the drop down menu options, so how would i be able to do this when the options are in the .js code and not in the html?!

here is the code for the drop down boxes as well as the html that reads it:

JS Script
-----------
JS Script
---------
function fillCategory(){
// this function is used to fill the category list on load
addOption(document.drop_list.Category, "ABMS", "ABMS", "");
addOption(document.drop_list.Category, "AAA", "AAA", "");
addOption(document.drop_list.Category, "BBTT", "BBTT", "");
addOption(document.drop_list.Category, "Empowernet", "Empowernet", "");
addOption(document.drop_list.Category, "Esource", "Esource", "");
addOption(document.drop_list.Category, "Etrain", "Etrain", "");
addOption(document.drop_list.Category, "MACs", "MACs", "");
addOption(document.drop_list.Category, "Marlin", "Marlin", "");
addOption(document.drop_list.Category, "Secure", "Secure", "");
addOption(document.drop_list.Category, "Sheer", "Sheer", "");
}

function SelectSubCat(){
// ON selection of category this function will work

removeAllOptions(document.drop_list.SubCat);
addOption(document.drop_list.SubCat, "", "Select Category:", "");

if(document.drop_list.Category.value == 'ABMS'){
addOption(document.drop_list.SubCat,"Invalid Login", "Invalid Login");

addOption(document.drop_list.SubCat,"Partners Missing", "Partners Missing");
}


if(document.drop_list.Category.value == 'AAA'){
addOption(document.drop_list.SubCat,"Invalid Password", "Invalid Password");
}


if(document.drop_list.Category.value == 'BBTT'){
addOption(document.drop_list.SubCat,"Area is not available", "Area is not available");

addOption(document.drop_list.SubCat,"Other", "Other");
}


if(document.drop_list.Category.value == 'Empowernet'){
addOption(document.drop_list.SubCat,"Training not listed", "Training not listed");

addOption(document.drop_list.SubCat,"SP not listed", "SP not listed");

addOption(document.drop_list.SubCat,"Request Trainer Rights", "Request Trainer Rights", "");

addOption(document.drop_list.SubCat,"LE Request", "LE Request", "");
}


if(document.drop_list.Category.value == 'Esource'){
addOption(document.drop_list.SubCat,"No Permissions Found", "No Permissions Found");

addOption(document.drop_list.SubCat,"Not Authorized", "Not Authorized");

addOption(document.drop_list.SubCat,"Toolset change", "Toolset change", "");
}


if(document.drop_list.Category.value == 'Etrain'){
addOption(document.drop_list.SubCat,"Please Try again", "Please Try again");

addOption(document.drop_list.SubCat,"CCID", "CCID");
addOption(document.drop_list.SubCat,"Training Not Listed", "Training Not Listed", "");

addOption(document.drop_list.SubCat,"Page Cannot be Displayed", "Page Cannot be Displayed");

addOption(document.drop_list.SubCat,"Cannot start listed training", "Cannot start listed training");

addOption(document.drop_list.SubCat,"Remove Learning", "Remove Learning");
}


if(document.drop_list.Category.value == 'MACs'){
addOption(document.drop_list.SubCat,"SP not listed", "SP not listed");
}


if(document.drop_list.Category.value == 'Marlin'){
addOption(document.drop_list.SubCat,"123 Error", "123 Error");

addOption(document.drop_list.SubCat,"Server Error", "Server Error");

addOption(document.drop_list.SubCat,"Invalid Password", "Invalid Password", "");

addOption(document.drop_list.SubCat,"Rights", "Rights", "");

addOption(document.drop_list.SubCat,"Disabled", "Disabled", "");

addOption(document.drop_list.SubCat,"Other", "Other", "");
}


if(document.drop_list.Category.value == 'Secure'){
addOption(document.drop_list.SubCat,"Secure 1", "Secure 1");

addOption(document.drop_list.SubCat,"Request Replacement", "Request Replacement");

addOption(document.drop_list.SubCat,"Unalbe to login", "Unalbe to login");

addOption(document.drop_list.SubCat,"Bind/Unbind", "Bind/Unbind", "");
}


if(document.drop_list.Category.value == 'Sheer'){
addOption(document.drop_list.SubCat,"Invalid Password", "Invalid Password");

addOption(document.drop_list.SubCat,"No Login", "No Login");
;
}

}
//////////////////

function removeAllOptions(selectbox)
{
var i;
for(i=selectbox.options.length-1;i>=0;i--)
{
//selectbox.options.remove(i);
selectbox.remove(i);
}
}


function addOption(selectbox, value, text )
{
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;

selectbox.options.add(optn);
}


HTML
---------
<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>Tkat</title>
<script language="javascript" src="list.js"></script>
</head>

<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000"

onload="fillCategory();">

<FORM name="drop_list" action="postnew.asp" method="POST" >
<table>

<tr>
<td>
<b>Tools:</b>
</td>

<td>
<SELECT NAME="Category" onChange="SelectSubCat();" >
<Option value="">Select Category:</option>
</SELECT>&nbsp;
</tr>
</td>

<tr>
<td>&nbsp;
</tr>
</td>

<tr>
<td>
<b>Error:</b>
</td>

<td>
<SELECT id="SubCat" NAME="Subcat">
<Option value="">Select Category:</option>
</tr>
</td>
</SELECT>
</form>
</body>
</html>

jscheuer1
08-25-2006, 06:26 AM
sway2721 -

The onchange event:


onchange="if (this.selectedIndex==2){this.form['box'].style.visibility='visible'}else {this.form['box'].style.visibility='hidden'};"


can be added to:


<SELECT id="SubCat" NAME="Subcat">
<Option value="">Select Category:</option>
</tr>
</td>
</SELECT>

depending upon what you are trying to do. If the box's designation (form parent and name*) and the option's selectedIndex that should reveal it are constant no matter how the select is populated, the onchange event may be hard coded to the select.

If all of this stuff is subject to change, you could assign the onchange event to the select on the same basis as you are populating it, ex:


if(document.drop_list.Category.value == 'AAA'){
addOption(document.drop_list.SubCat,"Invalid Password", "Invalid Password");
document.getElementById('SubCat').onchange=function(){
if (this.selectedIndex==1)
this.form['box'].style.visibility='visible';
else
this.form['box'].style.visibility='hidden';
};
}

The red parts are the things you would want to customize for each possible document.drop_list.Category.value and you might even want to add to the code (gray) of the function assignment (green).

*The text box could be accessed via its id:


document.getElementById('BOX_ID').style

instead of:


this.form['BOX_NAME'].style

if you prefer.