Introduction:
In this article,we are going to discuss about,how to hanle a dropdownlist events using AJAX.
Main:
We can easily handle DropDownList request/response functionalies using ajax without a page refresh.
For ex chek this below html page,
I created 4 text files named “France.txt”,”USA.txt”,”Germany.txt”,”Spain.txt” in my project,and i
retrieved a values from that text files based on dropdownlist selection, using ajax without a page refresh.
The content of text files are,
France.txt Bonjour Monde!
USA.txt NetProgramming World!
Germany.txt Hallo Walt!
Spain.txt Hola Mundo!
<html>
<head>
<script type=”text/javascript”>
var xmlRequest = new XMLHttpRequest();
function handleCountryChange() {
var uri = “Countryvalues/” + countryValue + “.txt”;
xmlRequest.open(“GET”, uri, true);
xmlRequest.onreadystatechange = NetProgrammingCallback;
xmlRequest.send(null);
}
function NetProgrammingCallback() {
if (xmlRequest.readyState == 4) {
var messageL = document.getElementById(“messageLabel”)
if (xmlRequest.status == 200) {
messageL.innerHTML = xmlRequest.responseText
} else {
messageL.innerHTML = “Page Not Found”
}
}
}
</script>
</head>
<body>
<form id=”NetProgrammingForm”><label>Say NetProgramming: </label>
<select id=”country” onkeyup=”handleCountryChange()”
onchange=”handleCountryChange()”>
<option>France</option>
<option>Germany</option>
<option>Spain</option>
<option>USA</option>
</select>
</form>
<p/>
<label id=”messageLabel” style=”border: thin solid”></label>
</body>
</html>
<html> <head> <script type=”text/javascript”> var xmlRequest = new XMLHttpRequest(); function handleCountryChange() { var uri = “Countryvalues/” + countryValue + “.txt”; xmlRequest.open(“GET”, uri, true); xmlRequest.onreadystatechange = NetProgrammingCallback; xmlRequest.send(null); } function NetProgrammingCallback() { if (xmlRequest.readyState == 4) { var messageL = document.getElementById(“messageLabel”) if (xmlRequest.status == 200) { messageL.innerHTML = xmlRequest.responseText } else { messageL.innerHTML = “Page Not Found” } } } </script> </head> <body> <form id=”NetProgrammingForm”><label>Say NetProgramming: </label> <select id=”country” onkeyup=”handleCountryChange()” onchange=”handleCountryChange()”> <option>France</option> <option>Germany</option> <option>Spain</option> <option>USA</option> </select> </form> <p/> <label id=”messageLabel” style=”border: thin solid”></label> </body> </html> |
Conclusion:
Hope this helps,
Happy Coding.
Phenomenal blog, numerous amusing information. I believe 4 of days ago, I have viewed a similar blog. Does anyone know how to track future posts?