asked on

Problem with Visibility of image (input type)

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

gops1

Check your spelling

visibility:hiddene

ASKER CERTIFIED SOLUTION

Göran Andersson

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

netsmithcentral

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>

gops1

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