PHP/Formulare und Javascript: Unterschied zwischen den Versionen

Aus Mikiwiki
< PHP
Zur Navigation springen Zur Suche springen
Zeile 24: Zeile 24:
|
|
<source lang=html4strict enclose=div>
<source lang=html4strict enclose=div>
<script language="JavaScript" src="meincode.js">
<script language="Javascript" src="meincode.js">
   ## Hier steht der Javascript-Code
   ## Hier steht der Javascript-Code
</script>
</script>

Version vom 13. Januar 2009, 21:59 Uhr

Formulare und Javascript

Formulare sind in ihrer praktischen Anwendung recht eingeschränkt, wenn man sich auf reines HTML und die Auswertung mit PHP beschränkt. Es gibt eine Vielzahl von Problemfällen, die sich ohne zusätzliche Hilfsmittel nur schwer lösen lassen. Das effektivste Hilfsmittel bei der Umsetzung von Formularen ist Javascript. Der entscheidende Unterschied zwischen PHP und Javascript besteht darin, dass PHP im Server und Javascript im Client (Webbrowser) verarbeitet wird. Alle modernen Webbrowser verstehen Javascript in einem Umfang, der die Anwendung bedenkenlos ermöglicht. Der Einsatz bietet etliche Vorteile:

  • Einsparung von Netzverkehr
  • Elegantere Überprüfung von Formularen
  • Erweiterte Funktionalität

Nicht alles ist allein mit Javascript möglich. Professionelle Anwendungen entstehen durch das optimale Zusammenspiel von HTML, JavaScript und PHP.

Javascript in der HTML-Seite

Mit dem "<script>"-Tag kann JavaScript überall eingebunden werden. 

<script language="Javascript">
  ## Hier steht der Javascript-Code
</script>

Bei umfangreicheren Programmen kann die Auslagerung des JavaScript-Codes in eine eigene Datei sinnvoll sein. 

<script language="Javascript" src="meincode.js">
  ## Hier steht der Javascript-Code
</script>

Auf der Seite häufiger verwendete Funktionen werden am besten im Kopfteil der HTML-Seite zwischen "</title>" und "<body>" untergebracht. Kleinere Einzeiler sind oft besser an der Stelle aufgehoben, wo sie tatsächlich zum Einsatz gelangen.

JavaScript erweitert eine ganze Reihe von HTML-Elementen um ein Ereignismodell. Die Elemente können vor allem auf Mausereignisse reagieren. In Formularen sind folgende Ereignisse wichtig.

Ereignis Beschreibung
onsubmit Wertet den Klick auf den Absendeschalter aus und führt den JavaScript-Code aus, der durch das Attribut "onsubmit" bestimmt wird.
onclick Wertet einen Mausklick aus. Damit werden vor allem einfache Schaltflächen wie "<input type='button'>" zum Leben erweckt.

Javascript einbinden

Im Kapitel Daten aus einem Formular ermitteln wurde ein komplexes Formular vorgestellt. Javascript könnte genutzt werden, um das Ausfüllen des Formulars zu überwachen. Dazu wird das "<form>"-Tag verändert. 

<form name="sendform" onsubmit="return checkdata()">

Damit hat das Formular einen Namen bekommen. Das hat nicht direkt mit Javascript zu tun, erleichert aber den Umgang mit mehreren Formularen. Von PHP aus können Formularnamen nicht erkannt werden. Zum anderen wird statt des "action"-Attributs die Aktion nun mit "onsubmit" ausgelöst, verbleibt also zunächst im Webbrowser.

Wird nun das Formular mit dem Schalter "Absenden" vom Nutzer gesendet, so löst der Webbrowser das Javascript-Ereignis "onsubmit" aus. Dort steht der Javascript-Code "return checkdata()"; "return" gibt einen Funktionswert zurück, "checkdata()" ruft eine Funktion auf. In diesem Fall kann "return" nur "TRUE" oder "FALSE" zurückgeben, bei "TRUE" wird das Formular tatsächlich gesendet. Damit der Webbrowser auch weiss wohin, muss die Funktion "checkdata()" entsprechend programmiert werden. Im Beispiel wird geprüft, ob der Name wenigstens drei Zeichen enthält und die E-Mail-Adresse dem normalen Aufbau genügt. Für die letztere Prüfung wird ein regulärer Ausdruck verwendet. Javascript kann mit regulären Ausdrücken ohne Einschränkungen umgehen; die Syntax entspricht der bei Perl verwendeten. Nach der Festlegung des Musters werden die Inhalte der Formularelemente in die Variablen "email" und "name" überführt. Formularelemente sind in Javascript Objekte. das Basisobjekt ist die Seite "document"). Bestandteil der Seite ist unter anderem das Formular ("sendform" - deshalb die Benennung). Innerhalb des Formulars wird auf die Elemente "email" und "name" zugegriffen. Diese Elemente besitzen die Eigenschaft "value", die den Wert zurückgibt. Danach werden die korrekten Werte ausgewertet. Zuerst wird die Länge bestimmt. In JavaScript wird jede Zeichenkette als Objekt betrachtet und ist mit einigen Eigenschaften ausgestattet. Eine davon, "length", wird mit "if (name.length < 3)" zum Test auf die richtige Zeichenanzahl verwendet.Auf den regulären Ausdruck wird mit "if ((re_email.test(email)) == false)" die Methode "test" angewendet. Sie gibt "FALSE" zurück, wenn der Ausdruck unzutreffend ist, sonst "TRUE". In beiden Fällen wird ein Fehler mit einer Dialogbox quittiert, die JavaScript mit Hilfe von "alert" erzeugt. Wurden alle Daten richtig eingegeben, so wird das "action"-Attribut gefüllt, die Methode eingestellt (hier "POST") und das Formular tatsächlich an das PHP-Skript versendet. 

<html>
<body bgcolor="#eeeeee">
<script language="JavaScript">
<!--
function checkdata()
{
  var re_email = /^([_a-zA-Z0-9-]+)(\.[_a-zA-Z0-9-]+)*@([a-zA-Z0-9-]+\.)+([a-zA-Z]{2,3})$/;
  var email    = document.sendform.email.value;
  var name     = document.sendform.name.value;
  var checked  = true;
  if (name.length < 3) 
  {
    alert("Name muss mindestens 3 Zeichen enthalten");
    checked = false;    
  }
  if ((re_email.test(email)) == false || email.length == 0) 
  {
    alert("E-Mail-Adresse falsch!");
    checked = false;
  }
  if (checked) 
  {
    document.sendform.method = "post";
    document.sendform.action = "process_scripts.php?script=&";
    document.sendform.submit();
  }
  return checked;
}
-->
</script>
<?php
if (isset($_POST['sent']) && isset($_POST['name'])) 
{
  echo <<<FORMANSWER
  Sie haben folgende Nachricht gesendet:<p />
  <b>Ihr Name:</b>    {$_POST['name']}<br />
  <b>E-Mail:</b>      {$_POST['email']}<br />
  <b>Bewertung:</b>   {$_POST['rank']}<br />
  <b>Ihre Nachricht:</b> <br />
  <div style="background-color:#DDDDDD">{$_POST['message']}</div>
  <b>Gekauft bei:</b> {$_POST['purchase']}
  <form method="post" action="{$_SERVER['PHP_SELF']}">
  <input type="submit" value="Neue Nachricht senden?" />
  </form>
FORMANSWER;
} 
else 
{
?>
<h3>Wie hat Ihnen das Buch bisher gefallen?</h3>
<form name="sendform" onsubmit="return checkdata()">
<table>
  <tr>
    <td>Mein Name:</td>
    <td><input type="text" name="name" size="50" /></td>
  </tr>
  <tr>
    <td>Meine E-Mail:</td>
    <td><input type="text" name="email" size="50" /></td>
  <tr>
  <tr>
    <td>Bewertung:</td>
    <td>
         1<input type=radio name=rank value=1 />
         2<input type=radio name=rank value=2 checked="checked" />
         3<input type=radio name=rank value=3 />
         4<input type=radio name=rank value=4 />
         5<input type=radio name=rank value=5 />
         (Schulnoten)
    </td>
  </tr>
  <tr>
    <td valign="top">Nachricht:</td>
    <td>
      <textarea cols="30" rows="6" name="message">Ihre Nachricht...</textarea>
    </td>
  </tr>
  <tr>
    <td>Wo haben Sie es gekauft?</td>
    <td>
      <select size="1" name="purchase">
        <option value="Fachbuchhandel">Fachbuchhandel</option>
        <option value="Kaufhaus">Kaufhaus</option>
        <option value="Online">Online</option>
        <option value="Verlag">Verlag</option>
        <option value="Nur geliehen">Nur geliehen</option>
      </select>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <input type="submit" value="Absenden" />
      <input type="reset" />
      <input type="hidden" name="sent" value="1" /> 
    </td>
  </tr>
</table>
</form>
<?php
}
?>
</body>
</html>

Auf diese Weise kann man sich die Auswertung von Fehlern mit Hilfe von PHP sparen - der Nutzer kann diesen Test nicht umgehen.

Javascript für Fortgeschrittene

Ein anderes Problem entsteht, wenn man von einem Formular aus auf mehrere PHP-Skripte zugreifen möchte. das "<form>"-Tag lässt grundsätzlich nur ein "action"-Attribut zu, gleichgültig ob direkt angegeben oder per Javascript. Werden mehrere Ziele benötigt, so bieten sich mehrere Formulare an. 

<form action="ziel1.php">
  <input type="submit" value="Ziel 1 finden">
</form>

<form action="ziel2.php">
  <input type="submit" value="Ziel 2 finden">
</form>

<form action="ziel3.php">
  <input type="submit" value="Ziel 3 finden">
</form>

Soll nun aber an alle drei Ziele ein und dasselbe Element gesendet werden, so tritt ein Konflikt auf. Ausserhalb der Formulare sind Elemente unsichtbar oder funktionslos. Wird ein Eingabefeld in jedes der drei Formulare geschrieben, so taucht es dreifach auf. Beispielsweise soll eine E-Mail-Adresse durch den Klick auf eine Schaltflcähe auf Gültigkeit geprüft und gleichzeitig ein von der angeklickten Schaltfläche abhängiger Wert übermittelt werden. Gegenüber der Variante mit Optionsschaltflächen ("radio") wird ein Mausklick eingespart, was die Bedienung vereinfacht. Folgende Lösung ist nur eine von vielen Varianten. Die verwendeten Methoden sind aber allgemein anwendbar. Diesmal wird auf die Methode "onsubmit" verzichtet, stattdessen werden normale Schaltflächen verwendet und das Ereignis "Mausklick" wird mit der Methode "onclick" abgefangen. Mit "this.name" wird der Name der Schaltfläche ermittelt und an die Funktion "senddata" übergeben. Diese Vorgehensweise entkoppelt den Wert ("value") von der Funktion. Der übergebene Name der Schaltfläche muss nun noch an das PHP-Skript übermittelt werden; dazu wird mit dem Tag "<input type='hidden' name='vote' value=''>" ein unsichtbares Feld genutzt. Mit dem Code "document.sendform.vote.value = vote;" wird dem Feld schliesslich der Name der angeklickten Schaltfläche zugewiesen. Der eigentliche PHP-Teil des Skript nimmt sich dagegen winzig aus. 

<html>
<body>
<script language="JavaScript">
<!--
function senddata(vote) 
{
  var re_email = /^([_a-zA-Z0-9-]+)(\.[_a-zA-Z0-9-]+)*@([a-zA-Z0-9-]+\.)+([a-zA-Z]{2,3})$/;
  var email    = document.sendform.email.value;
  if ((re_email.test(email)) == true) {
    document.sendform.method     = "post";
    document.sendform.vote.value = vote;
    document.sendform.action     = "<?=$_SERVER['PHP_SELF']?>";
    document.sendform.submit();
  }
  else
  {
    alert ("E-Mail-Adresse falsch");
  }
}
-->
</script>
<h1>Formulare mit PHP und JavaScript</h1>
<?php
if (isset($_POST['vote'])) 
{
  echo "Ihre Bewertung <B>{$_POST['vote']}</B> wurde registriert!";
}
?>
<form name="sendform">
  Ihre E-Mail-Adresse:<br />
  <input type="text"   name="email" size="40" />
  <input type="hidden" name="vote"  value="" />
  <p />
  Bitte Ihre Bewertung:<br />
  <input type="button" name="1" value="Vote 1" onclick="senddata(this.name)">
  <input type="button" name="2" value="Vote 2" onclick="senddata(this.name)">
  <input type="button" name="3" value="Vote 3" onclick="senddata(this.name)">
  <input type="button" name="4" value="Vote 4" onclick="senddata(this.name)">
  <input type="button" name="5" value="Vote 5" onclick="senddata(this.name)">
</form>
</body>
</html>

Formulare mit PHP und Javascript

<?php
if (isset($_POST['vote'])) 
{
  echo "Ihre Bewertung <B>{$_POST['vote']}</B> wurde registriert!";
}
?>
<form name="sendform">
  Ihre E-Mail-Adresse:<br />
  <input type="text"   name="email" size="40" />
  <input type="hidden" name="vote"  value="" />
  <p />
  Bitte Ihre Bewertung:<br />
  <input type="button" name="1" value="Vote 1" onclick="senddata(this.name)">
  <input type="button" name="2" value="Vote 2" onclick="senddata(this.name)">
  <input type="button" name="3" value="Vote 3" onclick="senddata(this.name)">
  <input type="button" name="4" value="Vote 4" onclick="senddata(this.name)">
  <input type="button" name="5" value="Vote 5" onclick="senddata(this.name)">
</form>
</body>
</html>
Von «https://mikiwiki.org/mikiwiki/index.php?title=PHP/Formulare_und_Javascript&oldid=705»