Solved

Problem with Visibility of image (input type)

Posted on 2007-11-20
4
661 Views
Last Modified: 2012-08-14
I have code that I want to display a new textbox (txt2) & search icon (search2) when the first textbox is populated & clicked away from.  I am able to get this to display the next textbiox & the image only if I use IMG tag; but not if I use input type="image", which is what I'd like here. I have also tried it with the display=none/block attribute as well.


<script language="javascript">
   function showField(i, val) {
      if ((i==1) && (val!="")){
         document.frmItems.txt2.style.visibility='visible';
         document.frmItems.search2.style.visibility='visible';
      }
</script
 
//body
 
<table>
   <tr><td><input name="txt1" type="text" onblur="showField(1, this.value);" size="15" /></td>
   <td><input type="image" name="search1" src="icon_search.jpg"  /></td></tr>
 
   <tr><td><input type="text" name="txt2" onblur="showField(2, this.value);" style="visibility:hidden" size="15" /></td>
   <td><input type="image" id="search2" name="search2" src="icon_search.jpg" style="visibility:hiddene" />
</td> </tr> </table>

Open in new window

0
Comment
Question by:katiep23
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 17

Expert Comment

by:gops1
ID: 20321926
Check your spelling

visibility:hiddene
0
 
LVL 29

Accepted Solution

by:
Göran Andersson earned 100 total points
ID: 20321981
The form.elements collection doesn't contain input elements with type="image". You have to access the image button using the id:
document.getElementById('search2').style.visibility='visible';

Open in new window

0
 
LVL 12

Expert Comment

by:netsmithcentral
ID: 20322008
There were a couple of syntactic problems with the snippet you posted.  Try this:

<html>
<head>
<script language="javascript">
   function showField(i, val) {
      if ((i==1) && (val!="")){
         document.getElementById('txt2').style.display = 'block';
         document.getElementById('search2').style.display = 'block';
      }
      }
</script>
</head>
<body>
<table>
   <tr><td><input name="txt1" type="text" onblur="showField(1, this.value);" size="15" /></td>
   <td><input type="image" name="search1" src="icon_search.jpg"  /></td></tr>
 
   <tr><td><input type="text" name="txt2" id="txt2" onblur="showField(2, this.value);" style="display: none" size="15" /></td>
   <td><input type="image" id="search2" name="search2" src="icon_search.jpg" style="display: none" />
</td> </tr> </table>
</body>
</html>
0
 
LVL 17

Expert Comment

by:gops1
ID: 20322032
or this way:
<html>
	<head>
		<title>Script Demo Gops</title>
		<script language="javascript">
			function showField(i, val) {
				if ((i==1) && (val!="")){
					document.getElementById('row2').style.visibility='visible';
				}
			}
 
        </script>
     </head>
<body>
	<form name="frmItems">
		<table>
			<tr>
				<td><input name="txt1" type="text" onblur="showField(1, this.value);" size="15" /></td>
				<td><input type="image" name="search1" src="icon_search.jpg"  /></td>
			</tr>
			<tr id="row2" style="visibility:hidden">
				<td><input type="text" name="txt2" onblur="showField(2, this.value);" size="15" /></td>
				<td><input type="image" name="search2" src="icon_search.jpg" /></td>
			</tr>
		</table>
	</form>
</body>
</html>

Open in new window

0

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

622 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