Our Featured Articles:
1 2 3 4 5 6 7 8 9 10
Smooth Slider

Hide and Unhide controls Using Java Script

December 18, 2010 Nolan Sunico Java Script

Post to Twitter

Hiding and Unhide any controls using java script

  • Requirements: Adobe Dreamweaver any PHP/html editor
  • Programming Level: Moderate
  • Language: Java Script
HTML Programming is the basic programming that you should learn before trying to learn any Dynamic Page Creation, like asp, php, aspx, cold fusion, jsp, Oracle Application Server. These server scripting makes web pages dynamically produce and sent to client computer. In relation with this scripts, a client scripting maybe use to make pages more interactive in the user’s point of view before pages be sent back to the server by two types of action, POST and GET. In this article I am going to show you how Java script be use to modify control’s properties at runtime. I am going to use the html button control to interactively access its properties.

Sample Java Script:

<html>
<head><title>Hide and Unhide HTML Button</title>
<script type="text/javascript" language="javascript">
     function ToggleHide(){
          var j=document.getElementById('john'); //John button Handler
          var p=document.getElementById('peter'); //Peter button Handler
          //checks if p is visible
          if (j.style.visibility=='visible'){
               //jhon is visble
               j.style.visibility='hidden';
               p.style.visibility='visible';
          }else{ //peter is visible
               p.style.visibility='hidden';
               j.style.visibility='visible';
          }
     }
</script>
</head>
<body>
<span id="disp" style="font-weight:bold">How to Hide/Unhide HTML Button</span><br>
<input type="button" id="peter" value="hide me show peter" onClick="ToggleHide()">
<input type="button" id="john" style="visibility:hidden" value="Hide me show jhon" onClick="ToggleHide()">
</body>
</html>
Java Script uses document.getElementById() to create handle for the two buttons the style propeties is being use to access sub properties visibility, this sample has been test in IE and Firefox browsers and I don’t think that it won’t work for others browser too.

If you find this article useful, please rate this article below or post a comment on this article….

VN:F [1.9.6_1107]
Rating: 10.0/10 (1 vote cast)
VN:F [1.9.6_1107]
Rating: +1 (from 1 vote)
Hide and Unhide controls Using Java Script, 10.0 out of 10 based on 1 rating

Post to Twitter

Keywords: , ,

You might be also interested to read these articles:

html, java script, script,

One comment on “Hide and Unhide controls Using Java Script”

  1. Pingback: top technology stocks 2011

Leave a Reply

Your email address will not be published. Required fields are marked *

*

10,000 Spam Comments Blocked so far by Spam Free Wordpress

HTML tags are not allowed.

Copyright © 2010-2013 | SourceHints | Term and Conditions | Sitemap | PageRank

Powered by WordPress 3.5.1. Designed by elogi. Allright Reserved SourceHints 2010-2013