Formulare bei onchange absenden

Aus Contao Community Documentation

betrifft
Contao Version Alle Versionen


Um ein Formular (in diesem Tutorial das Modul Quicknavigation von Contao) innerhalb der Website ohne einen Submit Button abzuschicken, schreibt man innerhalb des Seitenlayouts bei "Eigener JavaScript-Code" einen kleinen Codeschnipsel in das dafür vorgefertige Feld.

jQuery Code:

$(document).ready(function(){ 
 
$('.mod_quicknav').change(function(){
	$('.mod_quicknav form').attr('action', $(this).val()).submit();
	return false;
});
 
});


Mootools Code:

window.addEvent('domready', function() {
 
if ($$('div.mod_quicknav') && $$('div.mod_quicknav').length > 0) {
	$$('div.mod_quicknav select').addEvent('change', function() {
		var optionVal = $(this).getProperty('value');
		$(this).getParent('form').setProperty('action', optionVal).submit();
		return false;
	});
}
});


Mit $('.mod_quicknav') wählt man den Container aus, der das Formular umschließt und fügt diesem mit .change(function) eine Funktion hinzu. Im nächsten Schritt geht man eine Ebene tiefer, wählt das Formular innerhalb des Containers aus und sagt der Funktion was passieren soll wenn man sie betätigt.

So wird bei der Auswahl einer Seite innerhalb der Quicknavigation kein Submit Button mehr benötigt, sichtbar ist er aber nach wie vor. Um den Button bei aktiviertem Javascript unsichtbar zu machen fügt man dem oberen Codeschnippsel eine weitere Zeile hinzu.

document.documentElement.className += "js";
 
$(document).ready(function(){ 
 
...

Durch diese Zeile wird dem HTML Element der Website eine Klasse "js" hinzugefügt falls Javascript aktiviert sein sollte. Jetzt gilt es nur noch via CSS diesen Zustand abzufragen und den Button zu verstecken.

Dafür öffnet man die für die Website zuständige CSS und ergänzt sie um folgende Zeilen.

.js .mod_quicknav .submit { 
   display:none;
}
Ansichten
Meine Werkzeuge

Contao Community Documentation

Ich brauch nen Bier, es ist zwar noch nicht nach 4, aber es ist nach Oli.

Yanick Witschi
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge