Greg Amer

Event Handlers

 onClick

e-3
JavaScript:
gascripts.com onClick event handlers execute script when an object is clicked.

 

Hard Reload
To See Menu
enter your e-mail address

N
O
T
E

The string.indexOf("subtring",n) method is used to search a string for a particular subtring starting from the n position in the string. In this example the search is limited to "@", 0, and ".", 0. If the subtring is not found, a value of -1 is returned.

 

<script language="JavaScript">
<!--

 onClick

function valid_(form){
var email_ = form.one.value

if (email_ == "" || email_.indexOf("@", 0) == -1 || email_.indexOf(".", 0) == -1)

alert("Please enter a valid e-mail address.");
else alert("Thanks.");}

// -->
</script>

 This function uses the conditional control structure if to evaluate the value of the text object one.If the value is empty "", does not contain an @, or contains less than on dot, the alert is triggered. Each of the conditions email_ == "", etc. is separated by the Boolean || or operator. Each condition uses the Comparison operator == for evaluation.

      

<form>
<input type="text" name="one" size="20">
<input type="submit" value="OK!" name="OK" onClick="valid_(this.form)">
</form>

 The submit object OK, uses an onClick event handler to call the function valid_, which tests the value of the text object one, to verify that the input is in proper e-mail format.   



method
click()
imagine a really long form
click to skip the rest of this form.




N
O
T
E

This form using an onClick event handler with the radio object to force a submission. In order to properly send a form for CGI processing, a form can only have on submit object. A long form can gather relevant information up front, then allow users to skip the remainder.

<form name="clTestForm" onSubmit="clSubmit()">
<input type="text" name="clText1" size="10">
<input type="text" name="clText2" size="10">

<input type="radio" value="V1" checked name="clRadio" onClick="clTest()">

click to skip the rest of this form.

<textarea rows="2" name="clTextArea" cols="20"></textarea>

<input type="submit" value="Submit" name="B1">
<input type="reset" value="Reset" name="B2">
</form>

 

 The form clTestForm utilizes an onSubmit event handler to process the form.


The radio object clRadio allows users to skip the remainder of a form, by using an onClick event handler to call the function clTest().


A form can only have one submit object. It's job is to submit the form.        
<script language="JavaScript"><!--

function clTest() {
document.clTestForm.submit.click(); clSubmit() }

function clSubmit() {
alert("Thank You") }

// --></script>
The function clTest(), uses the click() method to actually force a click of the forms submit button.


In a more realistic scenario, the form would specify an action and method for CGI processing.


This onClick event handler can be used with area, button, checkbox, link, radio, reset, & submit objects. 

 
[back]   [home]   [next]