Some Events That Different Form Elements Can Handle
These are the common events which we mostly use
For Button:
we use the Onclick event
For Check box:
We use the onClick event
For radio Button:
We use the onClick event
For Text Box:
We use the onChange event
Note that text fields, textareas, and selects can trigger events only when
someone changes them. If a user clicks on a pull-down menu and then chooses
an already selected option, that doesn’t trigger the onChange event. Similarly,
if someone clicks a text field and then clicks somewhere else without changing
anything in the text field, onChange won’t register this action.
Notice also that the form element takes an event called onSubmit. A form
is submitted when the user presses the ENTER key with the cursor in a text field
or when the user clicks a submit button.
Textbox simple onchange event example:
<form name = "the_form"
>
<input type = "text" name = "email"
onChange = "checkEmail(window.document.the_form.email.value);"/>
</form>
the elements window.document.the_form.email inside the onChange simply identify the text field that the onChange is part of. Because the text field is sending its own value to the checkEmail() function, the onChange of the text field can be rewritten like this:
onChange = "checkEmail(this.value);"
Simple example for SELECT TAG
<html>
<head>
<title>A Pull-Down Menu for Navigation</title>
<script type = "text/javascript">
<!-- hide me from older browsers
function visitSite(the_site)
{
window.location = the_site;
}
// show me -->
</script>
</head>
<body>
<h1>Use the pull-down menu to choose where you want to go</h1>
<form name = "the_form">
<select name = "the_select" onChange = "visitSite(this.value);">
<option value = "http://www.nostarch.com">No Starch Press</option>
<option value = "http://www.nytimes.com">The New York Times</option>
<option value = "http://www.theonion.com">The Onion</option>
</select></form>
</body>
</html>
No comments:
Post a Comment