Hi everybody,
I would like the users to be able to include more than one page in their search, and have a checkmark icon display on the menu items of the pages they have completed. This is a usability enhancement. It's just to "remind" the user that whatever textboxes they filled in on any of the pages with a checkmark icon showing, that data will be included in their search.
I have included my code, so please feel free to modify to help me get the right solution. Currently, the code works to display a checkmark image on the top menu bar using the "onblur" event, if text is typed in a textbox and the user goes to the next textbox -- but I need to use the "onclick" event so that when the user clicks on the menu bar to go to another page, the checkmark icon displays on the previous page they just filled in. If no textbox is filled in, no checkmark displays.
BTW: The search button logic is being done on the back-end.
Here is my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<html>
<head>
<title>About Us</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
#ckmark{
background-image:url(images/checkmark_black.gif);
background-repeat:no-repeat;
display:none;
text-align:left;
float:left;
width:24px;
}
</style>
<script type="text/javascript">
function checkData(v){
var obj=document.getElementById('ckmark');
obj.style.display=v.length>0?'block':'none';
}
</script>
</head>
<body>
<table border="1" width="640" cellpadding="5" cellspacing="5">
<tr>
<td width="100"><a href="test.html">Home</a></td>
<td width="120"><span id="ckmark"> </span><strong>About Us</strong></td>
<td width="140"><a href="stuff.html">More Stuff</a></td>
<td width="140"><a href="contact.html">Contact Us</a></td>
<td valign="top" width="140"><span id="ckmark"> </span><a href="sitemap2.html">Site Map</a></td>
</tr>
<tr>
<td colspan="5">
<form>
<input type="text" name="whatever" onblur="checkData(this.value)"><br /><br />
<input type="text" name="whatever" onblur="checkData(this.value)"><br /><br />
<input type="text" name="whatever" onblur="checkData(this.value)"><br /><br />
<input type="text" name="whatever" onblur="checkData(this.value)"><br /><br />
<input type="text" name="whatever" onblur="checkData(this.value)">
</form>
</td>
</tr>
</table>
</body>
</html>
I hope this is clear to understand. I appreciate your help!
chq
I would like the users to be able to include more than one page in their search, and have a checkmark icon display on the menu items of the pages they have completed. This is a usability enhancement. It's just to "remind" the user that whatever textboxes they filled in on any of the pages with a checkmark icon showing, that data will be included in their search.
I have included my code, so please feel free to modify to help me get the right solution. Currently, the code works to display a checkmark image on the top menu bar using the "onblur" event, if text is typed in a textbox and the user goes to the next textbox -- but I need to use the "onclick" event so that when the user clicks on the menu bar to go to another page, the checkmark icon displays on the previous page they just filled in. If no textbox is filled in, no checkmark displays.
BTW: The search button logic is being done on the back-end.
Here is my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<html>
<head>
<title>About Us</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
#ckmark{
background-image:url(images/checkmark_black.gif);
background-repeat:no-repeat;
display:none;
text-align:left;
float:left;
width:24px;
}
</style>
<script type="text/javascript">
function checkData(v){
var obj=document.getElementById('ckmark');
obj.style.display=v.length>0?'block':'none';
}
</script>
</head>
<body>
<table border="1" width="640" cellpadding="5" cellspacing="5">
<tr>
<td width="100"><a href="test.html">Home</a></td>
<td width="120"><span id="ckmark"> </span><strong>About Us</strong></td>
<td width="140"><a href="stuff.html">More Stuff</a></td>
<td width="140"><a href="contact.html">Contact Us</a></td>
<td valign="top" width="140"><span id="ckmark"> </span><a href="sitemap2.html">Site Map</a></td>
</tr>
<tr>
<td colspan="5">
<form>
<input type="text" name="whatever" onblur="checkData(this.value)"><br /><br />
<input type="text" name="whatever" onblur="checkData(this.value)"><br /><br />
<input type="text" name="whatever" onblur="checkData(this.value)"><br /><br />
<input type="text" name="whatever" onblur="checkData(this.value)"><br /><br />
<input type="text" name="whatever" onblur="checkData(this.value)">
</form>
</td>
</tr>
</table>
</body>
</html>
I hope this is clear to understand. I appreciate your help!
chq
