Pulldown-Menü mit Unterauswahl nach Selection

CUInHell · 26. Oktober 2004

Hi

Ich habe folgendes Problem:

Ich möchte in einem Formular eine Auswahl anbieten:

<select name="zahlungsweise">
<option>Vorkasse</option>
<option>Bankeinzug</option>
<option>Rechnung</option>
<option>Kreditkarte</option>
</select>

Wenn jetzt 'Vorkasse' gewählt wird, soll eine Bankverbindung eingeblendet werden.
Bei Auswahl von 'Kreditkarte' soll ein neues 'Select' erscheinen, dass die Auswahl der Kreditkarte ermöglicht. Wenn man diese wählt, soll dann noch die Eingabe der Kartennummer sowie der Gültigkeit ermöglichet werden.

Hat jemand eine Vorlage, die ich umschreiben kann? Danke.

CUInHell

Sven Mintel · 26. Oktober 2004

Packe die einzelnen Sachen in versteckte Ebenen und zeige sie je nach Bedarf an, indem du ihre "visibility"-Eigenschaft änderst.

CUInHell · 26. Oktober 2004

fatalus hat gesagt.:
Packe die einzelnen Sachen in versteckte Ebenen und zeige sie je nach Bedarf an, indem du ihre "visibility"-Eigenschaft änderst.

Das ging ja hurtig!

Kannst Du mir bitte ein Beispiel posten? Bin nicht fit darin. Danke.

CU

Sven Mintel · 27. Oktober 2004

z.B. so:

Code:

<!--....-->

<script type="text/javascript">
<!--
function auswahl(objSelect)
{

    arrLayers = ['Bankeinzug', 'Kreditkarte'];

    for(j = 0; j<arrLayers.length;++j)
        {
        document.getElementById(arrLayers[j]).style.display=
            (objSelect.options[objSelect.selectedIndex].text==arrLayers[j])
                ?'block'
                :'none';
        }
}
//-->
</script>

<!--....-->

<style type="text/css">
<!--
#Bankeinzug,#Kreditkarte{
display:none;
}
-->
</style>

<!--....-->

<form>
 	<select name="zahlungsweise"onchange="auswahl(this)">
 	    <option>Vorkasse</option>
 	    <option>Bankeinzug</option>
 	    <option>Rechnung</option>
 	    <option>Kreditkarte</option>
 	</select>
    <div id="Bankeinzug">
        Hier steht das Zeugs für den Bankeinzug.....
    </div>
    <div id="Kreditkarte">
        ....und hier das für die Kreditkarte
    </div>
</form>

<!--....-->

Die Funktion "auswahl()" wird beim Ändern der Auswahl der Liste aufgerufen.
In der Funktion werden die ID's der vorhandenen Ebenen in einem Array vermerkt.
Die Funktion geht diesen Array durch....ist der Text der selektierten <option> identisch mit der ID, wird die dazughörige Ebene angezeigt.... andernfalls versteckt.

CUInHell · 27. Oktober 2004

Irgendwie funktioniert die Sache nicht so wie ich will! Schau mal bitte auf die ganze Datei, danke.

HTML:

<html>
   <head>
   <title>Mail-Formular</title>
   <!--....-->
   <script type="text/javascript">
   <!--
   function auswahl(objSelect)
   {
   
       arrLayers = ['Bankeinzug', 'Kreditkarte'];
   
       for(j = 0; j<arrLayers.length;++j)
           {
           document.getElementById(arrLayers[j]).style.display=
               (objSelect.options[objSelect.selectedIndex].text==arrLayers[j])
                   ?'block'
                   :'none';
           }
   }
   //-->
   </script>
   <!--....-->
   </head>
   <body BGCOLOR="#000000" text="#EBEBEB">
   
   <style type="text/css">
   <!--
   #Bankeinzug,#Kreditkarte{
   display:none;
   }
   -->
   </style>
   <BR><BR>
   
   <FORM name="Formular" action=http://w...m.cgi method=post>
   <INPUT name=recipient type=hidden value=katalog....de>
   <CENTER>
       <h1>Katalogbestellung</h1>
       <font size="2">Hier k&ouml;nnen Sie sich den Katalog reservieren. 
       <br>
 Der Katalog wird Ihnen gegen eine Schutzgeb&uuml;hr<strong> (<font color="red">5 Euro</font>)</strong> 
       nach Erscheinen (etwa Oktober 2004) zugestellt.<br>Sie erhalten 
       auf dieses Formular eine Mail mit den erforderlichen Angaben!</font><br>
       <br>
      
     </CENTER>
     
     <table CELLSPACING="0" BORDER="0" CELLPADDING="0" WIDTH="681" align="center">
       <tr> 
         <td  colspan=4> <hr size=7 width="80%"> </td>
       </tr>
       <tr> 
         <td align=left width="118"> <div align="right">Anrede :</div></td>
         <td width="1">&nbsp;</td>
         <td colspan="2" width="562"> <p align="left"> 
             <input type=radio name="Anrede" checked value="Herr">
             Herr 
             <input type=radio name="Anrede" value="Frau">
             Frau</p></td>
       </tr>
       <tr> 
         <td colspan=4>&nbsp;</td>
       </tr>
       <tr> 
         <td align=left width="118"> <div align="right">Nachname :</div></td>
         <td width="1">&nbsp;</td>
         <td colspan="2" width="562"> <div align="left"> 
             <input type=text size=40 name="Nachname">
           </div></td>
       </tr>
       <tr> 
         <td colspan=4>&nbsp;&nbsp;</td>
       </tr>
       <tr> 
         <td align=left> <div align="right">Vorname :</div></td>
         <td>&nbsp;</td>
         <td colspan="2"> <div align="left"> 
             <input type=text size=40 name="Vorname">
           </div></td>
       </tr>
       <tr> 
         <td colspan=4>&nbsp;&nbsp;</td>
       </tr>
       <tr> 
         <td align=left> <div align="right">Stra&szlig;e / Nr.:</div></td>
         <td>&nbsp;</td>
         <td colspan="2"> <div align="left"> 
             <input type=text size=40 name="Strasse/Nr">
           </div></td>
       </tr>
       <tr> 
         <td colspan=4>&nbsp;&nbsp;</td>
       </tr>
       <tr> 
         <td align=left> <div align="right">PLZ :</div></td>
         <td>&nbsp;</td>
         <td colspan="2"> <div align="left"> 
             <input type=text size=40 name="PLZ">
           </div></td>
       </tr>
       <tr> 
         <td colspan=4>&nbsp;&nbsp;</td>
       </tr>
       <tr> 
         <td align=left> <div align="right">Ort :</div></td>
         <td>&nbsp;</td>
         <td colspan="2"> <div align="left"> 
             <input type=text size=40 name="Ort">
           </div></td>
       </tr>
       <tr> 
         <td colspan=4>&nbsp;&nbsp;</td>
       </tr>
       <tr> 
         <td align=left> <div align="right">Land :</div></td>
         <td>&nbsp;</td>
         <td colspan="2"> <div align="left"> 
             <input type=text size=40 name="Land" value="Deutschland">
           </div></td>
       </tr>
       <tr> 
         <td colspan=4>&nbsp;&nbsp;</td>
       </tr>
       <tr> 
         <td align=left> <div align="right">Telefon :</div></td>
         <td>&nbsp;</td>
         <td colspan="2"> <div align="left"> 
             <input type=text size=40 name="Telefon">
           </div></td>
       </tr>
       <tr> 
         <td colspan=4>&nbsp;</td>
       </tr>
       <tr> 
         <td align=left width="118"> <div align="right">EMail :</div></td>
         <td width="1">&nbsp;</td>
         <td colspan="2" width="562"> <div align="left"> 
             <input type=text size=40 name="Email">
           </div></td>
       </tr>
       <tr> 
         <td colspan="4" align=left>&nbsp;</td>
       </tr>
       <tr> 
         <td align=left> <div align="right">Firma / Dienststelle:</div></td>
         <td>&nbsp;</td>
         <td colspan="2"> <div align="left"> 
             <input type=text size=40 name="Firma/Dienststelle">
           </div></td>
       </tr>
       <tr> 
         <td colspan=4>&nbsp;&nbsp;</td>
       </tr>
       
       <tr> 
         <td align=left> <div align="right">Zahlungsweise :</div></td>
         <td>&nbsp;</td>
         <td colspan="2"><div align="left">
   
   <!--....-->
   
        <select name="zahlungsweise"onchange="auswahl(this)">
            <option>Vorkasse</option>
            <option>Bankeinzug</option>
            <option>Rechnung</option>
            <option>Kreditkarte</option>
        </select>
       <div id="Bankeinzug">
            <tr> 
         <td align=left> <div align="right">Name und Sitz der Bank</div></td>
         <td>&nbsp;</td>
         <td colspan="2"> <div align="left"> 
             <input type=text size=40 name="Bank/Sitz">
           </div></td>
           </tr><tr>
           <td align=left> <div align="right">Bankleitzahl</div></td>
         <td>&nbsp;</td>
         <td colspan="2"> <div align="left"> 
             <input type=text size=40 name="BLZ">
           </div></td></tr><tr>
           <td align=left> <div align="right">Konto-Nr.</div></td>
         <td>&nbsp;</td>
         <td colspan="2"> <div align="left"> 
             <input type=text size=40 name="Konto">
           </div></td>
       </tr>
       <tr> 
         <td colspan=4>&nbsp;&nbsp;</td>
       </tr>
       </div>
       <div id="Kreditkarte">
          <tr> 
         <td align=left> <div align="right">Kartenname</div></td>
         <td>&nbsp;</td>
         <td colspan="2"> <div align="left"> 
             <input type=text size=40 name="Karte">
           </div></td>
           </tr><tr>
           <td align=left> <div align="right">Karten-Nr.</div></td>
         <td>&nbsp;</td>
         <td colspan="2"> <div align="left"> 
             <input type=text size=40 name="K-Nr">
           </div></td></tr><tr>
           <td align=left> <div align="right">gültig bis</div></td>
         <td>&nbsp;</td>
         <td colspan="2"> <div align="left"> 
             <input type=text size=40 name="bis">
           </div></td>
       </tr>
       <tr> 
         <td colspan=4>&nbsp;&nbsp;</td>
       </tr>
       </div>
   
   
   <!--....-->
   
           </td>
   </tr> 
   <tr> 
         <td colspan=4>&nbsp;&nbsp;</td>
       </tr>
       
       <tr> 
         <td width="118" height="70" align=left valign="top"> <div align="right"> 
             Zusatz:</div></td>
         <td width="1">&nbsp;</td>
         <td colspan="2" width="562"> <div align="left"> 
             <textarea cols="45" name="Nachricht" rows="3" wrap=vitual></textarea>
           </div></td>
       </tr>
       <tr> 
         <td colspan=4> <hr size="7" width="80%"> </td>
       </tr>
       <tr> 
         <td colspan=4 align=center> <div align="center"> 
             <input type=Submit value="Abschicken">
             <input type=reset value="Verwerfen">
           </div></td>
       </tr>
       <tr> 
         <td colspan=4 align=center>&nbsp; </td>
       </tr>
     </table>
   </form>
   </body>
   </html>

Auch wenn ich das Skript in den body-Bereich nehme passiert nichts. Ich benutze Mozilla Firefox, liegt es daran?

THX

CU

Sven Mintel · 28. Oktober 2004

Entferne die HTML-Fehler aus deinem Code, dann funktioniert es auch:

HTML-Tidy hat gesagt.:
Tidy (Version 4. August 2000):

Zeile 26 Spalte 1 - Warnung: <style> ist in <body>-Elementen nicht zugelassen
Zeile 169 Spalte 1 - Warnung: fehlendes </div> vor <tr>
Zeile 169 Spalte 1 - Warnung: implizites <table> eingefügt
Zeile 190 Spalte 1 - Warnung: fehlendes </table> vor </div>
Zeile 192 Spalte 1 - Warnung: fehlendes </div> vor <tr>
Zeile 192 Spalte 1 - Warnung: implizites <table> eingefügt
Zeile 213 Spalte 1 - Warnung: fehlendes </table> vor </div>
Zeile 218 Spalte 1 - Warnung: fehlendes </div> vor </td>

CUInHell · 28. Oktober 2004

OK. Das mit dem styl-Befehl war falsch. Aber es werden trotzdem alle Felder vorher schon angezeit, bevor die Auswahl der Zahlart getroffen wurde...

Sven Mintel · 28. Oktober 2004

Es sind insgesamt 8 HTML-Fehler, wenn du mal durchzählst.

CUInHell · 30. Oktober 2004

Die Fehler beinflussen leider nicht das Ergebnis wie es aussieht. Es funktioniert nicht.

Sven Mintel · 31. Oktober 2004

Code:

<html>
<head>
<meta name="generator" content="HTML Tidy, see www.w3.org">
<title>Mail-Formular</title>
<!--....-->
<script type="text/javascript">
<!--
function auswahl(objSelect)
{

arrLayers = ['Bankeinzug', 'Kreditkarte'];

for(j = 0; j<arrLayers.length;++j)
{
document.getElementById(arrLayers[j]).style.display=
(objSelect.options[objSelect.selectedIndex].text==arrLayers[j])
?'block'
:'none';
}
}
//-->
</script>

<!--....-->
<style type="text/css">
<!--
#Bankeinzug,#Kreditkarte{
display:none;
}
-->
</style>
</head>
<body bgcolor="#000000" text="#EBEBEB">
<br>
<br>
 

<form name="Formular" action="http://w...m.cgi" method="post">
<input name="recipient" type="hidden" value="katalog....de"> 

<center>
<h1>Katalogbestellung</h1>

<font size="2">Hier k&ouml;nnen Sie sich den Katalog
reservieren.<br>
 Der Katalog wird Ihnen gegen eine Schutzgeb&uuml;hr <strong>(<font
color="red">5 Euro</font>)</strong> nach Erscheinen (etwa Oktober
2004) zugestellt.<br>
Sie erhalten auf dieses Formular eine Mail mit den erforderlichen
Angaben!</font><br>
<br>
</center>

<table cellspacing="0" border="0" cellpadding="0" width="681"
align="center">
<tr>
<td colspan="4">
<hr size="7" width="80%">
</td>
</tr>

<tr>
<td align="left" width="118">
<div align="right">Anrede :</div>
</td>
<td width="1">&nbsp;</td>
<td colspan="2" width="562">
<p align="left"><input type="radio" name="Anrede" checked value=
"Herr"> Herr <input type="radio" name="Anrede" value="Frau">
Frau</p>
</td>
</tr>

<tr>
<td colspan="4">&nbsp;</td>
</tr>

<tr>
<td align="left" width="118">
<div align="right">Nachname :</div>
</td>
<td width="1">&nbsp;</td>
<td colspan="2" width="562">
<div align="left"><input type="text" size="40" name=
"Nachname"></div>
</td>
</tr>

<tr>
<td colspan="4">&nbsp;&nbsp;</td>
</tr>

<tr>
<td align="left">
<div align="right">Vorname :</div>
</td>
<td>&nbsp;</td>
<td colspan="2">
<div align="left"><input type="text" size="40" name=
"Vorname"></div>
</td>
</tr>

<tr>
<td colspan="4">&nbsp;&nbsp;</td>
</tr>

<tr>
<td align="left">
<div align="right">Stra&szlig;e / Nr.:</div>
</td>
<td>&nbsp;</td>
<td colspan="2">
<div align="left"><input type="text" size="40" name=
"Strasse/Nr"></div>
</td>
</tr>

<tr>
<td colspan="4">&nbsp;&nbsp;</td>
</tr>

<tr>
<td align="left">
<div align="right">PLZ :</div>
</td>
<td>&nbsp;</td>
<td colspan="2">
<div align="left"><input type="text" size="40" name="PLZ"></div>
</td>
</tr>

<tr>
<td colspan="4">&nbsp;&nbsp;</td>
</tr>

<tr>
<td align="left">
<div align="right">Ort :</div>
</td>
<td>&nbsp;</td>
<td colspan="2">
<div align="left"><input type="text" size="40" name="Ort"></div>
</td>
</tr>

<tr>
<td colspan="4">&nbsp;&nbsp;</td>
</tr>

<tr>
<td align="left">
<div align="right">Land :</div>
</td>
<td>&nbsp;</td>
<td colspan="2">
<div align="left"><input type="text" size="40" name="Land" value=
"Deutschland"></div>
</td>
</tr>

<tr>
<td colspan="4">&nbsp;&nbsp;</td>
</tr>

<tr>
<td align="left">
<div align="right">Telefon :</div>
</td>
<td>&nbsp;</td>
<td colspan="2">
<div align="left"><input type="text" size="40" name=
"Telefon"></div>
</td>
</tr>

<tr>
<td colspan="4">&nbsp;</td>
</tr>

<tr>
<td align="left" width="118">
<div align="right">EMail :</div>
</td>
<td width="1">&nbsp;</td>
<td colspan="2" width="562">
<div align="left"><input type="text" size="40" name="Email"></div>
</td>
</tr>

<tr>
<td colspan="4" align="left">&nbsp;</td>
</tr>

<tr>
<td align="left">
<div align="right">Firma / Dienststelle:</div>
</td>
<td>&nbsp;</td>
<td colspan="2">
<div align="left"><input type="text" size="40" name=
"Firma/Dienststelle"></div>
</td>
</tr>

<tr>
<td colspan="4">&nbsp;&nbsp;</td>
</tr>

<tr>
<td align="left">
<div align="right">Zahlungsweise :</div>
</td>
<td>&nbsp;</td>
<td colspan="2">
<div align="left"><!--....-->
<select name="zahlungsweise" onchange="auswahl(this)">
<option>Vorkasse</option>
<option>Bankeinzug</option>
<option>Rechnung</option>
<option>Kreditkarte</option>
</select> 

<div id="Bankeinzug">
<table>
<tr>
<td align="left">
<div align="right">Name und Sitz der Bank</div>
</td>
<td>&nbsp;</td>
<td colspan="2">
<div align="left"><input type="text" size="40" name=
"Bank/Sitz"></div>
</td>
</tr>

<tr>
<td align="left">
<div align="right">Bankleitzahl</div>
</td>
<td>&nbsp;</td>
<td colspan="2">
<div align="left"><input type="text" size="40" name="BLZ"></div>
</td>
</tr>

<tr>
<td align="left">
<div align="right">Konto-Nr.</div>
</td>
<td>&nbsp;</td>
<td colspan="2">
<div align="left"><input type="text" size="40" name="Konto"></div>
</td>
</tr>

<tr>
<td colspan="4">&nbsp;&nbsp;</td>
</tr>
</table>
</div>

<div id="Kreditkarte">
<table>
<tr>
<td align="left">
<div align="right">Kartenname</div>
</td>
<td>&nbsp;</td>
<td colspan="2">
<div align="left"><input type="text" size="40" name="Karte"></div>
</td>
</tr>

<tr>
<td align="left">
<div align="right">Karten-Nr.</div>
</td>
<td>&nbsp;</td>
<td colspan="2">
<div align="left"><input type="text" size="40" name="K-Nr"></div>
</td>
</tr>

<tr>
<td align="left">
<div align="right">g&uuml;ltig bis</div>
</td>
<td>&nbsp;</td>
<td colspan="2">
<div align="left"><input type="text" size="40" name="bis"></div>
</td>
</tr>

<tr>
<td colspan="4">&nbsp;&nbsp;</td>
</tr>
</table>
</div>

<!--....-->
</div>
</td>
</tr>

<tr>
<td colspan="4">&nbsp;&nbsp;</td>
</tr>

<tr>
<td width="118" height="70" align="left" valign="top">
<div align="right">Zusatz:</div>
</td>
<td width="1">&nbsp;</td>
<td colspan="2" width="562">
<div align="left"><textarea cols="45" name="Nachricht" rows="3"
wrap="vitual"></textarea></div>
</td>
</tr>

<tr>
<td colspan="4">
<hr size="7" width="80%">
</td>
</tr>

<tr>
<td colspan="4" align="center">
<div align="center"><input type="Submit" value="Abschicken"> <input
type="reset" value="Verwerfen"></div>
</td>
</tr>

<tr>
<td colspan="4" align="center">&nbsp;</td>
</tr>
</table>
</form>
</body>
</html>

Dies ist der von HTML-Tidy reparierte Quelltext deiner Seite....und siehe da, auf einmal scheint es zu gehen.

Pulldown-Menü mit Unterauswahl nach Selection

CUInHell

Grünschnabel

Sven Mintel

Mitglied

CUInHell

Grünschnabel

Sven Mintel

Mitglied

CUInHell

Grünschnabel

Sven Mintel

Mitglied

CUInHell

Grünschnabel

Sven Mintel

Mitglied

CUInHell

Grünschnabel

Sven Mintel

Mitglied

Neue Beiträge