Forms mit jQuery formToWizard und jQuery dForm

Das Erstellen von größeren Formularen z.B für einen Registrierungsprozess kann oftmals sehr zeitaufwändig und anstrengend sein. Hier sind zwei jQuery Plugins, die eine erhebliche Zeit- und Stressersparnis ermöglichen:

jQuery formToWizard

Mit formToWizard lässt sich ein schlichtes Formular leicht zu einem ansehnlichen Wizard umgestalten.

Das Plugin orientiert sich dabei an <fieldset></fieldset>. Es teilt also jedes Fieldset in einen “Step” ein und fügt automatisch den “next” und “prev” Button hinzu. Das <legend> Tag dient als Beschreibung.

Nach dem Download des Plugins reicht eine Zeile, um das Form in einen Wizard umzuwandeln (im Beispiel wird noch ein Submit-Button angehängt):

$("#Formular").formToWizard({ submitButton: 'speichern' });

zur Homepage | Demo

jQuery dForm

Mit dForm lässt sich das Formular direkt aus einem Javascript Objekt (normalerweise Json) erstellen. So lässt sich ohne grossen Aufwand ein Formular erstellen und man hat gleichzeitig das Objekt für den AJAX Request. Das ganze sieht dann zum Beispiel so aus:


var formdata =
{ "action" : "index.html",
"method" : "get",
"elements" : [{ "name" : "textfield",
"label" : "Label for textfield",
"type" : "text",
"value" : "Hello world" },
{ "type" : "submit",
"value" : "Submit" }]
};
$("#myform").buildForm(formdata);

In der letzten Zeile wird dann das Plugin aufgerufen.

Im nächsten Schritt könnte man das Objekt direkt in einen AJAX Request packen.
zur Hompage | Demo

Quelle: http://www.noupe.com/jquery/50-useful-jquery-plugins-to-enhance-your-forms.html

Über Tobias Marklstorfer

Tobias Marklstorfer war Auszubildender zum Fachinformatiker Anwendungsentwicklung bei der Scandio GmbH
Dieser Beitrag wurde unter Tech-Blog abgelegt und mit den Tags , , , versehen. Setze ein Lesezeichen auf den Permalink.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>