Section 2.9. Event handler roundup


2.9. Event handler roundup

You have lots of different ways to attach your JavaScript code to your HTML pages. Here are just a few of the more popular event handlers, and a brief review of how each works. Take a close look; you'll be using one of these on the next page...

onChange

The onChange event is triggered any time the value in a form field changes, like when you type in a new value, or clear the existing one.

     <input type="text"     name="street"     onChange="updateMap();" />Here's how you'd specify an onChange event in HTML. 

Triggered when:

___ Field is entered

___ Field is exited

___ Field is changed


onFocus

Any JavaScript attached to the onFocus event is run when a field or other page component gets the focus, by tabbing into the field or by clicking on the component.

     <input type="text" name="state"     onFocus="popupStates();" />Here's the onFocus event handler in action. 

Triggered when:

___ Field is entered

___ Field is exited

___ Field is changed


onBlur

onBlur is used to run code when a user leaves a field, by tabbing out of the field or by clicking on another form component.

     <input type="text"     name="zipCode"This code runs when the zipCode field loses focus.     onBlur="validateZip();" /> 

Triggered when:

___ Field is entered

___ Field is exited

___ Field is changed


Code Magnets

By now, you should be ready to update the Break Neck pizza form. First, you need to add an event handler to run the getCustomerInfo() function that you'll write in just a few pages. Remember, this function should run every time a customer enters a new phone number.

Next, you need to add id attributes to the order form; you'll need these later, when you want access the form's fields in your JavaScript. While you're at it, why don't you clear the form every time it's loaded, too?

Below is the HTML for the current version of the web form. To update this form, attach the HTML and JavaScript magnets from the bottom of the page to the correct blanks in the markup.

     <body _____________________>      <p>       <img src="/books/2/850/1/html/2/breakneck-logo.gif" alt="Break Neck Pizza" />      </p>      <form method="POST" action="placeOrder.php">       <p>Enter your phone number:        <input type="text" size="14" name="phone"             __________="getCustomerInfo();" />       </p>       <p>Your order will be delivered to:</p>       <p><textarea name="address" _________________             rows="4" cols="50"></textarea></p>       <p>Type your order in here:</p>       <p><textarea name="order" __________________             rows="6" cols="50"></textarea></p>       <p><input type="submit" ________________             value="Order Pizza" /></p>      </form>     </body>  onLoad="document.forms[0].reset();" onClick  onFocus  onChange  onBlur  onSubmit 


Code Magnets Solutions

Here's how we finished off the Break Neck web form. Make sure your answers match ours before going on to the next page.

     <body _onLoad="document.forms[0].reset();"_>This clears the first form (forms[0]) in the HTML document.      <p>       <img src="/books/2/850/1/html/2/breakneck-logo.gif" alt="Break Neck Pizza" />      </p>      <form method="POST" action="placeOrder.php">       <p>Enter your phone number:        <input type="text" size="14" name="phone"             _onChange_="getCustomerInfo();" />onChange   makes sure that anytime the phone number changes, getCustomerInfo() will be run.       </p>       <p>Your order will be delivered to:</p>       <p><textarea name="address" ____             rows="4" cols="50"></textarea></p>       <p>Type your order in here:</p>       <p><textarea name="order" _____             rows="6" cols="50"></textarea></p>       <p><input type="submit" ______             value="Order Pizza" /></p>      </form>     </body> onBlur  Here are the magnets that were left over.  onFocus onClick onSubmit  





Head Rush Ajax
Head Rush Ajax (Head First)
ISBN: 0596102259
EAN: 2147483647
Year: 2004
Pages: 241

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net