Solved

Problem with Visibility of image (input type)

Posted on 2007-11-20
4
660 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
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…

752 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