Formulare bei onchange absenden: Unterschied zwischen den Versionen
Aus Contao Community Documentation
K (div. Korrekturen) |
Zero (Diskussion | Beiträge) K (Kategorie hinzugefügt) |
||
| (4 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
| − | + | [[Category:Dev Snippets]] | |
| − | + | ||
{{AppliesTo|Version=Alle Versionen}} | {{AppliesTo|Version=Alle Versionen}} | ||
| Zeile 6: | Zeile 5: | ||
jQuery Code: | jQuery Code: | ||
| − | < | + | <source lang="javascript"> |
$(document).ready(function(){ | $(document).ready(function(){ | ||
| Zeile 15: | Zeile 14: | ||
}); | }); | ||
| − | </ | + | </source> |
Mootools Code: | Mootools Code: | ||
| − | < | + | <source lang="javascript"> |
window.addEvent('domready', function() { | window.addEvent('domready', function() { | ||
| − | $$('.mod_quicknav').addEvent('change', function() { | + | if ($$('div.mod_quicknav') && $$('div.mod_quicknav').length > 0) { |
| − | var optionVal = $(this | + | $$('div.mod_quicknav select').addEvent('change', function() { |
| − | $(this). | + | var optionVal = $(this).getProperty('value'); |
| + | $(this).getParent('form').setProperty('action', optionVal).submit(); | ||
return false; | return false; | ||
}); | }); | ||
| − | + | } | |
}); | }); | ||
| − | </ | + | </source> |
| + | |||
Mit <code>$('.mod_quicknav')</code> wählt man den Container aus, der das Formular umschließt und fügt diesem mit <code>.change(function)</code> 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. | Mit <code>$('.mod_quicknav')</code> wählt man den Container aus, der das Formular umschließt und fügt diesem mit <code>.change(function)</code> 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. | ||
| Zeile 35: | Zeile 36: | ||
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. | 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. | ||
| − | < | + | <source lang="javascript"> |
document.documentElement.className += "js"; | document.documentElement.className += "js"; | ||
| Zeile 41: | Zeile 42: | ||
... | ... | ||
| − | </ | + | </source> |
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. | 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. | ||
| Zeile 47: | Zeile 48: | ||
Dafür öffnet man die für die Website zuständige CSS und ergänzt sie um folgende Zeilen. | Dafür öffnet man die für die Website zuständige CSS und ergänzt sie um folgende Zeilen. | ||
| − | < | + | <source lang="css"> |
.js .mod_quicknav .submit { | .js .mod_quicknav .submit { | ||
| − | display:none; | + | display:none; |
} | } | ||
| − | </ | + | </source> |
Aktuelle Version vom 17. Juli 2013, 21:52 Uhr
| 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; }
