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


Hide and Unhide controls Using Java Script

December 18, 2010 admin 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: , ,

Other reading this article are also reading these:

html, java script, script,

2 comments on “Hide and Unhide controls Using Java Script

  1. Pingback: top technology stocks 2011

  2. This is something I need but I don’t understand. I am using HTML-kit and I am using Chrome. I have a test program that has hidden in it. Can you contact me at my e-mail? I need help.

    VA:F [1.9.6_1107]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.6_1107]
    Rating: 0 (from 0 votes)

Leave a Reply

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

*

73,118 Spam Comments Blocked so far by Spam Free Wordpress

HTML tags are not allowed.

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