Tweet
Guten Tag,
ich erstelle gerade ein Formular, bei dem die Felder auswahlabhängig angezeigt werden sollen. Je nachdem was im Select mit dem Namen "anfragegrund" ausgewählt wird soll div "teil1" oder "teil2" angezeigt werden. Das funktioniert soweit auch, nun zum eigentlichen Problem:
Die Klasse "validate(required)" zeigt ja, dass diese Felder validiert werden sollen. Wähle ich jetzt im Select-Menü den "Grund1" aus werden mir ja nur die Felder aus dem div "teil1" angezeigt (was ja richtig ist) nur möchte er die Felder aus dem div "teil2" auch validieren, weshalb ich das Formular dann nicht abschicken kann. Wie bekomme ich das hin, dass er nur die Felder validieren möchte, die gerade "sichtbar" sind?
Hier der Quellcode (so klein wie möglich gehalten und viel entfernt, nur damit man das Prinzip bzw meine Herangehensweise versteht):
Liebe Grüße
ich erstelle gerade ein Formular, bei dem die Felder auswahlabhängig angezeigt werden sollen. Je nachdem was im Select mit dem Namen "anfragegrund" ausgewählt wird soll div "teil1" oder "teil2" angezeigt werden. Das funktioniert soweit auch, nun zum eigentlichen Problem:
Die Klasse "validate(required)" zeigt ja, dass diese Felder validiert werden sollen. Wähle ich jetzt im Select-Menü den "Grund1" aus werden mir ja nur die Felder aus dem div "teil1" angezeigt (was ja richtig ist) nur möchte er die Felder aus dem div "teil2" auch validieren, weshalb ich das Formular dann nicht abschicken kann. Wie bekomme ich das hin, dass er nur die Felder validieren möchte, die gerade "sichtbar" sind?
Hier der Quellcode (so klein wie möglich gehalten und viel entfernt, nur damit man das Prinzip bzw meine Herangehensweise versteht):
HTML Code:
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Formular</title> <script language="JavaScript" type="text/javascript"> function switchTroubleshooting(obj) { if (obj.selectedIndex==0) { document.getElementById("teil1").style.display="block"; document.getElementById("teil2").style.display="none"; } if (obj.selectedIndex==1) { document.getElementById("teil1").style.display="none"; document.getElementById("teil2").style.display="block"; } } </script> </head> <body> <form action="<?php print $_SERVER['PHP_SELF']; ?>" method="post" name="example1" id="example1"> Name *: <td width="300px"><input type="text" name="xyz" class="validate(required)" /> Anfragegrund *: <select name="anfragegrund" onchange="switchTroubleshooting(this)"> <option value="1" selected="selected">Grund1</option> <option value="2">Grund2</option> </select> <div id="teil1"> Betriebsystem *: <td width="300px"><input type="text" name="xyz" class="validate(required)" /> <!--und einige weitere abfragefelder, der übersicht halber entfernt--> </div> <div id="teil2" style="display:none"> Lorem Ipsum *: <td width="300px"><input type="text" name="xyz" class="validate(required)" /> <!--und einige weitere abfragefelder, der übersicht halber entfernt--> </div> </form> </body> </html>
Comment