Starting example
A click on the different options shows a different text underneath the form. In this example the eventhandler is in
select.
Works in: FF 1.5 (Win), Opera 9 (Win), IE 6, FF 1.5 (Mac), Safari
Does not work in:
HTML:
<form name="f">Choose your favourite coffee:
<select name="kaffee" size="5" onclick="sndReq()">
<option>Cup of coffee</option>
<option>Coffeepot</option>
<option>Espresso</option>
<option>Cappuccino</option>
<option>Café au lait</option>
</select>
</form>
<span id="hs"></span>
JavaScript:
var resObjekt;
if (navigator.appName.search("Microsoft") > -1){
//resObjekt = new ActiveXObject("Microsoft.XMLHTTP");
resObjekt = new ActiveXObject("MSXML2.XMLHTTP");
}
else {
resObjekt = new XMLHttpRequest();
}
function sndReq(){
for(i=1;i<=5;i++){
if (this.document.f.kaffee.options[i-1].selected){
resObjekt.open('get','php/kaffeeselect.php?was='+i,true);
resObjekt.onreadystatechange = handleResponse;
resObjekt.send(null);
break;
}
}
}
function handleResponse(){
if(resObjekt.readyState == 4){
document.getElementById("hs").innerHTML = resObjekt.responseText;
}
}
PHP:
echo "A good choice. You get ";
switch($_REQUEST['was']){
case 1: echo "hot water, which was pressed through fine beans."; break;
case 2: echo "a whole pot of bliss"; break;
case 3: echo "the coffee's black soul."; break;
case 4: echo "caffeine foam."; break;
default: echo "coffee mixed with cow.";
}