Wrox Home  
Search P2P Archive for: Go

  Return to Index  

javascript_howto thread: want a better way to make these Graphic Form Button work


Message #1 by "Ron Brown" <rbrown@n...> on Fri, 12 Oct 2001 07:59:23
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? 

  Return to Index