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 strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

simple function for a simple man 1

Status
Not open for further replies.
JohnShell

JohnShell

Technical User
Aug 29, 2003
35
US
Just starting to learn js. Have a hidden text box. Want to enable users to click button to display that text box and click another button to hide instructions. Seems two functions needed but I do not know syntax. For example,
function showInstructions()
{
document.getElementById("Instructions").style.display = 'block';
}

The text is <cfinput type="hidden" name="Instructions">
Then there is <input name="instruct" type="button" value="Show Instructions" onclick="showInstructions();"/>

This does not work. What do I need to do to get it working? Also will place another button to hide instructions.

Thank you,
John
 
Sort by date Sort by votes
That's not the purpose of type=hidden. Use that to have a value on the action page that does not ever display on the form.

Try placing an element and setting its display style to none:
Code: 
<div id="Instructions" style="display:none;">
 Type instructions here...
</div>

The element could be a form element but given what you're describing I think you would be better served using a div.

Notice I set the div's id to "Instructions", not its name, as you are getting the element using getElementById
Also if you're using coldfusion I don't think the cfinput tag accepts type=hidden.

Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey
 
Upvote 0 Downvote
Thank you Lyndon - I will try this tomorrow AM. John
 
Upvote 0 Downvote
I would recommend that also you look at something like jQuery .slideToggle.

Make no mistake, jQuery is a whole 'nuther thing to learn, but for "fancy" effects like slides and hides and stuff it can be pretty cool.


The first example at the bottom of that page might be something like what you want.
 
Upvote 0 Downvote
Here is some JS that should do the trick

Code: 
<html>
	<head>
		<script type="text/javascript">
		<!--
			//this alternates the display
			function showhide(name, button)
			{
				if(document.getElementById(name).style.display != "none")
				{
					document.getElementById(name).style.display = "none";
					document.getElementById(button).value = "Show Instructions";
				}
				else{document.getElementById(name).style.display = "block";document.getElementById(button).value = "Hide Instructions";}
			}
		-->
		</script>
	</head>
	<body>
		<div id="Instructions" style="display:none;">
			Here are the instructions 
		</div>
		<input id="instruct" type="button" value="Show Instructions" onclick="javascript:showhide('Instructions', 'instruct');"/>
	</body>
</html>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
305
lexer
lexer
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
699
Mike Lewis
Mike Lewis
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
279
coldbohemia
coldbohemia
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
267
Rayj0000
Rayj0000
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
314
malpa
malpa

Part and Inventory Search

Sponsor

Back
Top