Home
Navigation
Impressum
Coder Welten - Programmierung und Optimierung
Coder Welten
 
 

 

 

Formulardaten verarbeiten mit JavaScript - Teil II

HTML-Formulardaten übergeben, speichern und abrufen

Übersicht / Seite:

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

Parameter und Werte mit einem HTML-Formular übergeben

Obwohl JavaScript als clientseitige Scriptsprache ohne ein besonderes Konzept wie Ajax nicht mit einem Webserver kommunizieren kann, ist ein Datenaustausch zwischen einzelnen Dokumenten und Fenstern dennoch möglich. Hierzu steht zum Beispiel die Methode postMessage() zur Verfügung und weitere Möglichkeiten bietet die DOM-Storage-API.

Im Beispiel auf dieser Seite wird diese API genutzt, um Daten mit einem normalen POST-Formular zu versenden, wobei der Versand jedoch nur bei deaktivierten JavaScript mit der Methode Post erfolgt. Bei aktivierten JavaScript wird hingegen mit dem Event-Handler onsubmit die Funktion pruefeEingaben() aufgerufen und nach erfolgtem Aufruf sorgt return false dafür, dass keine weitere Aktion ausgeführt wird und somit keine Anfrage beim Webserver erfolgt.
Mit der Funktion pruefeEingaben() werden die verschachtelten Funktionen pruefeP1() und pruefeP2() aufgerufen, wobei die Input-Elemente namentlich angesprochen werden und eine Überprüfung erfolgt, welche Radio-Buttons ausgewählt wurden und ob ein Text eingegeben wurde. Vor der Prüfung von checked und value werden die Benutzereingaben zusätzlich mit replace() und einem geeigneten regulären Ausdruck überprüft, um eventuell von einem unliebsamen Benutzer eingegebenen Schadcode zu entschärfen.
Nach erfolgter Prüfung werden eingegebene oder per Radio-Button ausgewählte Werte mit localStorage.setItem() clienseitig gespeichert, wobei die Daten als Name-Werte-Paare in einem lokalen Speicherbereich abgelegt werden. Nach Speicherung der Daten erfolgt mit window.location.href eine Weiterleitung zur empfangen HTML-Seite.

Code-Listing (sendpage.html):

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Daten vom Post-Formular lokal speichern</title>
<style type="text/css">body {text-align:center}</style>
<script type="text/javascript">

function pruefeP1(ps) {

    function pruefeP2(ch) {
        var docele = document.getElementsByName(ch)[0];
        var dorabe = docele.value;

        if (docele.checked === true) ch = true;
        else if (ch == "rabe" && dorabe != "") ch = true;
        else ch = false;
        return ch;
    }
    var psend = document.getElementsByName(ps)[0].value;
    var eingt = psend.replace(/[^a-zäöüÄÖÜß0-9s_-]/gi, "");

    if (pruefeP2(ps) !== false) localStorage.setItem(ps, eingt);
}

function pruefeEingaben() {

    pruefeP1("rabe");
    pruefeP1("kate");
    pruefeP1("rubi");
    pruefeP1("item");
    pruefeP1("para");

    window.location.href = "postpage.html";
}
</script>
</head>

<body>
<h1>Daten vom Post-Formular lokal speichern</h1>
<p><a href="sendpage.html">Formular</a> | <a href="postpage.html">Eingangsseite</a></p>

<form action="errorpage.php" method="post" onsubmit="pruefeEingaben(); return false" 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>

Daten abrufen und ausgeben

Da DOM Storage die mit localStorage.setItem() übergebenen Daten in einem assoziativen Array als Name-Werte-Paare speichert, wobei die Namen den Schlüssel bilden, lassen sich die Werte entsprechend ihrer Schlüssel mit localStorage.getItem() ansprechen und abrufen. Existiert kein Schlüssel, so wird null zurückgegeben. Mit den selbst definierten Funktionen rufeAb() und pruefePost() erfolgt im nachfolgendem Code-Listing eine Überprüfung, ob der Rückgabewert null ist und falls ja, so wird den Variablen ein Ersatzwert zugewiesen.
Eine nochmalige Prüfung mit einer RegEx-Methode und einem passenden regulären Ausdruck sollte nicht fehlen. Nach dem Laden des Fensters erfolgt mit window.onload die Ausgabe der übermittelten Werte.

Code-Listing (postpage.html):

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Parameter und Werte wie POST übernehmen</title>
<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 = "rabe";
var kate = "kate";
var rubi = "rubi";
var item = "item";
var para = "para";

/* --------------------------------------------------------------------
 Prüfen, welche Namen als Schlüssel existieren und mit einem Wert 
 belegt sind.
-----------------------------------------------------------------------
*/
function rufeAb() {

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

    function pruefePost(pew) {
        var lsg = localStorage, inp;

        if (lsg.getItem(pew) !== null && lsg.getItem(pew) != "") {
            inp = lsg.getItem(pew);
            inp = String(inp).replace(/[^a-zäöüÄÖÜß0-9s_-]/gi, "");
        }
        else inp = "<span class=\"gtsp\">No Wert<\/span>";
        return inp;
    }
}

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

window.onload = function() {

    rufeAb();

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

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

<body>
<h1>Parameter und Werte wie POST übernehmen</h1>
<p><a href="sendpage.html">Formular</a> | <a href="postpage.html">Eingangsseite</a></p>
<p>Es wurden folgende Datenwerte übernommen:</p>
<div class="dvl"><ul id="ausgabe" class="liste"></ul></div>

</body>
</html>

Falls JavaScript im Browser des Benutzers deaktiviert, kann auch return false im einleitenden Formt-Tag des Formulars nicht greifen und der Inhalt des Formulars wird auf dem normalen Post-Wege an den Webserver übermittelt. In diesem Fall können die Daten mit einem beliebigen serverseitigen Script weiterverarbeitet oder ausgegeben werden. Eine einfache HTML-Seite mit einer Fehlermitteilung oder einem Hinweis für den Benutzer, würde jedoch je nach dem geplanten Einsatzzweck und zum Testen der Funktionen und Methoden bereits genügen.

Beispiel (errorpage.php):

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Error-Page</title>
<style type="text/css">body {text-align:center}</style>
</head>

<body>
<h1>Error-Page</h1>
<p><a href="sendpage.html">Formular</a> | <a href="postpage.html">Eingangsseite</a></p>
<p>Ein Fehler trat auf oder JavaScript ist deaktiviert.</p>
<?php

// Post empfangen, verarbeiten und ausgeben, falls JavaScript deaktiviert.

?>
</body>
</html>

GET Parameter und Werte « zurück

 
Navigation

Einstieg in JavaScript

 


Listings & Tutorials

 

Weitere Themen

Übersicht

 


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