Formular-Vorschau mit jQuery Thickbox

Für eines meiner Projekte habe ich eine kleine einfache Formular-Vorschau implementiert. Da ich mit dem Ergebnis und der Einfachheit sehr zufrieden bin, möchte ich das Ergebnis hier kurz vorstellen.

Die Vorschau-Funktion nutzt das jQuery Framework und dessen Plugin Thickbox. Der Einsatz von Thickbox stellt aber nur eine Möglichkeit dar, die Vorschau umzusetzen. Im Grunde ist der Aufbau recht simpel. Die JavaScript Funktion setzt das Target und das Action Attribut des Formulars und sendet die Daten an das unter Target angegebene Ziel. Das kann ein neuer Tab sein, oder aber ein iFrame, der wie in dem Beispiel beschrieben in der Thickbox angezeigt wird.

Zur Demonstration habe ich kleines E-Mail-Formular erstellt. Vor dem Absenden kann der Benutzer die zu versendende Mail ansehen. Ich setze die Funktion in einem Loginbereich für ein sehr viel komplexeres Formular ein und verwende für die Vorschau-Funktion auch das Skript, über das die Daten später dem Benutzer ausgegeben werden. Die Vorgehensweise ist aber von der Art und dem Umfang des Formulars unabhängig.

screenshot of mail form
So sieht das kleine Mailformular aus. Natürlich könnte man es noch um die Felder für den Absender und dessen E-Mail-Adresse erweitern, aber es dient wie gesagt nur als Demonstration.

Die einzige Anforderung an das Formular selbst ist eine ID, damit es über die Javascript-Funktion aufgerufen werden kann. Anschließend muss ein Button für die Vorschau eingefügt werden. Dieser sollte am besten ausgeblendet werden, wenn der Nutzer kein JavaScript aktiviert hat.

<input type="button" value="Preview" id="previewbutton" class="thickbox" alt="#TB_inline?width=400&height=250&inlineId=mailpreview&modal=true" />

Das Attribut alt enthält die Parameter für die Thickbox. Zusätzlich muss die CSS-Klasse thickbox zugewiesen werden, um bei einem Klick auf den Button die Thickbox zu aktivieren. Das ID Attribut wird für den Aufruf der JavaScript Funktion durch die click() Funktion von jQuery benötigt. Hier ist natürlich auch ein inline Attribut wie onmousedown möglich, aber das wäre nicht sehr jQuery-Style.

Anschließend aktivieren wir den Eventhandler für den Button zum Aufruf der Vorschau-Funktion:

$('#previewbutton').click(function(){
	formPreview('mailsend', 'mailpreview.php', 'mailpreviewiframe');
});

Der erste Parameter der Funktion steht für die ID des Formular, der zweite für die Seite, die zur Anzeige der Vorschau verwendet wird. Der dritte für das Zeil. Das Ziel kann ein neues Fenster sein, oder aber wie in unserem Fall ein iFrame, der wie folgt an einer beliebigen Stelle im Quelltext definiert wird:

<div id="mailpreview" style="display: none;">
	<iframe name="mailpreviewiframe" style="border: 0; width: 400px; height: 245px;"></iframe>
</div>

Der Frame steckt in einem DIV, welches ausgeblendet wird. Die ID des DIVs wird für die Thickbox-Parameter verwendet.

Was geschiet nun bei einem Klick auf den Vorschau-Button? Zuerst wird die Thickbox-Funktion ausgeführt und das DIV in die Thickbox verschoben. Mit einer kleinen Verzögerung wird dann der Inhalt des Formulars an den iFrame gesendet, indem das Traget Attribut des Formulars ausgenutzt wird. Um zum Anzeigen der Vorschau eine andere Seite als beim Speichern zu verwenden wird außerdem vor dem Absenden das Action Attribut ausgetauscht und direkt nach dem Absenden wieder auf seinen Ursprungszustand zurückgesetzt.

screenshot of mail preview

Da die Vorschau unter Verwendung des späteren Ausgabeseite geschiet, entspricht die Darstellung sehr genau dem späteren Ergebnis. Dazu sollten dann eventuell Daten aus der Datenbank nachgeladen werden oder Werte entsprechend des Speicheralgorithmus verändert werden. Bei komplexen Formularen kann es auch sinnvoll sein, die Daten über die reguläre Speicherfunktion in eine temporäre Tabelle zu speichern, um sie direkt wieder auszulesen. In meinem Projekt lade ich beispielsweise Daten für die ausgewählten SELECT Felder nach und wende die Datenbank-Escape-Funktionen an. Danach füge ich alles zu einer Datenstruktur zusammen, die so auch aus der Datenbank ausgelesen wird und gebe sie mit der Ausgabeseite aus.

Ich hoffe dieses kleine Beispiel zeigt euch, mit welch einfachen Mitteln man eine kleine Vorschau-Funktion umsetzen kann, ohne dabei auf Techniken wie AJAX angewiesen zu sein. Wer auf die Thickbox und jQuery verzichten will, muss lediglich einen inline Eventhandler verwenden und als Target beipsielsweise “_blank” angeben, um die Vorschau in einem neuen Tab/Fenster zu öffnen.

<input type="button" value="Preview" onclick="formPreview('mailsend', 'mailpreview.php', '_blank');" />

Das Formular kann gerne hier ausprobiert werden. Und keine Angst, es wird dabei in keinem Fall eine Mail versendet! Wer den Quellcode haben möchte, kann ihn auch gerne hier downloaden.

BeispielDownload

Noch ein Wort zum Formular-Design. Da ich nicht gerade die Geduld und die Begabung für schöne Formular habe, wurde für das Beispiel das Niceform 2.0 verwendet. Dieses ist zwar auf JavaScript angewiesen und ersetzt vergebene Klassen, aber ich konnte ohne viel Aufwand schöne Formulare für das Beispiel erzeugen.

Noch ein kleiner Bonustipp: Für Funktionen, die zwingend JavaScript erfodern, sollten diese ausgeblendet werden, wenn der Nutzer kein JavaScript aktiviert hat. Dazu einfach eine CSS-Klasse für solche Elemente verwenden und diese per “display: none” ausblenden. Im Kopfbereich kann dann mit “document.write()” oder den Funktionen der JavaScript-Frameworks die “display” Eigenschaft der CSS-Klasse wieder überschrieben werden. Somit erspart man dem Nutzer ohne JavaScript die unnötigen Klicks und in diesem Beispiel ein versehentliches Absenden, da viele Browser bei deaktiviertem JavaScript alle Buttons automatisch wie Submit-Buttons interpretiert.

Veröffentlicht von

Bernhard ist fest angestellter Webentwickler, entwickelt in seiner Freizeit Plugin, schreibt in seinem Blog über WordPress und andere Themen, treibt sich gerne bei den WP Meetups in Berlin und Potsdam herum und läuft nach Feierabend den ein oder anderen Halbmarathon.

8 Kommentare » Schreibe einen Kommentar

  1. Ein sehr schönes Script, genau das was ich gesucht habe 🙂

    Ich finde leider nur keine Möglichkeit, wie ich die Vorschau im ganzen vergrößern kann. Würde mich da über einen Tipp sehr freuen.

    MfG
    NoXPhasma

    • Ich hoffe, deine Frage bezieht sich darauf, wie man die Größe der Thickbox vergrößern kann. Das kannst du über das “alt” Atribut des Buttons tun (siehe erster Quellcode). Zusätzlich musst du dann natürllich auch noch den IFRAME anpassen, damit er die größere Thickbox auch ausfüllt.

      Was das die richtige Anwort auf deine Frage?

      • Genau das habe ich gemeint. Ich hatte die Größenangabe der Thickbox in den css Dateien gesucht :/

        Vielen Dank.

  2. This is simply amazing. I spent 2 days and couldn’t figure this out until I came across your page.

    Cheers,
    Amir

  3. Hey, das Tutorial hat mir sehr geholfen.
    Aber ich hatte zuerst probleme gehabt damit und fand herraus das ich in der formpreview.js
    form.submit() durch form.submit.click() ersetzen musste.
    vllt hängt das mit einer neueren version von jquery zusammen.
    ich nutze 1.4.2

    • Danke für deinen Hinweis, ich werde das morgen mal testen. Aber eigentlich ist die submit() Funktion eine Standardfunktion von JavaScript und da sollte es eigentlich keinen Unterschied machen, welche jQuery Version man hat. Mein Beispiel nutzt die damals aktuelle Version 1.3.2, aber ich teste es mal mit der neuen und aktualisiere meinen Quellcode, falls es wirklich Änderungen gibt.

  4. Pingback: Einfacher Zeilen-Duplizierer mit Prototype « Kau-Boys blog

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.