JavaScript Examples Bible - UserWorks Technologies

onChange
Chapter 9 ✦ Text-Related Form Objects (Chapter 25)
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
Example
Whenever a user makes a change to the text in a field in Listing 25-6 and then
either tabs or clicks out of the field, the change event is sent to that field, triggering
the onChange event handler.
Because the form in Listing 25-6 has only one field, the example demonstrates a
technique you can use that prevents a form from being “submitted” if the user accidentally
presses the Enter key. The technique is as simple as defeating the submission
via the onSubmit event handler of the form. At the same time, the onSubmit
event handler invokes the checkIt() function, so that pressing the Enter key (as
well as pressing Tab or clicking outside the field) triggers the function.
Listing 25-6: Data Validation via an onChange event Handler
Text Object Select/Focus
// general purpose function to see if a suspected numeric input is a number
function isNumber(inputStr) {
for (var i = 0; i < inputStr.length; i++) {
var oneChar = inputStr.substring(i, i + 1)
if (oneChar < “0” || oneChar > “9”) {
alert(“Please make sure entries are numbers only.”)
return false
}
}
return true
}
function checkIt(form) {
inputStr = form.numeric.value
if (isNumber(inputStr)) {
// statements if true
} else {
form.numeric.focus()
form.numeric.select()
}
}
Continued
367
document.formObject.textObject.onChange