Home
Navigation
Impressum
Coder Welten - Programmierung und Optimierung
Coder Welten
 
 

 

 

Formulardaten verarbeiten mit JavaScript - Teil I

GET / QueryString mit JavaScript auslesen und auswerten

Übersicht / Seite:

  1. GET (Parameter und Werte übergeben und auswerten)
  2. Storage (Daten von einem (Post-)Formular aufbewahren und abrufen)

HTML-Formulare: GET und POST

HTML-Formulare dienen der Erfassung und Übertragung von Benutzerdaten unterschiedler Art. Je nach dem Umfang der zu übertragenden Daten und den vorgesehenen Möglichkeiten zur Auswertung und Weiterverarbeitung, kann bei HTML-Formularen zwischen den Methoden GET und POST gewählt werden, um die Daten mit dem Hypertext Transfer Protocol (HTTP) zu übertragen.
Ob die Daten mit GET oder POST übermittelt werden sollen, ist erst einmal gleich. In beiden Fällen wird vom Browser des Benutzers eine Anfrage (Request) an den Webserver gestellt, an dem die Aktion gerichtet ist. Dazu muss im einleitenden Form-Tag dem Attribut action eine mit relativen oder absoluten Pfadangaben referenzierte Webadresse (URL) zugewiesen werden. Der Webserver wird, insofern kein Fehler auftrat, als Antwort (Response) die zur (im Attribut action referenzierte) Webadresse gehörende Ressource aufrufen und ausliefern oder abarbeiten, wobei es sich bei der Ressource um eine HTML-Seite handeln kann, jedoch nicht zwingend handeln muss.

GET: Erfolgt die Übermittlung der Daten per GET, so werden diese als QueryString der referenzierten Webadresse, getrennt durch ein Fragezeichen, hinzugefügt, wobei die Namen der Formular-Elemente als Parameter und die Inhalte der Formular-Elemente als Werte im QueryString enthalten sind.

POST: Bei der Übermittlung per Post werden die Formulardaten ebenfalls als Parameter-Werte-Paare übertragen, nur werden diese nicht als QueryString einer URL hinzugefügt, sondern werden mit im HTTP-Body übermittelt, wobei die zu übermittelnde Datenmenge größer sein kann als bei GET.

Parameter und Werte mit JavaScript verarbeiten

Bevor die Parameter mit ihren Werten aus einem QueryString ausgelesen, ausgewertet und verarbeiten werden können, müssen diese Daten erst einmal mit einem HTML-Formular versendet werden. Im Beispiel soll dafür ein Formular mit unterschiedlichen Input-Elementen dienen, welche eine Mehrfachauswahl von Radio-Buttons und die Eingabe eines Kurztextes ermöglichen. Als Methode für den Versand wurde GET gewählt.

HTML-Formular (formpage.html):

<!DOCTYPE html>
<html>

<head>
<title>Parameter und Werte mit GET versenden</title>
<meta charset="utf-8">
<style type="text/css">body {text-align:center}</style>
</head>

<body>
<h1>Daten mit GET übergeben</h1>
<p><a href="formpage.html">Formular</a> | <a href="getpage.html">Eingangsseite</a></p>

<form action="getpage.html" method="get" accept-charset="utf-8">
    <input type="text"  name="rabe" value="" size="30" maxlength="30"><br>
    <input type="radio" name="kate" value="Filme"> Filme
    <input type="radio" name="rubi" value="Movie"> Movie
    <input type="radio" name="item" value="30"> 30
    <input type="radio" name="para" value="50"> 50<br>
    <br>
    <input type="reset"  value="Leeren">
    <input type="submit" value="Senden">
</form>

</body>
</html>

Bei Bedarf kann bereits vor dem Versenden überprüft werden, ob alle oder zumindest die wichtigsten Eingabefelder ausgefüllt wurden. Ebenso kann vor dem Versenden überprüft werden, ob bei den Radio-Buttons eine Auswahl getroffen wurde.
Im nachfolgenden Beispiel wurde das Formular durch den Event-Handler onsubmit im einleitendenden Form-Tag ergänzt und zur Prüfung der Benutzereingaben eine selbstdefinierte Funktion zwischen <head> und </head> innerhalb der HTML-Seite untergebracht.
Bei der Prüfung wird zuerst mit der Funktion pruefeEingaben() ermittelt, ob eine Eingabe im Textfeld erfolgte. Zusätzlich wird der eingegebene Text mit einer RegEx-Methode und einem regulären Ausdruck nach unerlaubten Zeichen durchsucht.
Etwas anders verhält es sich bei den Radio-Buttons, da diese bereits mit einem Wert vorbelegt sind. Bei Radio-Buttons und Checkboxen erfolgt lediglich mit checked eine Überprüfung des zurückgelieferten booleschen Wertes.

Boolesche Werte bei Radio-Buttons und Checkboxen

true - wurde ausgewählt
false - wurde nicht ausgewählt.

Liefert die Funktion pruefeEingaben() als Rückgabewert false, leitet der Event-Handler onsubmit diesen booleschen Wert an den Browser weiter, womit die Aktion des Versendens abgebrochen wird. Zusätzlich wird mit der alert()-Methode noch ein entsprechender Hinweis zur Kenntnisnahme für die Benutzerinnen und Benutzer ausgegeben.

Beispiel für ein Formular mit einer Prüfung der Benutzereingaben:

<!DOCTYPE html>
<html>

<head>
<title>Formular mit Überprüfung</title>
<meta charset="utf-8">
<style type="text/css">body {text-align:center}</style>
<script type="text/javascript">

function pruefeEingaben() {

    var rabe = document.getElementsByName("rabe")[0].value;
    var rabe = rabe.replace(/[^a-zäöüÄÖÜß0-9s_-]/gi, "");

    function pruefeFo(checken) {
        var gecheckt = document.getElementsByName(checken)[0].checked;
        return gecheckt;
    }

    if (rabe == "") {
        alert("Es wurde kein Text eingegen!");
        return false;
    }
    if (pruefeFo("kate") === false && pruefeFo("rubi") === false) {
        alert("Es wurde weder Filme noch Movie ausgewählt!");
        return false;
    }
    if (pruefeFo("item") === false && pruefeFo("para") === false) {
        alert("Es wurde weder 30 noch 50 ausgewählt!");
        return false;
    }
}
</script>
</head>

<body>
<h1>Formular mit Überprüfung der Eingaben</h1>
<p><a href="formpage.html">Formular</a> | <a href="getpage.html">Eingangsseite</a></p>

<form action="getpage.html" method="get" onsubmit="return pruefeEingaben()" accept-charset="utf-8">
    <input type="text"  name="rabe" value="" size="30" maxlength="30"><br>
    <input type="radio" name="kate" value="Filme"> Filme
    <input type="radio" name="rubi" value="Movie"> Movie
    <input type="radio" name="item" value="30"> 30
    <input type="radio" name="para" value="50"> 50<br>
    <br>
    <input type="reset"  value="Leeren">
    <input type="submit" value="Senden">
</form>

</body>
</html>

Für das Auslesen und die Verarbeitung von den in einem QueryString enthaltenen Parameter-Werte-Paaren mit JavaScript gibt es unterschiedliche Ansatzpunkte. Allgemein wird dabei mit window.location.search der QueryString eingelesen. Mit substring() kann die Anzahl der Zeichen begrenzt werden, wobei die Zählung bei 0 beginnt.
Nach dem Einlesen des QueryStrings sollte aus Sicherheitsgründen eine Filterung mit Hilfe eines regulären Ausdruckes erfolgen, um nur undenkliche und für einen QueryString typische Zeichen durchzulassen. Im Code-Listing von "getpage.html" wird der QueryString mit der Methode split() zuerst in Parameter-Werte-Paare aufgesplittet und im Anschluss deren Anzahl mit length ermittelt. In einer For-Schleife erfolgt eine zweite Aufsplittung der Parameter-Werte-Paare in Namen und Werte.

Statt der Methode split() könnten die Werte jedoch ebenso mit Hilfe einer RegEx-Methode ausgelesen werden.

Ein Beispiel mit exec():

var eget = "rabe=wie+was+wo&kate=Filme&rubi=Movie&item=30&para=50";
var wget = /rubi=([a-z0-9+_-]+)(&*)/i;
var rubi = wget.exec(eget);

alert(rubi[1]);   // Ausgabe: Movie

Nach dem Auslesen der Werte werden diese in der Funktion getEmpfang() noch den bereits deklarierten Variablen zugewiesen, wofür im Beispiel der ?: Bedingungsoperator eingesetzt wird. Der Bedingungsoperator ermöglicht es, die eigentlich erforderlichen if-Statements etwas zu vereinfachen. Ab nun stehen die übermittelten Werte zur weiteren Verwendung im Script zur Verfügung.
Mit den verschachtelten Funktionen getPruefung() und pruefe() wird nur noch einmal kontrolliert, welche der Variablen mit einem Wert initialisiert wurde und bei fehlender Initialisierung wird den Variablen ein Ersatzwert zugewiesen, bevor nach dem vollständigen Ladens des Fensters eine Ausgabe mit window.onload erfolgt.

Beispiel für Ausgabe (getpage.html):

<!DOCTYPE html>
<html>

<head>
<title>Parameter und Werte aus QueryString übernehmen</title>
<meta charset="utf-8">
<style type="text/css">
body{text-align:center} .liste{text-align:left} .dvl{width:300px; margin:auto} .gtsp {color:#8E9583}
</style>
<script type="text/javascript">

var rabe, kate, rubi, item, para;

/* --- Empfang und Zuordnung der Parameterwerte zu den Variablen -- */

function getEmpfang() {

    if (window.location.search != "") {
        var eingng = decodeURIComponent(window.location.search.substring(0,120));
        var muster = /[^a-zäöüÄÖÜß0-9+_&=-]/gi;
        var einget = eingng.replace(muster, "");
        var getspl = einget.split("&");
        var gzaehl = getspl.length;

        for (var i = 0; i < gzaehl; i++) {

            var getnw = getspl[i].split("=");

            getnw[0] == "rabe" ? rabe = getnw[1] : false;
            getnw[0] == "kate" ? kate = getnw[1] : false;
            getnw[0] == "rubi" ? rubi = getnw[1] : false;
            getnw[0] == "item" ? item = getnw[1] : false;
            getnw[0] == "para" ? para = getnw[1] : false;
        }
    }
}

/* --------------------------------------------------------------------
 Prüfen, welche Parameter übergeben wurden und welche Variablen mit
 einem Wert belegt sind.
-----------------------------------------------------------------------
*/
function getPruefung() {

    getEmpfang();              // Aufruf von getEmpfang

    rabe = pruefeGet(rabe);
    kate = pruefeGet(kate);
    rubi = pruefeGet(rubi);
    item = pruefeGet(item);
    para = pruefeGet(para)

    function pruefeGet(gt) {

        if (typeof(gt) !== "undefined" && gt != "") {
            gt = gt.replace(/[+]/g, " ");
        }
        else {
            gt = "<span class=\"gtsp\">No Wert<\/span>";
        }
        return gt;
    }
}

/* --- Aufbereitung zur Ausgabe bei onload ------------------------- */

window.onload = function() {

    getPruefung();             // Aufruf von getPruefung

    var lis = "<\/li><li>";
    var rep = "<li>" + rabe + lis + kate + lis + rubi + lis + item + lis + para + "<\/li>";

    document.getElementById("ausgabe").innerHTML = rep;
}
</script>
</head>

<body>
<h1>Parameter und Werte aus QueryString übernehmen</h1>
<p><a href="formpage.html">Formular</a> | <a href="getpage.html">Eingangsseite</a></p>
<p>Es wurden folgende Datenwerte übergeben:</p>
<div class="dvl"><ul id="ausgabe" class="liste"></ul></div>
</body>
</html>

Weitere Einzelheiten und Beispiele zum Thema Formulare und JavaScript auf der nachfolgenden Seite.

weiterlesen » Storage / Daten von Post-Formular

 
Navigation

Einstieg in JavaScript

 


Listings & Tutorials

 

Weitere Themen

Übersicht

 


Copyright © Verlag Horst Müller - Stendal - 2006 - Impressum - Datenschutz - Nutzungsbedingungen