Formular-Textfelder, -Checkboxen und -Radiobuttons mit JavaScript und PHP abfragen

Kontakt-, Bestell- und ähnliche Formulare auf Webseiten werden meist mit Hilfe von PHP ausgewertet und die enthaltenen Daten dann als E-Mail verschickt und/oder in einer Datenbank gespeichert.

Auch JavaScript kann zur Überprüfung der Formularfelder im Browser des Internetnutzers hilfreich sein.

Hier eine kleine Zusammenfassung, wie Textfelder, Checkboxen und Radiobuttons innerhalb von Formularen mit JavaScript und PHP abgefragt werden können.

Textfelder

Ein Beispiel:

<form id="kontaktformular" method="post" action="<?=$_SERVER['PHP_SELF'];?>">
Vorname: <input type="text" id="vorname" value="Felix" />
<textarea id="nachricht">Das ist meine Nachricht.</textarea>
</form>

JavaScript

In JavaScript können Textfelder von Formularen innerhalb des Browsers über die dem Formular und Textfeldern vergebenen IDs ausgelesen werden, und zwar so:

var vorname = document.kontaktformular.vorname.value;
var nachricht = document.kontaktformular.nachricht.value;

PHP

In PHP werden nach dem Senden des Formulars aus dessen Werten Variablen erzeugt, welche zur weiteren Benutzung zur Verfügung stehen.

register_globals = on

Ist PHP mit register_globals = on konfiguriert, so wird für jedes übergebene Formularfeld eine Variable mit demselben Namen generiert.

Aus der ID wird der Variablenname.
Der Variablenwert entspricht dann dem eingegebenen Text.

o.g. Beispiel erkennt PHP als

$vorname = "Felix";
$nachricht = "Das ist meine Nachricht."

D.h. mit den Werten der Formularfelder “vorname” bzw. “nachricht” kann nach Absenden des Formulars über die Variablen $vorname bzw. $nachricht im PHP-Script weitergearbeitet werden.

register_globals = off

Ist PHP mit register_globals = off konfiguriert, so kann auf die Variablen über das superglobale Array $_POST zugegriffen werden (natürlich nur, wenn das Formular per method=”post” versendet wurde):

$vorname = $_POST['vorname'];
$nachricht = $_POST['nachricht'];

Nicht-gruppierte Checkboxen

CheckboxCheckboxen können entweder einzeln oder mit anderen Checkboxen gruppiert in ein Formular integriert werden.

Typisches Beispiel für eine nicht-gruppierte Checkbox:

<form id="bestellformular">
<input type="checkbox" name="agb" id="agb" /> Ich akzeptiere die AGB.
</form>

JavaScript

Mit folgendem JavaScript-Code kann man nun abfragen, ob die Checkbox markiert wurde:

if (document.bestellformular.agb.checked == true) {
  alert('AGB akzeptiert');
}

PHP

In PHP steht die Variable einer nicht-gruppierten Checkbox nach dem Senden des Formulars nur dann zur Verfügung, wenn sie zuvor ausgewählt bzw. markiert wurde.

Das bedeutet, dass es ausreicht, zu fragen, ob die Variable nach dem Senden in PHP initiiert wurde oder nicht.

Der Einfachheit halber hier (und im Folgenden) nur der Code für die PHP-Konfiguration mit register_globals = on (s.o.) :

<?php
  if(isset($agb)) {
    echo "AGB akzeptiert";
  }
?>

Gruppierte Checkboxen und Radiobuttons

gruppierte CheckboxenCheckboxen und Radiobuttons können gruppiert werden, indem ihnen das gleiche name-Attribut vergeben wird. Im value-Attribut steht dann der jeweils zugewiesene Wert der Checkbox oder des Radiobuttons.

Beispiel für gruppierte Checkboxen:

<form name="bestellformular" method="post" action="">
   Bitte senden Sie mir Informationen &uuml;ber
   <input type="checkbox" name="infosendung" id="infosendung"
   value="Hotels">
   Hotels
   <input type="checkbox" name="infosendung" id="infosendung"
   value="Hausboote">
   Hausboote
   <input type="checkbox" name="infosendung" id="infosendung"
   value="Pensionen">
</form>

Beispiel für gruppierte Radiobuttons:

<form name="kontaktformular" method="post" action="">
 Anrede:
 <input type="radio" name="anrede" value="Herr">
 Herr
 <input type="radio" name="anrede" value="Frau">
 Frau
</form>

JavaScript

Mit JavaScript kann nun der Zustand jeder Checkbox bzw. jedes Radiobuttons ausgelesen werden.

Leider kann man hier nicht direkt auf die Werte bspw. über das value-Attribut zugreifen.
Man macht sich aber zunutze, dass gruppierte Checkboxen bzw. Radiobuttons der Reihenfolge ihres Vorkommens im Quellcode nach in ein Array mit dem Namen des gemeinsamen name-Attributs gespeichert werden. Über dieses Array kann dann der Zustand der Checkboxen und Radiobuttons der Reihe nach abgefragt werden.

Beispiel Checkboxen:

if ( document.bestellformular.infosendung[0].checked == true ) {
  alert('Informationen über Hotels');
};
if ( document.bestellformular.infosendung[1].checked == true ) {
  alert('Informationen über Hausboote');
};
if ( document.bestellformular.infosendung[2].checked == true ) {
  alert('Informationen über Pensionen');
};

Beispiel Radiobuttons:

if ( document.kontaktformular.anrede[0].checked == true ) {
  alert('Herr');
}
if ( document.kontaktformular.anrede[1].checked == true ) {
  alert('Frau');
}

PHP

In PHP kann man nun auch direkt auf die Value-Attribute der gesendeten Check- und Radiobuttons zugreifen.

Hier kann wie bei den nicht-gruppierten Checkboxen zuerst einmal überprüft werden, ob überhaupt ein Element aus den gruppierten Checkboxen oder Radiobuttons ausgewählt wurde.

Ist dies nicht der Fall, so sind die Variablen, welche aus den gemeinsam vergebenen name-Attributen generiert werden, nicht existent.

Für unsere Beispiele:

if ( isset($infosendung) ) {
  echo "Ein oder mehrere Elemente aus der Gruppe 'infosendung' wurde(n) ausgewählt";
}
if ( !isset($anrede) ) {
 echto "Sie haben keine Anrede ausgewählt."
}

Doch nun zur Abfrage der einzelnen Radiobuttons bzw. Checkboxen.

RADIOBUTTONS

Von gruppierten Radiobuttons kann jeweils nur ein einziger ausgewählt werden.
Wird ein zweiter aktiviert, so wird der vorher ausgewählte automatisch abgewählt.

Das bedeutet, dass bei Empfang des Formulars in PHP eine Variable mit dem Namen des name-Attributes und dem Wert (value) des aktiven Radiobuttons erzeugt wird.

Dann kann gefragt werden:

<?php
  if ( $anrede == "Herr" ) {
    echo "Sehr geehrter Herr";
  } else if ( $anrede == "Frau" ) {
    echo "Sehr geehrte Frau";
  }
?>

CHECKBOXEN

Werte ausgewählter gruppierter Checkboxen hingegen werden wie bei JavaScript in einem Array gespeichert, welches den Namen des name-Attributs der Checkboxen trägt.

Die Werte können dann zum Beispiel so ausgegeben werden:

$info_bestellung = “Sie haben folgende Informationen bestellt:
“;

for ( $i=0; $i < count($infosendung); $i++ ) {
  if ($infosendung[$i] != "") {
    $zaehler = $i + 1;
    $info_bestellung .= "$zaehler. $infosendung[$i] <br />";
  }
}

Wären in unserem Beispiel der gruppierten Checkboxen (s.o.) alle Checkboxen markiert, würde folgender Text ausgegeben werden:

Sie haben folgende Informationen bestellt:
1. Hotels
2. Hausboote
3. Pensionen

Submit-Buttons

Eine weitere häufig auftretende Frage ist, wie abgefragt werden kann, mit welchem Submit-Button ein Formular übermittelt wurde, wenn innerhalb des Formulares mehrere Submit-Buttons definiert wurden. (um zum Beispiel verschiedene Funktionalitäten auszuführen)

Angenommen wir haben ein Formular mit den Buttons “Überprüfen” und “Abschicken”:

<form name="formular" action="<?=$_SERVER['PHP_SELF'];?>" method="post">
  <input name="ueberpruefen" type="submit" value="Ueberpruefen"><br />
  <input name="abschicken" type="submit" value="Abschicken">
</form>

PHP

In PHP wird nur für denjenigen Button eine Variable erzeugt, der das Senden des Formulars ausgelöst hat.
Welcher dies ist, kann damit überprüft werden, indem man die Existenz der entsprechenden Variable abfragt:

<?php
  if (isset($ueberpruefen)) {
    ueberpruefen();
  }
  if (isset($abschicken)) {
    abschicken();
  }
?>

Kommentare & Trackbacks

  1. Kommentar von Durek:

    Gravatar von Durek

    Also mir hats für meinen Ajaxchat geholfen, damit Admins eine Checkbox aktivieren und eine Systemnachricht von ausgeht.

    Find das ganz gut beschrieben! Also mir gefällts ;-)

    MFG Durek / Domino500

  2. Kommentar von Baphomet05:

    Gravatar von Baphomet05

    Super gemacht und sehr gut erklärt!
    Nachdem ich Stundenlang im Netz gesucht habe bin ich hier gelandet und muss sagen es hat sich gelohnt.

  3. Kommentar von mixxor:

    Gravatar von mixxor

    danke danke .. ^^ war echt gut mal kurz so ne zusammenfassung zu finden

  4. Kommentar von Sandra:

    Gravatar von Sandra

    Herzlichen Dank! Super erklärt. Nach dieser Anleitung konnte ich mein Problem mit PHP endlich lösen. Liebe Grüße Sandra

  5. Kommentar von ich:

    Gravatar von ich

    sehr schön – super vielen dank!

  6. Kommentar von Patrick:

    Gravatar von Patrick

    mein problem konnte leider nicht gelöst werden, ich probiers aber trotzdem weiter. dankeschön trotzdem!

  7. Kommentar von Dr. Highend:

    Gravatar von Dr. Highend

    Vielen Dank für die ausführlichen Beispiele, die haben mir bei der Umsetzung wirklich sehr geholfen.

  8. Kommentar von Günther:

    Gravatar von Günther

    Das erste Code Snippet das tatsächlich funktioniert um Radiobuttons auszulesen! Fantastico!

  9. Kommentar von Bianca:

    Gravatar von Bianca

    Hallo Franziska!
    Bei deinen Javascript-Sachen fehlt die onclick-Anweisung und eine Funktion.
    Hier ein Beispiel, das funktioniert.

    function Ferien(){
    var wert1=0;
    if(document.formular.color.checked)
    wert1=document.formular.color.value;
    document.getElementById(‘versuch’).value=wert1;
    }

    blau

    Liebe Grüße
    Bianca

  10. Kommentar von Bianca:

    Gravatar von Bianca

    Leider fehlt bei meinem Beispiel die Hälfte…bitte einblenden, wenns geht. LG

  11. Kommentar von FranziskaM:

    Gravatar von FranziskaM

    Was meinst Du mit einblenden?

    LG
    Franziska

  12. Kommentar von Bianca:

    Gravatar von Bianca

    Hab hier ein kleines HTML-Dokument gepostet, leider sieht man hier nur das, was im Javascriptteil steht.
    Ich schicks dir aber gerne per Email, damit du das veröffentlichen kannst…wenn du willst.
    LG Bianca

  13. Kommentar von LXmars:

    Gravatar von LXmars

    Super, endlich ein gut strukturierter Überblick auch für jene, die in Sachen PHP und JS erst am Anfang stehen!! Danke!

Kommentar schreiben

* Pflichtfelder