Basic Usage of the JS onChange() Event Handler

Posted on November 11, 2008, Filled under JavaScript,  Bookmark it

The onChange() event handler is used when the value of an input or select field is changed and based on that change an event is triggered: a form validator, a URL redirection based on the selected value from the dropdown etc. Below I will show you some usage examples of this JavaScript event:

Trigger a form validator (real time)

This is a sample contact form with a JS validator for: name, email & message:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> onChange() Event Handler (Form Validator)</TITLE>
  <META NAME="Author" CONTENT="Bit Repository">

  <META NAME="Keywords" CONTENT="onchange(), form validation, select, redirect">
  <META NAME="Description" CONTENT="Some basic usage examples of onChange();">

<!-- Preload Images (validated & error icons) -->

<SCRIPT language="JavaScript">
<!--
pic1 = new Image(16, 16);
pic1.src="images/icon_tick.gif";

pic2 = new Image(16, 16);
pic2.src="images/icon_error.gif";
//-->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
<!--
function checkField(field)
{
var okay = '<img src="images/icon_tick.gif" align="absmiddle">';

var icon_error = '<img src="images/icon_error.gif" align="absmiddle">';

// NAME

if(field.id == 'name')
{
	if(field.value.length < 2)
	{
	var str = icon_error + '&nbsp;<font color="red">Error! The name should have at least 2 characters.</font>';
	}
	else
	{
	var str = okay;
	}
}

// E-MAIL

if(field.id == 'email')
{
// http://javascript.about.com/library/blre.htm

emailRe = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*\.(\w{2,10})$/

	if (!emailRe.test(field.value))
	{
	var str = icon_error + '&nbsp;<font color="red">Error! You should enter a valid e-mail address.</font>';
	}
	else
	{
	var str = okay;
	}
}

// MESSAGE

if(field.id == 'message')
{
	if(field.value.length < 20)
	{
	var str = icon_error + '&nbsp;<font color="red">Error! The message should have at least 20 characters.</font>';
	}
	else
	{
	var str = okay;
	}
}

document.getElementById(field.id + "_status").innerHTML = str;

return false;
}
//-->

</SCRIPT>

 </HEAD>

 <BODY>

<form name="form" action="javascript:alert('success!');">
  <table width="804" border="0">

    <tr>
      <td width="324">Full Name:<br />
        <INPUT id="name" size="43" type="text" name="name" onChange="JavaScript: checkField(document.form.name);"></td>

      <td width="470"><div id="name_status"></div></td>
      </tr>
    <tr>
      <td>E-Mail:<br />

	  <INPUT size="43" type="text" id="email" name="email" onChange="JavaScript: checkField(document.form.email);"></td>

      <td valign='bottom'><div id="email_status"></div></td>
    </tr>

	<tr>
      <td>Subject (optional):<br />

	  <INPUT size="43" type="text" id="subject" name="subject"></td>
      <td valign='bottom'>&nbsp;</td>

    </tr>

	<tr>
      <td>Message:<br />
	  <TEXTAREA ID="message" NAME="message" ROWS="8" COLS="33" onChange="JavaScript: checkField(document.form.message);"></TEXTAREA></td>

      <td valign='top'><div style="margin-top: 20px;" id="message_status"></div></td>
    </tr>

	<tr>

      <td><input type="submit" name="submit" value="Submit"></td>
    </tr>

	</table>

</form>
 </BODY>
</HTML>



Redirect to URL upon selection

The follow script redirects a visitor based on what he selected from the dropdown:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> onChange() Event Handler (URL redirector upon select)</TITLE>
  <META NAME="Author" CONTENT="Bit Repository">

  <META NAME="Keywords" CONTENT="onchange(), redirector, on select">
  <META NAME="Description" CONTENT="Some basic usage examples of onChange();">

<SCRIPT LANGUAGE="JavaScript">

<!--
function redirect(url)
{
window.location = url;

var status = "<br /><font color='green'>Loading " + url +"...</font>";

document.getElementById("loading_status").innerHTML = status;
}
//-->
</SCRIPT>

 </HEAD>

 <BODY onLoad="document.getElementById('loading_status').innerHTML = '';">

<form name="form" action="javascript:alert('success!');">

Select a website:
<select name="website" onChange="JavaScript: redirect(document.form.website.options[document.form.website.selectedIndex].value);">

<option value="http://www.yahoo.com/">Yahoo</option>
<option value="http://www.msn.com/">MSN</option>
<option value="http://www.cnn.com/">CNN</option>
<option value="http://www.google.com/">Google</option>

</select>

<div id="loading_status"></div>

</form>
 </BODY>
</HTML>


Tags: