<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>update second drop down from database without posting page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content=""read file","javascript","client side","i/o"">
<meta name="description" content="It used to be impossible to do any file input-output with JavaScript. That is no longer true in modern browser. In this example Rod Divilbiss shows how to retrieve the value of a drop down list and update a related drop down list from the server without refreshing the whole page.">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="© 2005-2010 Roderick Divilbiss">
<meta name="MSSmartTagsPreventParsing" content="TRUE">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/include/css/all.css">
<link rel="stylesheet" type="text/css" href="/include/css/ee.css">
<script type="text/javascript" src="/include/allPages.js"></script>
<script type="text/javascript">
var sending=false;
//create the Cross-browser XMLHttpRequest object
function getFile(pURL) {
if (window.XMLHttpRequest) { // code for Mozilla, Safari, etc
xmlhttp=new XMLHttpRequest();
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType('text/xml');
}
xmlhttp.onreadystatechange=postFileReady;
xmlhttp.open("GET", pURL, true);
xmlhttp.send(null);
} else if (window.ActiveXObject) { //IE
xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
if (xmlhttp) {
xmlhttp.onreadystatechange=postFileReady;
xmlhttp.open('GET', pURL, false);
xmlhttp.send();
}
}
}
// function to handle asynchronus call
function postFileReady() {
if (xmlhttp.readyState==4) {
if (xmlhttp.status==200) {
document.getElementById('nextDropDown').innerHTML=xmlhttp.responseText;
}
}
}
</script>
</head>
<body>
<label for="letter">First Field: </label><select size="1" id="letter" name="letter" onclick="getFile('Update-A-Companion-Drop-Down-List-When-The-First-List-Changes-List.asp?l='+this[this.selectedIndex].value)">
<option value="A">States beginning with A</option>
<option value="C">States beginning with C</option>
<option value="D">States beginning with D</option>
<option value="F">States beginning with F</option>
<option value="G">States beginning with G</option>
<option value="H">States beginning with H</option>
<option value="I">States beginning with I</option>
<option value="K">States beginning with K</option>
<option value="L">States beginning with L</option>
<option value="M">States beginning with M</option>
<option value="N">States beginning with N</option>
<option value="O">States beginning with O</option>
<option value="P">States beginning with P</option>
<option value="R">States beginning with R</option>
<option value="S">States beginning with S</option>
<option value="T">States beginning with T</option>
<option value="U">States beginning with U</option>
<option value="V">States beginning with V</option>
<option value="W">States beginning with W</option>
</select> Second (remote query) Field: <span id="nextDropDown"> </span>
</div>
</body>
</html>
Date Validation Using JavaScript .
Cross-Browser Clipboard Copy .
Loading Images With Remote Scripting .
Why JavaScript In Hyperlinks Is Bad .
Change The Submit Button To Show Waiting For AJAX Response .
European Date Validation Using JavaScript .
Database Results To Client Side Array .
Reading Files With JavaScript .
AJAX For Plain Text And HTML .
