Formulare bei onchange absenden: Unterschied zwischen den Versionen

Version vom 4. Dezember 2010, 19:22 Uhr

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;
}