Formulare bei onchange absenden - Versionsgeschichte

Zero: Kategorie hinzugefügt

2013-07-17T20:52:00Z

Kategorie hinzugefügt

Andreasisaak am 4. Dezember 2010 um 18:22 Uhr

2010-12-04T18:22:18Z

Andreasisaak am 4. Dezember 2010 um 18:03 Uhr

2010-12-04T18:03:10Z

Manitougs: Geshi-Anpassung

2010-10-03T13:23:48Z

Geshi-Anpassung

Andreasisaak am 3. August 2010 um 14:15 Uhr

2010-08-03T14:15:08Z

Manitougs: div. Korrekturen

2010-07-14T21:48:42Z

div. Korrekturen

Andreasisaak am 14. Juli 2010 um 13:14 Uhr

2010-07-14T13:14:43Z

Andreasisaak: Die Seite wurde neu angelegt: „{{stub}} {{AppliesTo|Version=Alle Versionen}} Um ein Formular (in diesem Tutorial das Modul Quicknavigation von Contao) innerhalb der Website ohne einen Submit …“

2010-07-13T22:22:48Z

Die Seite wurde neu angelegt: „{{stub}} {{AppliesTo|Version=Alle Versionen}} Um ein Formular (in diesem Tutorial das Modul Quicknavigation von Contao) innerhalb der Website ohne einen Submit …“

Neue Seite

{{stub}}

{{AppliesTo|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:
<pre>
$(document).ready(function(){

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

});
</pre>

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.

<pre>
document.documentElement.className += "js";

$(document).ready(function(){

...
</pre>

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.

<pre>
.js .mod_quicknav .submit {
display:none;
}
</pre>

← Nächstältere Version		Version vom 17. Juli 2013, 20:52 Uhr
Zeile 1:		Zeile 1:
		+	[[Category:Dev Snippets]]
	{{AppliesTo\|Version=Alle Versionen}}		{{AppliesTo\|Version=Alle Versionen}}

← Nächstältere Version		Version vom 4. Dezember 2010, 18:22 Uhr
Zeile 1:		Zeile 1:
−	~~{{stub}}~~
−
	{{AppliesTo\|Version=Alle Versionen}}		{{AppliesTo\|Version=Alle Versionen}}

@@ Zeile 29: / Zeile 29: @@
 	});
+}
 });
 </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.

@@ Zeile 6: / Zeile 6: @@
 jQuery Code:
-<pre>
+<source lang="javascript">
 $(document).ready(function(){
@@ Zeile 15: / Zeile 15: @@
 });
-</pre>
+</source>
 Mootools Code:
-<pre>
+<source lang="javascript">
 window.addEvent('domready', function() {
@@ Zeile 32: / Zeile 32: @@
 });
-</pre>
+</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.
@@ Zeile 38: / Zeile 38: @@
 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.
-<pre>
+<source lang="javascript">
 document.documentElement.className += "js";
@@ Zeile 44: / Zeile 44: @@
 ...
-</pre>
+</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.
@@ Zeile 50: / Zeile 50: @@
 Dafür öffnet man die für die Website zuständige CSS und ergänzt sie um folgende Zeilen.
-<pre>
+<source lang="css">
 .js .mod_quicknav .submit {
-display:none;
+   display:none;
+}
-</pre>
+</source>

@@ Zeile 22: / Zeile 22: @@
 window.addEvent('domready', function() {
-	$$('.mod_quicknav').addEvent('change', function() {
+if ($$('div.mod_quicknav') && $$('div.mod_quicknav').length > 0) {
-		var optionVal = $(this).getElement('select').getProperty('value');
+	$$('div.mod_quicknav select').addEvent('change', function() {
-		$(this).getElement('form').setProperty('action', optionVal).submit();
+		var optionVal = $(this).getProperty('value');
 		return false;
 	});
 });

@@ Zeile 3: / Zeile 3: @@
 {{AppliesTo|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.
+Um ein Formular (in diesem Tutorial das Modul Quicknavigation von Contao) innerhalb der Website ohne einen Submit Button abzuschicken, schreibt man innerhalb des [[Seitenlayout|Seitenlayouts]] bei "Eigener JavaScript-Code" einen kleinen Codeschnipsel in das dafür vorgefertige Feld.
 jQuery Code:
@@ Zeile 31: / Zeile 31: @@
 </pre>
-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.
+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.
 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.