Fire-House 58

Event Handlers

 onChange

e-2
JavaScript:
firehouse58.com onChange event handlers execute script when the value of an object is changed.

 

Hard Reload
To See Menu
select a page

N
O
T
E

Although you do not see it, the browser has already assigned the options in each select object to an array, called the selectedIndex. The options are numbered selectedIndex[0], selectedIndex[1], etc.. This is important to know, since option objects do not have names, it is necessary to access them by the array.

 

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

 onChange

function hyper(form){
var hyper_ = form.one.selectedIndex
var jump_ = form.one.options[hyper_].value
window.open(jump_,"test","height=100,width=100");}

//-->
</script>

 The function hyper evaluates the selectedIndex select object  one and assigns it to the variable hyper_. The value of options[hyper_] is then assigned to jump_. The window.open() method is used to open jump_.     

<form>
<select name="one" size="1" onChange="hyper(this.form);">
<option value="test1.htm">Test Page1</option>
<option value="test2.htm">Test Page2</option>
</select>
</form>

 The select object one has two option objects. Each object has a value which is actually a hyperlink. onChange calls the function hyper.    


onChange

enter a 10 digit ph. number
<form name="onChTestForm">
<input type="text" name="onChTest1" size="25" onChange="this.value=toPhone(this.value)"
maxlength="10">
</form>


 This form element onChTest1calls the function toPhone using an onChange event handler. toPhone will format the entry to standard US phone number format.
<script language="JavaScript"><!--
function toPhone(str) {
isLen = (str.length > 9 ) ? false : true
isNum = (parseInt(str)) ? false : true

N
O
T
E

This script uses reverse logic to rule out anything that could not be a US phone number. Therefore, anything that returns true is counted as an exception. For example if isNum returns NaN, it is set to true, and ruled out. Likewise, if the string length str.length > 9 is more than ten characters, it is set to true and ruled out.

 

if (!isNum) { for ( var i = 0 ; i < str.length ; i++ ) {
if ( str.charAt(i) < "0" || str.charAt(i) > "9" )
{ isNum = true; break;}}}

 parseInt(str) will only rule out strings that do not start with numbers, so a for loop cycles through the string to double check for non-number characters.

     
if ( !isLen && !isNum ) {

formatPhone = "(" + str.substring(0,3) + ") " +
str.substring(3,6) + "-" + str.substring(6); return formatPhone }

else { return "Not a valid Phone Number" }}

// --></script>

 If isLen and isNum are both false, the string is considered to be valid(reverse logic) & formatted.

The string.substring() method is used to seperate the string and insert format marks. str.substring(0,3) returns the first three characters, (3,6) the next three & (6) everthing else.     


 

This event handler can be used with select, text, and text area objects. It is often used to verify client input, or creating hyperlink menus.

 
[back]   [home]   [next]