javascript_howto thread: want a better way to make these Graphic Form Button work
Here is some code I recently put together to lookup employees on my
company's employee database. It works fine, but I'd like to change the
code in the "submit" and "reset" graphics buttons so that they access the
form they are contained in is a relative way something like "this" does.
This will make the code more portable because I won't have to worry how
deeply nested this form is buried under other forms or tables.
========================== Code Follows ======================
<html>
<head>
<title>Employee Lookup</title>
</head>
<body bgcolor="#ffffff">
<form name="FindEmp_Form"
method="Get"
action="Databases/Employees2.asp">
<p>
<font face="Arial">
<strong>
<small>
<small>
First or Last Name or Phone Extension or Department
</small>
</small>
</strong>
</font>
<input name="Input"
type="text"
size="25">
<!-- Submit graphic button -->
<a name="submit"
onclick="if(document.FindEmp_Form.Input.value == '') {
alert( 'Please enter a value for the \'Input\'
field.' );
document.FindEmp_Form.Input.focus();
}
else
document.FindEmp_Form.submit();"
onmouseover="window.status='Lookup Employee';"
onmouseout="window.status='';"
style="cursor:hand; text-decoration:underline; color:blue;
font-family:times new roman">
<img src="/images/showme2.gif"
width=60 height=25 border=0
alt="Show me!">
</a>
<!-- Reset graphic button -->
<a name="reset"
onclick="document.FindEmp_Form.reset();"
onmouseover="window.status='Clear Employee\'s name';"
onmouseout="window.status='';"
style="cursor:hand; text-decoration:underline;
color:blue; font-family:times new roman">
<img src="/images/showme3.gif"
width=60 height=25 border=0
alt="Clear">
</a>
<small>
<strong>
<small>
<font face="Arial">
Click
<a href="databases/newemployees.asp">
here
</a>
for a list of recently hired employees.
</font>
</small>
</strong>
</small>
</p>
</form>
</body>
</html>
=========================== End of Code =======================
Too bad the Input Image type form buttons don't have an onClick
event handler. I wouldn't have had to do all of this work.
After all exectly what is being imputted by the Input Image
button if you can't control what it does when you click it?