Karli: document.write anhalten?

Hallo
Ich habe ein Formular erstellt, welches je nach Auswahl per JS ein paar neue Radio-Buttons usw.erstellt.

Ich hab jetzt folgende Probleme:

1. Ich möchte die Auswahl, von der die neuen Buttons abhängig sind, im neuen Formular auch angezeigt bekommen.

2. Das Dokument wird irgendwie nicht fertig erstellt. Es erscheint permanent "Laden" in dem Titel und die Sanduhr läuft.

Hier ist der Code:

<form name="Formular" action="formular.htm" method="post">

<script language="javascript">
    function auswahl(zahl){
       if(zahl==1){
     document.write("Bitte wählen Sie ein Kleidungsstück aus:<br>");
        document.write("<input type="checkbox" name="standard" value=m_shirt> Männer T-Hemd ");
        document.write("<input type="checkbox" name="standard" value=m_shirt> Männer Pullover ");
        document.write("<input type="checkbox" name="standard" value=m_shirt> Männer Polo ");
  document.write("<br><br>");
        }
       if(zahl==2){
     document.write("Bitte wählen Sie ein Kleidungsstück aus:<br>");
        document.write("<input type="checkbox" name="standard" value=f_shirt> Frauen T-Shirt ");
        document.write("<input type="checkbox" name="standard" value=f_pullover> Frauen Pullover ");
        document.write("<input type="checkbox" name="standard" value=f_polo> Frauen Polo ");
  document.write("<br><br>");
        }
  if(zahl==1 || zahl==2){

document.write("Bitte wählen Sie eine Grösse aus:<br>");
     document.write("<select name="groesse"> <option value="0"> </option> <option value="S">S</option> <option value="M">M</option>");
     document.write("<option value="L">L</option> <option value="XL">XL</option> <option value="XXL">XXL</option></select><br/>");

document.write("<table>");

document.write("<tr><td>Motiv 1</td><td><input type="text" id="motiv_1"></td>");
     document.write("<td>Position</td><td><input type="text" id="position_motiv1"></td>");

document.write("<td>Motivfarbe</td><td>");
   document.write("<select name="farbe_motiv1"> <option value="01"> </option>");
   document.write("<option value="rot_motiv1">Rot</option>");
   document.write("<option value="schwarz_motiv1">Schwarz</option>");
   document.write("<option value="weiss_motiv1">Weiss</option> </select> </td></tr>");

document.write("<tr><td>Motiv 2</td><td><input type="text" id="motiv_2"></td>");
     document.write("<td>Position</td><td><input type="text" id="position_motiv2"></td>")

document.write("<td>Motivfarbe</td><td>");
   document.write("<select name="farbe_motiv2"> <option value="02"> </option>");
   document.write("<option value="rot_motiv2">Rot</option>");
   document.write("<option value="schwarz_motiv2">Schwarz</option>");
   document.write("<option value="weiss_motiv2">Weiss</option> </select> </td></tr>");

document.write("<tr><td>Eigenes Motiv hochladen</td><td><input type="data" id="motiv_eigenes"></td>");
     document.write("<td>Position</td><td><input type="text" id="position_motiv2"></td></tr>")

document.write("<tr><td><input type="submit" value="in den Warenkorb"</td></tr>");

document.write("</table>");
  document.close
    }

}
    </script>

<table>
    <tr><td>Textilien</td></tr>
    <tr><td>
        <select name="geschlecht" onChange="auswahl(document.Formular.geschlecht.value)">
              <option value="0"> </option>
              <option value="1">Mann</option>
              <option value="2">Frau</option>
        </select>
    </td></tr>

</form>

  1. Hallo,

    ein fertig geladenes Dokument kann man nicht mit document.write() erweitern.

    einzelne Elemente könnte man mit innerHTML ändern/erweitern.

    eine elegantere Möglichkeit wäre die http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=display-Eigenschaft einzelner Formbereiche zu ändern. Dazu sind dann neben javascript auch einige CSS-Kenntnisse nötig. z.b. http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente@title=css/formate/zentrale.htm#verschachtelte_elemente

    anhand deines 1. Posting, den du mit dieser Frage ruhig hättest fortsetzen können, habe ich mal diesen Teil getestet, vermeide bitte in Zukunft Doppelpostings

    wahrscheinlich wirst du etliches in der Self-Doku nachschlagen müssen, um diesen Ansatz zu verstehen, aber ich denke die Mühe wird sich lohnen ...

      
    <style type="text/css">  
    label.mann, label.frau {display:none}  
    fieldset.gruppeM label.mann {display:inline;}  
    fieldset.gruppeF label.frau {display:inline;}  
    </style>  
    
    
      
    function chgfs(rb) {  
     var fs=rb.parentNode.parentNode;  // fieldset  
     if (rb.checked) fs.className="gruppe"+rb.value;  
     // alert( fs.nodeName+"\nrb: "+rb.checked+" "+rb.value+"\n"+fs.className);  
    }  
    
    
      
    <form>  
    <fieldset>  
      
    <label><input type="radio" name="sex" onchange="chgfs(this)" value="M"> Mann</label>  
    <label><input type="radio" name="sex" onchange="chgfs(this)" value="F"> Frau</label>  
    <br>  
    <label class="frau" ><input type=checkbox name="kleidung"  value="hemd"> Hemd<br></label>  
    <label class="frau" ><input type=checkbox name="kleidung"  value="rock"> Rock<br></label>  
    <label class="mann" ><input type=checkbox name="kleidung"  value="hemd"> Hemd<br></label>  
    <label class="mann" ><input type=checkbox name="kleidung"  value="hose"> Hose<br></label>  
    <label class="mann frau" ><input type=checkbox name="kleidung"  value="socken"> Socken<br></label>  
      
    </fieldset>  
    </form>  
    
    

    Gruß plan_B

    --
         *®*´¯`·.¸¸.·