Solved

Change / Hide text field on click

Posted on 2008-10-29
4
4,029 Views
Last Modified: 2012-05-05
Hi,

I have the below code which works well to show the hidden text field but once the field is changed to inline-block it cannot be reverted back to hidden.

Can you please provide suggestions? Thanks.
function Change(){
if (document.getElementById( "myId" ).style.display = "none")
	{
		document.getElementById( "myId" ).style.display = "inline-block"; 
	}
else
 
if (document.getElementById( "myId" ).style.display = "inline-block")
	{
		document.getElementById( "myId" ).style.display = "none"; 
	}
}
 
<BODY>
 
<tr>
 
<td>
<input type="button" onclick="Change();" value="Click Me">
</td>
 
<!--<input type="button" onclick="Hide();" value="Java Hide"> -->
 
<td><input type=text id="myId" style="display:none"></input></td>
 
</tr>
 
</BODY>
</HTML>

Open in new window

0
Comment
Question by:Rassac
  • 2
4 Comments
 
LVL 82

Accepted Solution

by:
hielo earned 125 total points
ID: 22829148
try:
<html>
<head>
<script type="text/javascript">
function Change(){
if (document.getElementById( "myId" ).style.display == "none")
      {
            document.getElementById( "myId" ).style.display = "inline-block"; 
      }
else if (document.getElementById( "myId" ).style.display == "inline-block")
      {
            document.getElementById( "myId" ).style.display = "none"; 
      }
}
 </script>
 </head>
<BODY>
 
<tr>
 
<td>
<input type="button" onclick="Change();" value="Click Me">
</td>
 
<!--<input type="button" onclick="Hide();" value="Java Hide"> -->
 
<td><input type=text id="myId" style="display:none"></input></td>
 
</tr>
 
</BODY>
</HTML>

Open in new window

0
 
LVL 6

Assisted Solution

by:Chorch
Chorch earned 125 total points
ID: 22829151
Hello,

I use this funtion which can show/hide many different elements in page:

<script type="text/javascript">
var state = 'none';
function showhide(divname) {
      if (state == 'block') {
            state = 'none';
      }
      else {
            state = 'block';
      }
      if (document.all) {
            eval("document.all." + divname + ".style.display = state");
      }
      if (document.layers) {
            document.layers[divname].display = state;
            
      }
      if (document.getElementById &&!document.all) {
            document.getElementById(divname).style.display = state;
      }
}
</script>
===================
<input type="button" onclick="showhide('myId');" value="Click Me">

Regards
0
 

Author Closing Comment

by:Rassac
ID: 31511084
thanks :)
0
 
LVL 82

Expert Comment

by:hielo
ID: 22831022
you are welcome
0

Featured Post

What is SQL Server and how does it work?

The purpose of this paper is to provide you background on SQL Server. It’s your self-study guide for learning fundamentals. It includes both the history of SQL and its technical basics. Concepts and definitions will form the solid foundation of your future DBA expertise.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question