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!

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

command button invisible until checkbox is ticked 1

Status
Not open for further replies.

smurf01

IS-IT--Management
Jul 6, 2002
470
GB
Is it possible to make a command button invisible on page load until the user ticks a checkbox when it does then become visible

Regards

Paul
 
Yes, it is. You could use javascript in conjunction with CSS. Alternatively you could disable the button until the checkbox is marked (more common method). Here's how it works:

Code:
<html>
	<head>
		<script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;>
			function toggleButton(thisButton)
			{
				thisButton = document.getElementById(thisButton);
				if (thisButton.disabled == false) {thisButton.disabled = true;}
				else {thisButton.disabled = false;}
			}
		</script>
	</head>
	<body>
		<form>
			<input type=&quot;checkbox&quot; onclick=&quot;toggleButton('btnTest');&quot;>
			<input type=&quot;button&quot; name=&quot;btnTest&quot; disabled=&quot;disabled&quot; value=&quot;Test Button&quot;>
		</form>
	</body>
</html>

Alternatively for the invisible button:
Code:
<html>
	<head>
		<script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;>
			function toggleButton(thisButton)
			{
				var btnTest = document.getElementById(thisButton);
				if (btnTest.style.visibility == &quot;hidden&quot;) {btnTest.style.visibility = &quot;visible&quot;;}
				else {btnTest.style.visibility = &quot;hidden&quot;;}
			}
		</script>

	</head>
	<body>
		<form name=&quot;frmTest&quot;>
			<input type=&quot;checkbox&quot; onclick=&quot;toggleButton('btnTest');&quot;>
			<input type=&quot;button&quot; name=&quot;btnTest&quot; style=&quot;visibility: hidden;&quot; value=&quot;Test Button&quot;>
		</form>
	</body>
</html>

Hope this helps :)

Take Care,
Mike
 
Michael,
I had managed to sort this out using code I adapted from the link that Cheech sent me, However your code is more elegant and works better than mine so I will be using it from now on. Thank you very much

A &quot;STAR&quot; is on it's way

:-D [2thumbsup] :-D

Regards

Paul
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top