Gestern stand ich vor der Aufgabe, verschiedene Textfelder abhängig einer Select-List unterschiedlich als Pflichtfelder zu markieren.
Mit ein wenig JavaScript ging das ganz schnell. Zuerst packt man mal den JavaScript-Code in eine .js-Datei, oder legt ihn, wie in meinem Fall geschehen, im Header Text der Page Attributes ab.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <code> <script language="JavaScript1.1" type="text/javascript"> function pflichtfelder() { var auswahl = document.getElementById('P1_SELECT_LIST').value; clearfelder(); switch(auswahl) { case "1": document.getElementById('P1_LASTNAME').style.background = '#FF0000'; document.getElementById('P1_FIRSTNAME').style.background = '#ff0000'; break; case "2": document.getElementById('P1_ROOM').style.background = '#ff0000'; document.getElementById('P1_DEP').style.background = '#ff0000'; break; case "3": break; case "4": document.getElementById('P1_ROOM').style.background = '#ff0000'; document.getElementById('P1_TEL').style.background = '#ff0000'; break; default: clearfelder(); break; } } function clearfelder() { document.getElementById('P1_LASTNAME').style.background = '#ffffff'; document.getElementById('P1_FIRSTNAME').style.background = '#ffffff'; document.getElementById('P1_ROOM').style.background = '#ffffff'; document.getElementById('P1_DEP').style.background = '#ffffff'; document.getElementById('P1_TEL').style.background = '#ffffff'; } </script></code> |
Der JavaScript-Code ist bestimmt nicht der schönste, aber für meine Zwecke völlig ausreichend und Firebug hat auch nichts zu meckern. Folgendes geschieht: Zuerst wird mal die Funktion clearfelder aufgerufen, um alle beteiligten Items in ihren Urzustand zu setzen. Anschließend werden anhand der Auswahl der Select-List verschiedene Textfelder farblich markiert.
Nun müssen wir noch der Select-List mitteilen, dass sie bei einem Wechsel "onchange" den JavaScript-Code aufzurufen hat. Dies geschieht über die HTML Form Element Attributes des Select-Items, mit dem Aufruf onchange="JavaScript:pflichtfelder();". Das Ganze geschieht AJAX-Like ohne Refresh der Seite. 🙂
Pingback: CC13.com » APEX: Buttons per JavaScript ein/ausblenden