Dynamically Change button text on click

LucyL · Mar 3, 2004

Hi,
On one of my web pages I have a table which the user may choose to display or hide. At the moment - I have two different buttons, SHOW and HIDE. However, I only want one button, so that when the user clicks SHOW, and the table appears, the button text changes to HIDE.
I'm confused now - anyone with help on this matter?
Thank you.

deecee · Mar 3, 2004

you could put each button in its own layer and hide the "hide" button -- when the user clicks "show" then that one gets hidden and "hide" will be shown. Then vice versa.

if you use Dreamweaver just use the show/hide layers behavior.

Listen All I ask is that You close out a Post You Started!!!!

aperfectcircle · Mar 3, 2004

Here's an example:

Code:

<html>
<head>
<script type="text/javascript">
function changeDisplay()
{
	switch(document.forms[0].myButton.value)
	{
		case "Hide" :
			document.getElementById("myTable").style.visibility = "hidden";
			document.forms[0].myButton.value = "Show";
			break;
		case "Show" :
			document.getElementById("myTable").style.visibility = "visible";
			document.forms[0].myButton.value = "Hide";
			break;
	}
}
</script>
</head>
<body>
<form>
<table id="myTable">
<tr><td>The Table</td></tr>
</table>
<br />
<input type="button" name="myButton" value="Hide" onclick="changeDisplay()" />
</form>
</body>
</html>

LucyL · Mar 3, 2004

This works great - thanks!

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!

Dynamically Change button text on click

LucyL

Technical User

deecee

Technical User

aperfectcircle

Programmer

LucyL

Technical User

Similar threads

Part and Inventory Search

Sponsor