Formulareingaben auf Sendebestätigungsseite ausgeben / Sendebestätigung personalisieren - JavaScript: nützliche JavaScripts in ein Formular einbinden - Workshop für den kostenlosen und werbefreien Formmailer (mit Spam Schutz) von www.onlex.de - http://formws.onlex.de

Formular Workshop

Lerne das Erstellen von HTML-Formularen für deinen Onlex-Formmailer

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 ↑