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

Lession 1.3

Selecting an image from a form. This time the eventhandler is back in the select tag.
I chose images, which all have the same width and height.



Choose an image:






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

HTML:

<form name="f">Choose an image:
<select id="formular" name="kaffee" size="5" onclick="sndReq()">
<option>Image 3 </option>
<option>Image 6 </option>
<option>Image 8 </option>
<option>Image 10 </option>
<option>Image 13 </option>
</select>
</form>

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/optionimages.php?welches='+i,true);
  resObjekt.onreadystatechange = handleResponse;
  resObjekt.send(null);
  break;
  }
 }
}

function handleResponse(){
  document.getElementById("image").innerHTML = resObjekt.responseText;
}

PHP:

echo "<img src=\"pict/img";
switch($_REQUEST['welches']){
 case 1: echo "3"; break;
 case 2: echo "6"; break;
 case 3: echo "8"; break;
 case 4: echo "10"; break;
 default: echo "13";
}
echo ".gif\" width=\"95\" height=\"95\" border=\"0\"/>";