Week 1:   Starting example   •   Lession 1.1   •   Lession 1.2   •   Lession 1.3

Starting example

A click on the different options shows a different text underneath the form. In this example the eventhandler is in select.



Choose your favourite coffee:






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.";
}