Mssmar: Formular-Fieledsets einblenden/ausblenden in die selben Position

Guten Morgen,

erstens, muss ich zugeben, dass ich nicht genau weiß unter welches Thema ich diesen Beitrag posten soll: (CSS/JavaScript).

Aber ich überlasse es euch ;-)

Problem:

Ich habe zwei Formular-Fieledsets, die je nach Bedarf sichtbar/unsichtbar gemacht werden können (über ID und JavaScript).

Fieldset1 ist über den Fieldset2 plaziert, dafür ist aber Fieldset2
zunächst als hidden gesetzt.

Wenn ich in Fieldset1 dann den Sende-Button ancklicke, soll das Formular in Fieldset1 geschickt werden und gleichzeitig das ganze Filedset1 mit dem Inhalt ausgeblindet werden. Aber dazu muss der Fieldset2 sichtbar gemacht werden und (hier kommt es) die gleiche Position, (auf die Seite) die das Fieldset1 hatte, übernehmen.

Bislang wird der Fieldset2 zwar sichtbar, aber nicht an die Position von Fieldset1, der jetzt unsichtbar ist.

Wüsste Jemand einen Trick mit dem Man so ein Fall lösen kann?

Die Position mit CSS hat mir nicht sehr geholfen, da der Sende-Button dann mit dem Hidden-Fieldset überdeckt wird ("z-index" hat auch nicht viel gebracht).

Danke und Gruß
Messmar

  1. Wenn ich in Fieldset1 dann den Sende-Button ancklicke, soll das Formular in Fieldset1 geschickt werden und gleichzeitig das ganze Filedset1 mit dem Inhalt ausgeblindet werden. Aber dazu muss der Fieldset2 sichtbar gemacht werden und (hier kommt es) die gleiche Position, (auf die Seite) die das Fieldset1 hatte, übernehmen.

    Wenn du ein Formular sendest, wird die Seite angezeigt, die das dazugehörige Skript ausgibt. D.h. die aktuelle Seite ist nicht mehr relevant und du kannst mit deinem Serverseitigen Skript die Seite so darstellen wie du willst.

    Bislang wird der Fieldset2 zwar sichtbar, aber nicht an die Position von Fieldset1, der jetzt unsichtbar ist.

    Wüsste Jemand einen Trick mit dem Man so ein Fall lösen kann?

    Das Fieldset2 an die der stelle ausgeben an der du vorher das Fieldset1 ausgegeben hast.

    Die Position mit CSS hat mir nicht sehr geholfen, da der Sende-Button dann mit dem Hidden-Fieldset überdeckt wird ("z-index" hat auch nicht viel gebracht).

    Ein verstecktes Element kann schlecht ein sichtbares überdecken

    Struppi.

    --
    Javascript ist toll (Perl auch!)
  2. hi,

    Wenn ich in Fieldset1 dann den Sende-Button ancklicke, soll das Formular in Fieldset1 geschickt werden

    Nicht das Formular ist im Fieldset, sondern umgekehrt.
    Du möchtest also ein Formular abschicken, in dem sich zufälligerweise ein Fieldset befindet. Das geht absolut analog, wie das Abschicken eines Formulars, in dem sich zufälligerweise kein Fieldset befindet.

    und gleichzeitig das ganze Filedset1 mit dem Inhalt ausgeblindet werden.

    Da du gerade ein Formular abgesendet hast, bezieht sich dieser Wunsch wohl auf den Aufbau der Antwortseite?

    Was hat dann Javascript damit zu tun?

    Wüsste Jemand einen Trick mit dem Man so ein Fall lösen kann?

    Könntest du dein Problem vielleicht erst mal _nachvolziehbar_ beschreiben, bevor wir an zu Zaubern fangen?

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. hi,

      Nicht das Formular ist im Fieldset, sondern umgekehrt.

      Da hast Du völlig Recht (falsch ausgedrückt).
      Was ich meinte, waren die Formular-Felder.

      Du möchtest also ein Formular abschicken, in dem sich [...]

      bezieht sich dieser Wunsch wohl auf den Aufbau der Antwortseite?

      Ich verstehe schon was Du da meinst. Aber ich schicke nur zwei Daten
      an den Server: Name, Vorname und dann blinde ich den Rest des Formulars ein, das dann die restlichen Daten schicken wird.
      z.B. Familienstand, Gebtag, Anschrift, Tel-nr uzw.

      Ich möchte kein Formular (als Antwort - Sage ich Mal -) vom Server erhalten. (Ich hoffe, ich konnte mich hier verstandlich ausdrücken)

      Was hat dann Javascript damit zu tun?

      Mit Der könnte ich meiner Meinung nach das zweite Fromular einblinden.

      Könntest du dein Problem vielleicht [...]

      Evtl. hilft der Code hier, um zu zeigen, was ich vorhabe.

      PS:

      Die Funktion: changePosition(id), ist eine von mir ausgedachte Lösung, um den eingeblendeten Fieldset an die Stelle von dem ausgeblendeten zu positionieren.

        
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
        
      <html>  
      <head>  
       <title>Untitled</title>  
      </head>  
        
      <body>  
      <script language="Javascript">  
       function showDiv(id,showHide) {  
        if (showHide == "1"){  
         if (document.layers) document.layers['' + id +''].visibility = "show"  
         else if (document.all) document.all['' + id + ''].style.visibility = "visible"  
         else if (document.getElementById) document.getElementById('' + id + '').style.visibility = "visible"  
        }  
        else  
        if (showHide == "0"){  
         if (document.layers) document.layers['' + id + ''].visibility = "hide"  
         else if (document.all) document.all['' + id + ''].style.visibility = "hidden"  
         else if (document.getElementById) document.getElementById('' + id + '').style.visibility = "hidden"  
        }  
       }  
        
       function changePosition(id) {  
        document.getElementById(id).style.marginTop="80px";  
       }  
      </script>  
      <form name="cars" action="test.htm">  
       <fieldset id="Inhalt" style="visibility:visible;">  
        <label for="name">Vorname:</label><input id="name" type="text" name="name" value="" />  
        <br />  
        <label for="name">Nachname:</label><input id="mail" type="text" name="mail" value="" />  
        <br />  
        <label class="aktAutoMarkeModell">Aktuelle Automarke:</label>  
        <select name="aktAutomarke" id="automarke"">  
         <option value="AktmodellAudi">AktmodellAudi</option>  
         <option value="AktmodellBMW">AktmodellBMW</option>  
        </select>  
        
        </select>  
        <br /><br />  
        <input type="Button" value="Senden" style="width:100px;" onclick="showDiv('Inhalt',0); showDiv('Inhalt2',1);changePosition('Inhalt2')">  
       </fieldset>  
       <!-- ############################################################################# -->  
       <fieldset id="Inhalt2" style="visibility:hidden;">  
        <legend>Ihre Kontaktdaten</legend>  
        <label for="name">eMail:</label><input id="name" type="text" name="name" value="" />  
        <br />  
        <label for="name">Anrede:</label><input id="mail" type="text" name="mail" value="" />  
        <br />  
        
        
        <br /><br />  
        <input type="Button" value="Senden" style="width:100px;">  
       </fieldset>  
      </form>  
        
        
      </body>  
      </html>  
      
      

      Danke und Gruß
      Messmar

      1. Du möchtest also ein Formular abschicken, in dem sich [...]
        bezieht sich dieser Wunsch wohl auf den Aufbau der Antwortseite?

        Ich verstehe schon was Du da meinst. Aber ich schicke nur zwei Daten
        an den Server: Name, Vorname und dann blinde ich den Rest des Formulars ein, das dann die restlichen Daten schicken wird.
        z.B. Familienstand, Gebtag, Anschrift, Tel-nr uzw.

        Wenn ich das unten richtig sehe, hast du gar keine 2 Formulare, sondern eines in dem du 2 Fieldset Bereiche ein und ausblenden willst.

        [code lang=html]
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

        Wenn du diesen DOCTYPE verwendest ist die Schreibweise <tag /> falsch.

        <body>
        <script language="Javascript">

        Das dieses Attribut seit ewigkeiten nicht mehr aktuel ist sollte dir eigentlich bekannt sein.

        function showDiv(id,showHide) {
          if (showHide == "1"){
           if (document.layers) document.layers['' + id +''].visibility = "show"
           else if (document.all) document.all['' + id + ''].style.visibility = "visible"
           else if (document.getElementById) document.getElementById('' + id + '').style.visibility = "visible"
          }
          else
          if (showHide == "0"){
           if (document.layers) document.layers['' + id + ''].visibility = "hide"
           else if (document.all) document.all['' + id + ''].style.visibility = "hidden"
           else if (document.getElementById) document.getElementById('' + id + '').style.visibility = "hidden"
          }
        }

        Die NC 4 Unterstützung kannst du vergessen, ich bezweifle das du mit diesem Browser das so erreichen kannst, was du vorhast.

        <input type="Button" value="Senden" style="width:100px;" onclick="showDiv('Inhalt',0); showDiv('Inhalt2',1);changePosition('Inhalt2')">

        Nur weil du auf den Button senden draufschreibt tut er es nicht.
        Am einfachsten wäre es, wenn du beide Bereiche mit CSS an der gleiche Stelle positionierst und dann entsprechend ein und ausblendest.

        Struppi.

        --
        Javascript ist toll (Perl auch!)
        1. Hallo,

          Wenn ich das unten richtig sehe [...]

          Richtig. Ist mir auch Bewußt und Wird ich es dann anpassen.

          Wenn du diesen DOCTYPE verwendest ist die Schreibweise <tag /> falsch.

          Du hast Recht. Das ist eine Deklaration für ein normales Transitional Html-Dokument und der Code, den ich hier gepostet habe, ist mit als Xhtml-Code. (sage ich mal)

          Dieser Punkt, ist mir bekannt und meine Seite berücksichtig ihn auch.
          Das hier war nur ein Beispiel. mir ging es haupsächtlich an die Postition des Fieldsetes. Evtl. hätte ich hier auf kleine Details achten müssen, damit es nicht zu Misvertändnisse kommt.

          <script language="Javascript">
          Das dieses Attribut seit ewigkeiten nicht mehr aktuel ist sollte dir eigentlich bekannt sein.

          Auch richtig und ist mir auch bekannt.

          Die NC 4 Unterstützung kannst du vergessen, ich bezweifle das du mit diesem Browser[...].

          Auch richtig ;-) Aber es schadet nichts, wenn es dabei bliebe.

          Nur weil du auf den Button senden draufschreibt tut er es nicht.

          Das weiße ich auch und es muss in den Form-Tag aufgerufen werden und zwar mit:

            
          <form action="..." onSubmit="fubktioonAufruf();" ...>  
          
          

          Am einfachsten wäre es, wenn du beide Bereiche mit CSS an der gleiche Stelle [...]

          Auf die Idee bin schon gekommen, aber wie gesagt, irgendein Objekt verdeckte das zweite Formular.

          Ich habe es aber mit der zweiten Funktion hinbekommen ;-))

          Zukünftig, wird ich, selbst bei den hier geposteten Beispiele den kompletten richtigen Code z.B. für das Doctype uzw. darauf achten.

          DAnke noch Mal und Gruß
          Messmar

          1. Dieser Punkt, ist mir bekannt und meine Seite berücksichtig ihn auch.
            Das hier war nur ein Beispiel. mir ging es haupsächtlich an die Postition des Fieldsetes. Evtl. hätte ich hier auf kleine Details achten müssen, damit es nicht zu Misvertändnisse kommt.

            Das hat nichts mit Mißverständnissen zu tun
            Du präsentierst uns ja deine bisherigen Versuche und anhand solcher Details erkennt man welchen Wissenstand der Frager hat, zumal wenn die Frage noch so ungenau beschrieben ist. Da es ja in erster Linie darum geht dem Frager zu helfen sein Problem selber zu lösen. Wenn du dich aber mit deiner Frage als DAU darstellst kann natürlich die Antwort auch nur entsprechend ausfallen.

            Die NC 4 Unterstützung kannst du vergessen, ich bezweifle das du mit diesem Browser[...].

            Auch richtig ;-) Aber es schadet nichts, wenn es dabei bliebe.

            Ausser überflüssigen Code und evtl. seltsamen Verhalten in dem entpsrechenden Browser nicht, stimmt.

            Nur weil du auf den Button senden draufschreibt tut er es nicht.
            Das weiße ich auch und es muss in den Form-Tag aufgerufen werden und zwar mit:

            <form action="..." onSubmit="fubktioonAufruf();" ...>

              
            Was das eine mit dem anderen zu tun weißt (wieder mal) nur du.  
            aus deiner frage war zu lassen, dass du ein Formular abschickst mit Hilfe eine Buttons innnerhalb eines Framsets. Das tust du hier nicht. Inwiefern jetzt der submit Handler des Formulares hier relvant ist, entzieht sich meinen Kenntnissen.  
              
            
            >   
            > > Am einfachsten wäre es, wenn du beide Bereiche mit CSS an der gleiche Stelle [...]  
            >   
            > Auf die Idee bin schon gekommen, aber wie gesagt, irgendein Objekt verdeckte das zweite Formular.  
              
            Das ist Blödsinn, da wie gesagt ein verstecktes Element nicht mehr angezeigt wird und folglich auch nichts verdeckt, du machst irgendwas falsch.  
              
            
            > Ich habe es aber mit der zweiten Funktion hinbekommen ;-))  
              
            Warum du das fieldset nicht positinieren willst ist mir zwar ein Rätsel, aber wenn du es mit margin hinbekommen hast auch gut (wobei ich mich Frage woher du den Wert 80px hast, bzw wie das ganze dann aussieht, wenn du z.b. die Schrift vergrößerst oder verkleinerst)  
              
              
            Struppi.
            
            -- 
            [Javascript ist toll](http://javascript.jstruebig.de/) (Perl auch!)
            
            1. Hallo,

              [...]

              Das ist Blödsinn, da wie gesagt ein verstecktes Element nicht mehr angezeigt [...]

              Ich antworte hier noch Mal, weil es evtl. von allgemeinen Interesse sein könnte und zwar es geht um, die Javascript-Funktion die ich hier gepostet habe und verwende.

                
                 ....visibility="show";  
                 ....visibility="hidden";  
              
              

              sollte am besten in:

                
                 .... display="bolck";  
                 .... display="none";  
              
              

              geändert werden. Dann kann man allen Fieldsets die gleiche Position mit den CSS geben und die Funktion für das Anpassen der Position gar nicht brauchen.

              Danke und Gruß
              Messmar

              1. .... display="bolck";
                   .... display="none";

                  
                du meinst natürlich block  
                  
                
                >   
                > geändert werden. Dann kann man allen Fieldsets die gleiche Position mit den CSS geben und die Funktion für das Anpassen der Position gar nicht brauchen.  
                  
                genau. Aber es sollte auch mit visibility gehen.  
                  
                Struppi.
                
                -- 
                [Javascript ist toll](http://javascript.jstruebig.de/) (Perl auch!)
                
                1. du meinst natürlich block

                  Ja, genau. Schon wieder ein Tip-Fehler ;-((

                  genau. Aber es sollte auch mit visibility gehen.

                  richtig.

                  Gruß
                  Messmar

                2. hi,

                  Aber es sollte auch mit visibility gehen.

                  Wenn du die Elemente per absoluter Positionierung aus dem Fluss nimmst, ja.

                  Aber andernfalls bleibt ihr Platz ja reserviert.

                  gruß,
                  wahsaga

                  --
                  /voodoo.css:
                  #GeorgeWBush { position:absolute; bottom:-6ft; }
              2. Hallo Mssmar.

                ....visibility="show";
                   ....visibility="hidden";

                  
                Einen Wert „show“ gibt es nicht für die visibility-Eigenschaft.  
                  
                  
                Einen schönen Dienstag noch.  
                  
                Gruß, Mathias  
                
                -- 
                sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|  
                  
                debian/rules