Formulareingaben auf Sendebestätigungsseite ausgeben / Sendebestätigung personalisieren
<script>
Wieder erreichte uns eine Support Anfrage: Diesmal sollte die Sendebestätigungsseite personalisiert werden und zwar aus den Eingaben aus dem Formular. Zum Beispiel: "Liebe Frau Mustermann (...)".
Schwierigkeit hierbei:
Bei Nutzung von Diensten wie den
Formmailer von
Onlex.de werden die Daten im Formular direkt (ohne Umwege) verschickt ohne danach noch Zugriff auf diese Daten zu haben.
Es gibt jedoch die Möglichkeit diese Daten im Client (Browser) zwischenzuspeichern.
Durch eine kurze Recherche und Zusammenarbeit mit einem anderen Onlex Nutzer wurden wir schnell fündig:
Unter
wiki.selfhtml.org/wiki/JavaScript/Tutorials/Wert%C3%BCbergabe_zwischen_verschiedenen_HTML-Dokumenten findet man unterschiedliche Möglichkeiten wie man Formulardaten per JavaScript auf eine andere Seite übergeben kann. Hierzu haben wir aus praktischen Gründen den
''Lösungsansatz mittels window.name
'' gewählt und werden diesen hier in andere Art und Weise wiederholen.
Für diese Funktion benötigt man:
-
das sendende Dokument (Formular)
-
das empfangende Dokument (Sendebestätigungsseite)
-
die Datei storage.js, die hier heruntergeladen werden kann
(''Rechte Maustaste, Ziel speichern unter ...'' wählen)
das sendende Dokument
Das sendende Dokument ist im Grunde genommen das bestehende Formular.
Hier ein Quelltext-Auszug in leicht abgewandelter Form aus dem
Kontaktformular, welches du in diesem Workshop findest:
<form action="https://www.onlex.de/_formmailer.php?username=formws" name="Kontakt" method="POST" enctype="application/x-www-form-urlencoded" accept-charset="UTF-8" onsubmit="sichern(); return false;">
Dein Name:<br>
<input type="text" name="name" size="30"><br>
Dein Onlex-Benutzername:<br>
<input type="text" name="user" size="30"><br>
Deine eMail-Adresse:<br>
<input type="text" name="eMail" size="30"><br>
Deine Homepage:<br>
<input type="text" name="URL" size="30"><br>
Deine Nachricht:<br>
<textarea name="Nachricht" cols="34" rows="5"></textarea><br>
Passwort- / Spamschutz: Bitte gib <i>trowssap</i> ein<br>
<input type="password" name="onlex_password" size="30" maxlength="15"><br>
<input type="submit" value="Nachricht abschicken">
<input type="reset" value="Eingaben löschen">
</form>
Beachte bitte, dass bei einer Kopie des Quelltextes der Benutzername (hier rot und kursiv dargestellt) geändert werden muss.
Im
form
-Befehl wird neben dem Attribut
name="Kontakt"
auch das Attribut
onsubmit="sichern(); return false;"
geschrieben. Letzteres ruft die Funktion
sichern()
beim Abschicken des Formulars auf.
Dieser Code wird wie nachfolgend erweitert.
Quelltext-Auszug der Erweiterung:
<script type="text/javascript" src="storage.js"></script>
<script type="text/javascript">
function sichern() {
storage.set("name", document.forms.Kontakt.elements.name.value);
storage.set("user", document.forms.Kontakt.elements.user.value);
storage.set("eMail", document.forms.Kontakt.elements.eMail.value);
storage.set("URL", document.forms.Kontakt.elements.URL.value);
storage.set("Nachricht", document.forms.Kontakt.elements.Nachricht.value);
}
</script>
Die obige Erweiterung zeigt, dass die Datei
storage.js
eingebunden wird. Wichtig hier ist, dass die Pfadangaben korrekt sein müssen.
Desweiteren wird die Funktion
sichern()
aufgerufen.
In dieser Funktion wird mittels des Befehls
storage.set
die entsprechenden Eingaben gespeichert. Die Funktion ist in der Datei
storage.js
definiert.
Mit
storage.set("name", document.forms.Kontakt.elements.name.value);
wird der Wert im Feld
name
im Formular
Kontakt
gespeichert.
"name"
kann auch anders heissen. Wichtig ist, dass keine Umlaute, Sonderzeichen oder Leerzeichen geschrieben werden. Ebenso muss in
document.forms.Kontakt.elements.name.value
einen korrekten Bezug zu Formular und Formularfeld haben (bitte auch auf Gross- und Kleinschreibung achten!):
document.forms.FORMULARNAME.elements.FORMULARFELDNAME.value
Wichtig: Die gespeicherten Daten verbleiben im Speicher bis die Browsersitzung beendet wird
z.B. durch Schliessen des Browsers.
Wenn man mehrere Formulare auf seiner Website nutzt und auch eine Ausgabe für jedes Formular nutzen möchte, so ist es ratsam, wenn man im
empfangenden Dokument vor Ende
</script>
den Code
storage.removeAll();
schreibt. Somit werden nach Ausgabe der Daten, selbige gelöscht.
↑
zum Seitenanfang ↑
das empfangende Dokument
Das empfangende Dokument soll nun mit den Werten aus dem Formular gefüllt werden. Hierzu wird eine
evtl. schon bestehende Sendbestätigungsseite angepasst.
Der folgende Quellcode kommt zwischen
<head>
und
</head>
:
<script type="text/javascript" src="storage.js"></script>
<script type="text/javascript">
var liste = storage.getAll();
</script>
Beim Öffnen / Laden der Seite wird die Datei
storage.js
aufgerufen. Danach wird eine Variable
liste
definiert.
Um die Werte nun z.B. in einer Tabelle auszugeben, schreibt man folgenden Quelltext. Das Aussehen kann selbstverständlich frei angepasst werden ;-)
<table border="1" cellpadding="5" cellspacing="0">
<tr>
<th>Feldname</th>
<th>Eintrag</th>
</tr>
<script type="text/javascript">
for (var eigenschaft in liste) {
document.write(
"<tr><td>" + eigenschaft + "</td>" +
"<td><code>" + liste[eigenschaft] + "</code></td></tr>"
);
}
storage.removeAll();
</script>
</table>
Mit diesem obigen Code werden sämtliche gespeicherte Werte ausgegeben: Jeder Feldname und jeder Wert werden in neue Zeilen und Zellen eingefügt.
Zusätzlich wurde der Code um
storage.removeAll();
(oben im Code in blau dargestellt) erweitert, damit alle gespeicherten Daten gelöscht werden. Dieser Code ist optional.
Ebenso ist es möglich einzelne Werte zu löschen:
storage.remove(NAME)
(
z.B.:
storage.remove(vorname);
)
Man kann jedoch auch zusätzlich einzelne Werte ausgeben. Dies wird interessant, wenn man den Absender direkt ansprechen möchte.
Vorausgesetzt ist, dass die entsprechenden Felder im Formular existieren.
Beispiel eines sendenden Dokuments (
z.B. Formular) (Quelltext-Auszug (
HTML)):
[...]
<form action="https://www.onlex.de/_formmailer.php?username=formws" name="Kontakt" method="POST" enctype="application/x-www-form-urlencoded" onsubmit="sichern(); return false;">
Vorname<br>
<input type="text" name="vorname" size="20"><br>
Nachname<br>
<input type="text" name="nachname" size="20"><br>
[...]
Beispiel eines sendenden Dokuments (
z.B. Formular) (Quelltext-Auszug (JavaScript)):
<script type="text/javascript" src="storage.js"></script>
<script type="text/javascript">
function sichern() {
storage.set("vorname", document.forms.Kontakt.elements.vorname.value);
storage.set("nachname", document.forms.Kontakt.elements.nachname.value);
}
</script>
Beispiel eines empfangenden Dokuments (
z.B. Sendebestätigungsseite) (Quelltext-Auszug):
Liebe,r
<script type="text/javascript">
document.write(
storage.get("vorname") + " " + storage.get("nachname")
)
</script>
Mit der obigen Funktion werden lediglich die Werte aus
"vorname"
und
"nachname"
ausgegeben.
↑
zum Seitenanfang ↑
Tipps aus der Praxis ;-)
Um die Ausgabe fleissig testen zu können, muss man sich auf eine eigens gemachte Spam Flut gefasst machen ;-)
Man kann jedoch auch den Code im
sendenden Dokument anpassen.
Nachdem in der Funktion
sichern()
der letzte Wert, der gespeichert werden soll, notiert wurde, schreibt man folgenden Code:
location.href = "dateiname-der-sendebesaetigungsseite.html";
Zusätzlich muss im
<form>
Befehl der Wert im
action
-Attribut entfernt werden:
action=""
Nach Ende der Tests kann die
o.a. Zeile (
location.href[...]
) in der Funktion
sichern()
wieder entfernt (oder auskommentiert) werden.
Und bitte daran denken, dass man den Wert im
action
-Attribut wieder korrekt füllt ;-)
Beispiel anhand eines Kontaktformulars:
Quelltext-Auszug des sendenden Dokuments / Formulars (JavaScript-Code):
<script type="text/javascript" src="../js/storage.js"></script>
<script type="text/javascript">
function sichern() {
storage.set("vorname", document.forms.Kontakt.elements.vorname.value);
storage.set("nachname", document.forms.Kontakt.elements.nachname.value);
storage.set("eMail", document.forms.Kontakt.elements.eMail.value);
storage.set("Nachricht", document.forms.Kontakt.elements.Nachricht.value);
location.href = "empfangendes-dokument.html";
}
</script>
Quelltext-Auszug des sendenden Dokuments / Formulars (JavaScript-Code):
<form action="" enctype="application/x-www-form-urlencoded" method="post" name="Kontakt" onsubmit="sichern(); return false;">
Vorname:<br>
<input type="text" name="vorname" size="30"><br>
<br>
Nachname:<br>
<input type="text" name="nachname" size="30"><br>
<br>
eMail:<br>
<input type="text" name="eMail" size="30"><br>
<br>
Nachricht:<br>
<textarea name="Nachricht" cols="34" rows="5"></textarea><br>
<br>
<input type="submit" value="Daten senden">
</form>
↑
zum Seitenanfang ↑