Posted on November 11, 2008, Filled under JavaScript, 
Bookmark it
Thanks for visiting our website! We regularly publish posts like this one. If you are interested in receiving the latest updates as soon as they are posted, please consider subscribing to the RSS feed or to our e-mail newsletter.
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 + ' <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 + ' <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 + ' <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'> </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>
Posted on November 8, 2008, Filled under PHP, Bookmark it
This is a snippet that creates a dynamic dropdown menu with countries. The select is created from the $countries array. You can set a country that will be selected automatically when the drop down is loaded. This can be done by editing the variable $default. You can specify the key from the array (i.e.: 220 for US) or the country name (i.e.: Argentina).
Dynamic DropDown (PHP)
config.php
<?php
/*
---------------
Countries List
---------------
*/
$countries = array('1' => 'Afghanistan',
'2' => 'Albania',
'3' => 'Algeria',
'4' => 'American Samoa',
'5' => 'Andorra',
'6' => 'Angola',
'7' => 'Anguilla',
'8' => 'Antarctica',
'9' => 'Antigua and Barbuda',
'10' => 'Argentina',
'11' => 'Armenia',
'12' => 'Aruba',
'13' => 'Australia',
'14' => 'Austria',
'15' => 'Azerbaidjan',
'16' => 'Bahamas',
'17' => 'Bahrain',
'18' => 'Bangladesh',
'19' => 'Barbados',
'20' => 'Belarus',
'21' => 'Belgium',
'22' => 'Belize',
'23' => 'Benin',
'24' => 'Bermuda',
'25' => 'Bhutan',
'26' => 'Bolivia',
'27' => 'Bosnia-Herzegovina',
'28' => 'Botswana',
'29' => 'Bouvet Island',
'30' => 'Brazil',
'31' => 'British Indian Ocean Territory',
'32' => 'Brunei Darussalam',
'33' => 'Bulgaria',
'34' => 'Burkina Faso',
'35' => 'Burundi',
'36' => 'Cambodia',
'37' => 'Cameroon',
'38' => 'Canada',
'39' => 'Cape Verde',
'40' => 'Cayman Islands',
'41' => 'Central African Republic',
'42' => 'Chad',
'43' => 'Chile',
'44' => 'China',
'45' => 'Christmas Island',
'46' => 'Cocos (Keeling) Islands',
'47' => 'Colombia',
'48' => 'Comoros',
'49' => 'Congo',
'50' => 'Cook Islands',
'51' => 'Costa Rica',
'52' => 'Croatia',
'53' => 'Cyprus',
'54' => 'Czech Republic',
'55' => 'Denmark',
'56' => 'Djibouti',
'57' => 'Dominica',
'58' => 'Dominican Republic',
'59' => 'East Timor',
'60' => 'Ecuador',
'61' => 'Egypt',
'62' => 'El Salvador',
'63' => 'Equatorial Guinea',
'64' => 'Eritrea',
'65' => 'Estonia',
'66' => 'Ethiopia',
'67' => 'Falkland Islands',
'68' => 'Faroe Islands',
'69' => 'Fiji',
'70' => 'Finland',
'71' => 'Former USSR',
'72' => 'France',
'73' => 'France (European Territory)',
'74' => 'French Guyana',
'75' => 'French Southern Territories',
'76' => 'Gabon',
'77' => 'Gambia',
'78' => 'Georgia',
'79' => 'Germany',
'80' => 'Ghana',
'81' => 'Gibraltar',
'82' => 'Greece',
'83' => 'Greenland',
'84' => 'Grenada',
'85' => 'Guadeloupe (French)',
'86' => 'Guam',
'87' => 'Guatemala',
'88' => 'Guinea',
'89' => 'Guinea Bissau',
'90' => 'Guyana',
'91' => 'Haiti',
'92' => 'Heard and McDonald Islands',
'93' => 'Honduras',
'94' => 'Hong Kong',
'95' => 'Hungary',
'96' => 'Iceland',
'97' => 'India',
'98' => 'Indonesia',
'99' => 'Iraq',
'100' => 'Ireland',
'101' => 'Israel',
'102' => 'Italy',
'103' => 'Ivory Coast',
'104' => 'Jamaica',
'105' => 'Japan',
'106' => 'Jordan',
'107' => 'Kazakhstan',
'108' => 'Kenya',
'109' => 'Kiribati',
'110' => 'Kuwait',
'111' => 'Kyrgyzstan',
'112' => 'Laos',
'113' => 'Latvia',
'114' => 'Lebanon',
'115' => 'Lesotho',
'116' => 'Liberia',
'117' => 'Libya',
'118' => 'Liechtenstein',
'119' => 'Lithuania',
'120' => 'Luxembourg',
'121' => 'Macau',
'122' => 'Macedonia',
'123' => 'Madagascar',
'124' => 'Malawi',
'125' => 'Malaysia',
'126' => 'Maldives',
'127' => 'Mali',
'128' => 'Malta',
'129' => 'Marshall Islands',
'130' => 'Martinique (French)',
'131' => 'Mauritania',
'132' => 'Mauritius',
'133' => 'Mayotte',
'134' => 'Mexico',
'135' => 'Micronesia',
'136' => 'Moldavia',
'137' => 'Monaco',
'138' => 'Mongolia',
'139' => 'Montserrat',
'140' => 'Morocco',
'141' => 'Mozambique',
'142' => 'Myanmar, Union of (Burma)',
'143' => 'Namibia',
'144' => 'Nauru',
'145' => 'Nepal',
'146' => 'Netherlands',
'147' => 'Netherlands Antilles',
'148' => 'Neutral Zone',
'149' => 'New Caledonia (French)',
'150' => 'New Zealand',
'151' => 'Nicaragua',
'152' => 'Niger',
'153' => 'Nigeria',
'154' => 'Niue',
'155' => 'Norfolk Island',
'156' => 'Northern Mariana Islands',
'157' => 'Norway',
'158' => 'Oman',
'159' => 'Pakistan',
'160' => 'Palau',
'161' => 'Panama',
'162' => 'Papua New Guinea',
'163' => 'Paraguay',
'164' => 'Peru',
'165' => 'Philippines',
'166' => 'Pitcairn Island',
'167' => 'Poland',
'168' => 'Polynesia (French)',
'169' => 'Portugal',
'170' => 'Qatar',
'171' => 'Reunion (French)',
'172' => 'Romania',
'173' => 'Russian Federation',
'174' => 'Rwanda',
'175' => 'S. Georgia & S. Sandwich Islands',
'176' => 'Saint Helena',
'177' => 'Saint Kitts & Nevis Anguilla',
'178' => 'Saint Lucia',
'179' => 'Saint Pierre and Miquelon',
'180' => 'Saint Tome and Principe',
'181' => 'Saint Vincent & Grenadines',
'182' => 'Samoa',
'183' => 'San Marino',
'184' => 'Saudi Arabia',
'185' => 'Senegal',
'186' => 'Seychelles',
'187' => 'Sierra Leone',
'188' => 'Singapore',
'189' => 'Slovakia',
'190' => 'Slovenia',
'191' => 'Solomon Islands',
'192' => 'Somalia',
'193' => 'South Africa',
'194' => 'South Korea',
'195' => 'Spain',
'196' => 'Sri Lanka',
'197' => 'Suriname',
'198' => 'Svalbard and Jan Mayen Islands',
'199' => 'Swaziland',
'200' => 'Sweden',
'201' => 'Switzerland',
'202' => 'Tadjikistan',
'203' => 'Taiwan',
'204' => 'Tanzania',
'205' => 'Thailand',
'206' => 'Togo',
'207' => 'Tokelau',
'208' => 'Tonga',
'209' => 'Trinidad and Tobago',
'210' => 'Tunisia',
'211' => 'Turkey',
'212' => 'Turkmenistan',
'213' => 'Turks and Caicos Islands',
'214' => 'Tuvalu',
'215' => 'Uganda',
'216' => 'UK',
'217' => 'Ukraine',
'218' => 'United Arab Emirates',
'219' => 'Uruguay',
'220' => 'US',
'221' => 'USA Minor Outlying Islands',
'222' => 'Uzbekistan',
'223' => 'Vanuatu',
'224' => 'Vatican City',
'225' => 'Venezuela',
'226' => 'Vietnam',
'227' => 'Virgin Islands (British)',
'228' => 'Virgin Islands (USA)',
'229' => 'Wallis and Futuna Islands',
'230' => 'Western Sahara',
'231' => 'Yemen',
'232' => 'Yugoslavia',
'233' => 'Zaire',
'234' => 'Zambia',
'235' => 'Zimbabwe');
/*
Searches the array for a given value (insensitive case) and returns the corresponding key if successful
*/
function array_isearch($value, $array)
{
while (list($key, $val) = each($array))
{
$val = strtolower($val);
$value = strtolower($value);
if($val == $value) return $key;
}
return false;
}
?>
Read the rest of this entry
Posted on November 6, 2008, Filled under JQuery, JavaScript, Bookmark it
I was googling for a way to show a drop down menu with states that populates another menu with counties from the selected state. I found a nice dynamic dependent drop down script (with categories & subcategories) at dreamwebstore.com. However, adding over 2000 counties in a single JavaScript file is not such a good idea because such a script is quite big (200KB+) and in many cases (a slow internet connection, some downloads in progress etc.) it will take some time to load.
I’ve decided to keep the counties from each state in separate files. For instance, if we select Hawaii state (with 5 counties), only the hi.js file will load which has only a size of 515 bytes. To do this I’ve used the powerful JavaScript library JQuery.
Read more from this entry…
Posts tagged 'dropdown'
