Head Rush Ajax (Head First)

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

Related

Категории