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

Lession 1.1

Before, the eventhandler was in the select tag. Now we were supposed to insert it into each option, which required changes in the function sndReq(). It turned out that IE cannot handle eventhandlers in the option tags.



Choose your favourite coffee:






Works in: FF 1.5 (Win), Opera 9 (Win)
Does not work in: IE 6, Safari

HTML:

<form name="f">Choose your favourite coffee:
<select name="kaffee" size="5">
<option onclick="sndReq()" value="0">Cup of coffee</option>
<option onclick="sndReq()" value="1">Coffeepot</option>
<option onclick="sndReq()" value="2">Espresso</option>
<option onclick="sndReq()" value="3">Cappuccino</option>
<option onclick="sndReq()" value="4">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(){
var chosenoption;
chosenoption = this.document.f.kaffee.value;
  resObjekt.open('get','php/kaffeeoptions.php?was='+chosenoption,true);
  resObjekt.onreadystatechange = handleResponse;
  resObjekt.send(null);
}

function handleResponse(){
 if(resObjekt.readyState == 4){
  document.getElementById("hs").innerHTML = resObjekt.responseText;
 }
}

PHP:

echo "A good choice. You get ";
switch($_REQUEST['was']){
 default: echo "hot water, which was pressed through fine beans."; break;
 case 1: echo "a whole pot of bliss."; break;
 case 2: echo "the coffee's black soul."; break;
 case 3: echo "caffeine foam."; break;
 case 4: echo "coffee mixed with cow.";
}