<html>
<head>



<script language="JavaScript" src="utility_funktionen.js"></script>
<script language="JavaScript">

// Globales Ajax-Objekt erzeugen
ako = new ErzeugeAJAXObjekt();

//Globales Ajax-Kommunikationsobjekt erzeugen
ahro = ako.erzXMLHttpRequestObject();

// auf ENTER-Taste pruefen ...
function eintippen(e)
{
  if (e.keyCode == 13) // RETURN-Taste
  {
     send_to_server();
  }
}

// asynchrone Anfrage zum Webserver senden
function send_to_server()
{
   // Werte aus den Eingabefeldern auf lokale Variablen speichern
   zuname=document.getElementById("zuname").value;
   vorname=document.getElementById("vorname").value;
   telefon=document.getElementById("telefon").value;
   email=document.getElementById("email").value;
   adresse=document.getElementById("adresse").value;
   info=document.getElementById("info").value;

   // Eingegeben Werte auf erlaubte Zeichen pr�fen
   if (!myCheckInput(zuname,vorname,telefon,email,adresse,info))
      return;  // im Fehlerfall --> Abbruch

   // Werte auf den Variablen verschluesseln
   zuname=my_encode(zuname);
   vorname=my_encode(vorname);
   telefon=my_encode(telefon);
   email=my_encode(email);
   adresse=my_encode(adresse);
   info=my_encode(info);

   // POST-Parameter als Text zusammenbauen
   http_parameter="zuname="+zuname+"&vorname="+vorname+"&telefon="+telefon;
   http_parameter=http_parameter+"&email="+email+"&adresse="+adresse+"&info="+info;

   // PHP-Datei mit POST-Parameter auf entferntem Web-Server aufrufen
   ahro.open("POST", "erfassen.php", true);
   ahro.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
   ahro.onreadystatechange=receive_from_server;
   ahro.send(http_parameter);

   // Oberflaechenelemente deaktivieren
   document.getElementById('zuname').disabled=true;
   document.getElementById('vorname').disabled=true;
   document.getElementById('telefon').disabled=true;
   document.getElementById('email').disabled=true;
   document.getElementById('adresse').disabled=true;
   document.getElementById('info').disabled=true;
   document.getElementById('knopf').disabled=true;

   // Benutzerinfo ausgeben
   document.getElementById('ort_der_antwort').innerHTML = "Bitte warten ..."
}

// asynchrone Anwort von Webserver
function receive_from_server()
{
   if (ahro.readyState == 4)
   {
      // echo-Text des Web-Servers an der Stelle "ort_der_anwort" ausgeben
      document.getElementById('ort_der_antwort').innerHTML = ahro.responseText;

      // Oberflaechenelemente wieder aktivieren
      document.getElementById('zuname').disabled=false;
      document.getElementById('vorname').disabled=false;
      document.getElementById('telefon').disabled=false;
      document.getElementById('email').disabled=false;
      document.getElementById('adresse').disabled=false;
      document.getElementById('info').disabled=false;
      document.getElementById('knopf').disabled=false;

      /* wegen Fehlerfall nicht sinnvoll
      // alle Textfelder leeren
      document.getElementById("zuname").value="";
      document.getElementById("vorname").value="";
      document.getElementById("telefon").value="";
      document.getElementById("email").value="";
      document.getElementById("adresse").value="";
      document.getElementById("info").value="";
      */
   }
}

</script>

</head>
<body>
<div style="position:absolute; top:20px; left:10px; width:600; height:100px; background-color:red;">
<div align="center">
<table border="0" cellpadding="5" bgcolor="green">

<tr><td align="center" colspan='4'><b>TELEFONBUCH::EINTRAG HINZUFÜGEN</b><br><hr></td></tr>
<tr>
<td>Zuname</td>
<td><input type="text" id="zuname" onKeyPress="eintippen(event)"></td>
<td>Vorname</td>
<td><input type="text" id="vorname" onKeyPress="eintippen(event)"></td>
</tr>

<tr>
<td>Telefon</td>
<td><input type="text" id="telefon" onKeyPress="eintippen(event)"></td>
<td>E-Mail</td>
<td><input type="text" id="email" onKeyPress="eintippen(event)"></td>
</tr>

<tr>
<td>Adresse</td>
<td><input type="text" id="adresse" onKeyPress="eintippen(event)"></td>
<td>Bemerkung</td>
<td><input type="text" id="info"></td>
</tr>

<tr>
<td colspan='4' align='right'><input type="button" id="knopf" value="Speichern" onClick="send_to_server()"></td>
</tr>
</table>
</div>
</div>

<div id="ort_der_antwort" style="position:absolute; top:250px; left:190px; width:200px; height:20; background-color:yellow;">
</div>
</body>
</html>