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.

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.

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.

Beispiel
Download

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.

Der eingegebene Text kann in den Titel der Beiträge und/oder im Inhalt gesucht werden. Es kann zusätzlich die Formatierung der Ergebnisse über eine eigene CSS Datei an den Blog angepasst werden. Es kann jeweils der Titel oder zusätzlich ein Teil des Inhalts angegeben werden, wobei hier auch die Länge des auszugebenden Inhaltes eingestellt werden kann.

Installation:

Installation über die WordPress Adminstrator-Seiten:

1. Gehe zur Admin-Seite Plugins -> Installieren
2. Suche nach kau-boy und wähle das Plugin aus
3. Wähle die Aktion Jetzt installieren
4. Klicke auf Jetzt installieren
5. Aktiviere das Plugin über den Plugins Menüpunkt in WordPress
6. Du musst eventuell die Einstellungen anpassen, gerade wenn dein Suchfeld eine andere ID als s hat

Installation unter Verwendung der WordPress Adminstrator-Seiten:

1. Lade die zip-Datei des Plugins herunter: kau-boys-autocompleter.2.2.zip
2. Gehe zur Admin-Seite Plugins -> Installieren
3. Wähle den Link Hochladen unter Plugins Installieren Überschrift
4. Wähle die zip-Datei aus und klicke Jetzt installieren
5. Aktiviere das Plugin über den Plugins Menüpunkt in WordPress
6. Du musst eventuell die Einstellungen anpassen, gerade wenn dein Suchfeld eine andere ID als s hat

Installation unter Verwendung von FTP

1. Lade die zip-Datei des Plugins herunter: kau-boys-autocompleter.2.2.zip
2. Entpacke es und lade es in dein /wp-content/plugins/ Verzeichnis hoch
3. Aktiviere das Plugin über den Plugins Menüpunkt in WordPress
4. Du musst eventuell die Einstellungen anpassen, gerade wenn dein Suchfeld eine andere ID als s hat

Screenshots:

Screenshot des Plugins in einem neuen WordPress blog

Screenshot der Einstellungsseite (auch in englisch erhältlich)

Versionsgeschichte:

• 2.2 Deaktivieren der Suche für Suchfelder im Adminbereich und Ermöglichen der Verwendung zusammen mit dem relevanssi Plugin
• 2.1 Hinzufügen einer neuen Version von jQuery Autocomplete
• 2.0.1 Entfernen von “short open tags”, die auf blogs die Fehler verursachen die “short_open_tag” nicht auf “On” gesetzt haben
• 2.0 Autocompleter mit mehreren Textfelder auf einer Seite nutzbar machen, verbessern der Kürzung des Inhalt von Artikeln
• 1.9 Beheben von Problemen mit PHP4, funktioniert nun auch mit qTranslate im “Query-Modus” (?lang=de)
• 1.8 Hinzufügen der Einstellung für die Länge des Titels und des Inhalts in den Ergebnissen
• 1.7 Erstzen von jQuery suggest durch jQuery autocomplete, da das suggest Plugin HTML Auszeichnungen zerstört
• 1.6.1 Verwendung des id Attributs als Standard anstelle des name Attributs
• 1.6 Hinzufügen der Möglichkeit das Suchfeldes anhand des name Atrrbiuts auszuwählen
• 1.5.2 Hinzufügen der richtigen Kodierung zu html_entity_decode() um das Zerteilen von XML Enitäten zu verhindern
• 1.5.1 Fehler im AJAX repsonse behoben, der die Einstellung für die Ergebnisfelder nicht geladen hat
• 1.5 Hinzufügen Auswahlmöglichkeiten für die Such- und Ergebnisfelder
• 1.4.1 Aktualisierung der Übersetzungsdatei
• 1.4 Kombinieren der Styles für jQuery und script.aculo.us, Hinzufügen  einer Einstellung zur Multibyte-Kodierung
• 1.3.5 Fehler bei der html_entity_decode() Konvertierung beseitigt
• 1.3 Enfternen eines Kommentars in autocompleter.js.php, welcher eine PHP header warning  erzeugt hat
• 1.2 Verwendung von html_entity_decode() um das Zerteilen von Enitäten zu verhindern
• 1.1 Entfernen von WordPress shortcodes um leere oder falsche Seiten zu verhindern
• 1.0 Möglichkeit jQuery ODER script.aculo.us zu verwenden, Übersetzen der Einstellungsseite ins Deutsche
• 0.4 Hinzufügen der Einstellung für die Anzahl der Suchergebnisse und der eigenen CSS Date
• 0.3 Hinzufügen der Einstellung für die Suchfeld ID
• 0.2 Erste stabile Version

Wenn dir dieses Plugin gefällt oder dir etwas fehlt, würde ich mich freuen es zu erfahren. Hinterlasse einfach ein Kommentar auf dieser Seiter oder auf meiner WordPress Plugin Seite.