Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Rhinorhino on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Making INPUT Box visible/hidden 1

Status
Not open for further replies.
KingElvis

KingElvis

Programmer
Joined
Jan 28, 2004
Messages
39
Location
IL
I have an OPTION Box and an INPUT Box. When someone chooses as specific OPTION, then the INPUT Box must become visible, otherwise it must remain hidden.

I've tried the code below, but it doesn't work. Any advice?

<select name="Style">
<option selected>--Select Style--</option>
<%=SF_GetStyleSELECT(Request.Cookies(consts_CollectionName_User)("style"))%></select>
</td>
</tr>
<%
dim stype
stype = "hidden"

if shiurfrequency = "Once-only Shiur" then
stype = "visible"
end if
%>
<tr><td>Style:</td><td>
<input name=mstyle type = "<%=stype%>" size=25 value="<%=Request.Cookies(consts_CollectionName_user)("style")%>" </td></tr>
 
Sort by date Sort by votes
ASP only works on the server side -- once you send the page, nothing changes. ASP never sees anything the user does except clicking a link or submitting a form.

You want to use Javascript on the client side where user is actually doing stuff. The Javascript forum, forum216, will be able to help.
 
Upvote 0 Downvote
Would it work for you to disable the text box and then enable when a value is selected?
 
Upvote 0 Downvote
You can modify the following example to your needs. Basically, if something other than the first option is selected, the textbax is active, otherwise it is disabled.

<HTML>
<HEAD>
</HEAD>
<BODY onLoad="document.form1.mytextbox.disabled=true;">
<form name=form1>
<select name="Style" onChange="if(this.selectedIndex > 0) {document.form1.mytextbox.disabled=false;} else {document.form1.mytextbox.disabled=true;}">
<option selected>--Select Style--</option>
<option >1</option>
<option >2</option>
<option >3</option>
<P>
<input type=text name="mytextbox">
</form>
</BODY>
</HTML>
 
Upvote 0 Downvote
Another option is to play with the style.display CSS attribute to hide or show it:
Code: 
<HTML>
<HEAD>
</HEAD>
<BODY onLoad="document.form1.mytextbox.disabled=true;">
<form name=form1>
<select name="Style" onChange="if(this.selectedIndex > 0) {document.form1.mytextbox.style.display='inline';} else {document.form1.mytextbox.style.display='none';}">
<option selected>--Select Style--</option>
<option >1</option>
<option >2</option>
<option >3</option>
<P>
<input type=text name="mytextbox" style="display:inline;">
</form>
</BODY>
</HTML>

This will cause it to magically appear and disappear as needed. The only problem you may run into is tat with this method it will still pass it's value in the form, whereas if you disable it it will not pass it's value. Maybe a combination of both would be best, at that point I would move all the JS to a <Script> section and dump it into a function.

-T

barcode_1.gif
 
Upvote 0 Downvote
As Tarwn pointed out, the css can hide it, but it is only supported by Internet Explorer on PC's. If that's not an issue for you, you need the remove the onLoad tag from the body tag:

<HTML>
<HEAD>
</HEAD>
<BODY>
<form name=form1>
<select name="Style" onChange="if(this.selectedIndex > 0) {document.form1.mytextbox.style.display='inline';} else {document.form1.mytextbox.style.display='none';}">
<option selected>--Select Style--</option>
<option >1</option>
<option >2</option>
<option >3</option>
<P>
<input type=text name="mytextbox" style="display:none;">
</form>
</BODY>
</HTML>
 
Upvote 0 Downvote
Umm... actually my error was not that .style.display doesn't work in other browsers, it was that I used your exampe code and only modified it slightly. Your code is non-compliant, whereas I use .style.display quite heavily in my TreeView component to make nodes appear and disappear. In fact, the reason I have used the Display attribute for so long is because originally I was using the visibility attribute that was unsupported in Netscape, moving to .style.display was supported as well as better looking. I don't know if visibility is supported now or not becaue .style.display is all I have ever needed.

Now, while there are a couple buygs still in Firefox's DOM, .style.display DOES work. Here is some sample output from my Treeview ASP classes
Code: 
<script language="javascript">
//first redirect all click events to the navClicked function
	document.onclick = navClicked;

	function switchPoint(aNavPoint){
		var collapsed;
		if(aNavPoint.innerHTML == "+"){
			collapsed=false;
			aNavPoint.innerHTML = "-";
		}
		else{
			collapsed=true;
			aNavPoint.innerHTML = "+";
		}
		return collapsed;
	}
	function navClicked(e){
		//assume the click was on a switchPoint and that it is collapsed
		var isCollapsed = true;
		//get a reference to the element that was clicked
		if(!e){
			var elem = window.event.srcElement;
		}
		else{
			var elem = e.target;
		}
		var nodelist = elem.parentNode.childNodes[2];
		//if the element that was clicked on was one of the toggles
		if(elem.className == "node_toggle"){
			//call the switchpoint function to change it's state, ie "+" to "-" and "-" to "+"
			isCollapsed = switchPoint(elem);
			//if the item is now collapsed after switching
			if(isCollapsed)
				//get it's parent element, get the parents third child (element_contents), hide it
				nodelist.style.display = "none";
			else
				//otherwise open it's element_contents sibling
				nodelist.style.display = "inline";
		}
	}</script><style>	
	.node{
		margin-left:25px;
		padding-left: 5px;
	}
	.node_children{
		display:none;
	}
	.node_toggle{
		width:20px;
		text-decoration:none;
		text-align:center;
		color:#666666;
		cursor:hand;
	}
	.node_no_toggle{
		width:20px;
		text-decoration:none;
	}
</style><div class="tree_view"><div class="node"><span class="node_toggle">+</span><span class="node_text">Parent 1</span><div class="node_children" style="display:none;"><div class="node"><span class="node_no_toggle">&nbsp;</span><span class="node_text">Child 1 (Parent 1)</span></div><div class="node"><span class="node_no_toggle">&nbsp;</span><span class="node_text">Child 2 (Parent 1)</span></div><div class="node"><span class="node_no_toggle">&nbsp;</span><span class="node_text">Child 3 (Parent 1)</span></div></div></div><div class="node"><span class="node_toggle">+</span><span class="node_text">Parent 2</span><div class="node_children" style="display:none;"><div class="node"><span class="node_no_toggle">&nbsp;</span><span class="node_text">Child 1 (Parent 2)</span></div><div class="node"><span class="node_toggle">+</span><span class="node_text">Child 2 (Parent 2)</span><div class="node_children" style="display:none;"><div class="node"><span class="node_no_toggle">&nbsp;</span><span class="node_text">Child 1 (Parent 2-2)</span></div><div class="node"><span class="node_no_toggle">&nbsp;</span><span class="node_text">Child 2 (Parent 2-2)</span></div><div class="node"><span class="node_no_toggle">&nbsp;</span><span class="node_text">Child 3 (Parent 2-2)</span></div></div></div><div class="node"><span class="node_no_toggle">&nbsp;</span><span class="node_text">Child 3 (Parent 2)</span></div></div></div><div class="node"><span class="node_no_toggle">&nbsp;</span><span class="node_text">Parent 3</span></div><div class="node"><span class="node_toggle">+</span><span class="node_text">Parent 4</span><div class="node_children" style="display:none;"><div class="node"><span class="node_no_toggle">&nbsp;</span><span class="node_text">Child 1 (Parent 4)</span></div><div class="node"><span class="node_no_toggle">&nbsp;</span><span class="node_text">Child 2 (Parent 4)</span></div><div class="node"><span class="node_no_toggle">&nbsp;</span><span class="node_text">Child 3 (Parent 4)</span></div></div></div></div>

Let me know which browsr it fails in.

-T

barcode_1.gif
 
Upvote 0 Downvote
Actually, I may as well fix the example also:
Code: 
<HTML>
<HEAD>
</HEAD>
<BODY>
<form name=form1>
<select name="Style" onChange="if(this.selectedIndex > 0) {document.form1.mytextbox.style.display='inline';} else {document.form1.mytextbox.style.display='none';}">
<option selected>--Select Style--</option>
<option >1</option>
<option >2</option>
<option >3</option>
[highlight]</select>[/highlight]
<P>
<input type=text name="mytextbox" style="display:[highlight]none[/highlight];">
</form>
</BODY>
</HTML>

-T

barcode_1.gif
 
Upvote 0 Downvote
My mistake. Tarwn is absolutely correct. Sorry about that.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

penguinspeaks
  • Locked
  • Question Question
Parse a database field that is comma delimited and input the results into another table
Replies
0
Views
724
penguinspeaks
penguinspeaks
leifoet
  • Locked
  • Question Question
First execute an input command and only then proceed with displaying the next record of the table
Replies
0
Views
637
leifoet
leifoet
leifoet
  • Locked
  • Question Question
How to display an existing date in Input type=&quot;date&quot;?
Replies
4
Views
591
leifoet
leifoet
Whiskypoo
  • Locked
  • Question Question
Select option compare user input
Replies
3
Views
358
ChrisHirst
ChrisHirst
leifoet
  • Locked
  • Question Question
How do I create an automatic multiplication in a combo box
Replies
2
Views
347
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top