Abhängigkeiten in Formularen mit dependsOn

Es kristallisiert sich immer mehr heraus das man aufgrund der UX in komplexen Formularen Abhängigkeiten einführt. Ein einfaches (wenn auch durchaus sehr altes) Beispiel ist der Radiobutton „Andere Lieferadresse eingeben“, falls sich diese von der Rechnungsadresse unterscheidet. Bisher habe ich diesbzgl. Aktionen immer manuell programmiert, man könnte nun aber auch dependsOn dafür nehmen.

Eigentlich blende ich inzwischen regelmäßig Teilbereiche von Formularen mit Radiobuttons ein oder aus. Das gleiche gilt aber auch für das Read-Only-Attribut oder das automatische Befüllen für Inputs in Abhängigkeit zu anderen Feldern. Ein recht einfaches Code-Beispiel in dependsOn sähe zum Beispiel wie folgt aus. Das Markup:

<form id="basicTest">
	<label>
		<input type="checkbox"> Check me
	</label>
 
	<input type="text" class="subject">
</form>

Und das zugehörige JavaScript:

$('#basicTest .subject').dependsOn({
	'#basicTest input[type="checkbox"]': {
		checked: true
	}
});

Es lassen sich Abhängigkeiten auf alle Input-Elemente anwenden. So zum Beispiel auch auf Multiselects die Abhängigkeiten je nach Auswahl auslösen können. Das Projekt findet ihr auf GitHub, und es besitzt auch eine eigene Homepage.

Ähnliche Beiträge

Bacon.js – Bezier-Kurven für Texte Das Leben eines Webworkers ist nicht einfach, vor allem dann wenn man einem Kunden erklären muss, dass ein Bild mit Transparenz - auch wenn es dreimal...
Der Unterschied zwischen :nth-child und :nth-of-ty... Ich hab hier mal wieder ein CSS eines Kollegen zwischen das von dem Bemühen zeugt, innovative Lösungen zu nicht existierenden Problemen zu finden (ist...
Das Wunder des Live Reloads Ich zeige mich ja selten begeistert von Neuerungen muss ich sagen, ich könnte durchaus noch mit dem Notepad entwickeln wenn ich es wollte. Nach wochen...
Adobe Brackets – Code Editor für HTML, CSS &... Nach gefühlten 25 Jahren, dem Plattmachen von Homesite und einigen Versuchen Dreamweaver irgend etwas sinnvolles abzugewinnen glaubt jetzt wohl schein...

Schreibe einen Kommentar

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