Sarah: Textfeld mit Formular

Hallo zusammen,

also wir haben hier eine Aufgabe, nur da ich das letzte mal im Unterricht gefehlt habe, hab ich nicht wirklich eine Ahnung wie ich das hier lösen kann....
Es heißt, wir sollen eine Webseite hobby1.html schreiben, die eine Liste von Hobbys zur Auswahl zeigt. Mit Klick auf den Button "Zeige Hobbys" soll sich ein Nachrichtenfenster öffnen, die die Auswahl anzeigt. Dabei sollen wir mit var eingabe=document.frm.txt.value arbeiten.

Und dann sollen wir die Aufgabe erweitern, sodass wenn "Handball" angeklickt wird, ein Fenster auf geht mit "Wenn Ihr Hobby Handball ist, dann automatisch auch Sport". Also "Sport" soll dann auch automatisch ausgewählt erscheinen.

Die Checkboxen hab ich schon. Ich weiß nur nicht wie ich das jetzt in JavaScript einbinden soll und wo ich frm und txt definiere...

Danke euch!!

  1. Hallo Sarah,

    also wir haben hier eine Aufgabe, nur da ich das letzte mal im Unterricht gefehlt habe, hab ich nicht wirklich eine Ahnung wie ich das hier lösen kann....

    hm, Informatik-Unterricht geschwänzt? SChweinerei. Welche Klasse? Lass mich raten, Stufe 11.

    Es heißt, wir sollen eine Webseite hobby1.html schreiben, die eine Liste von Hobbys zur Auswahl zeigt. Mit Klick auf den Button "Zeige Hobbys" soll sich ein Nachrichtenfenster öffnen, die die Auswahl anzeigt. Dabei sollen wir mit var eingabe=document.frm.txt.value arbeiten.

    pff, und sowas kompliziertes macht ihr? Und du lässt die Hausaufgabe einfach im Internet erledigen? Schweinerei. Das meld ich gleich mal deinem Lehrer, ich hab da so einen Verdacht, dass ich ihn kenne. Morgen in der 5. Stunde hab ich ihn ;-) *SCNR*

    Also, du hast hobby1.html:

    <form name="frm">  
      <select name="txt">  
        <option name="hobby1" value="Bollyball">  
        <option name="hobby2" value="Bandhall">  
        <option name="sowieso" value="Sport">  
      </select>  
      <input type="button" value="Zeige Hobbys" onClick="zeigeAlert();">  
    </form>
    

    ich dachte gerade, ihr solltet tatsächlich ein richtiges "Fenster" öffnen, aber vermutlich handelt es sich nur um ein einfaches Dialogfenster:

      
    function zeigeAlert() {  
        var eingabe = document.frm.txt.value;  
        alert(eingabe);  
    }  
    
    

    =)

    Und dann sollen wir die Aufgabe erweitern, sodass wenn "Handball" angeklickt wird, ein Fenster auf geht mit "Wenn Ihr Hobby Handball ist, dann automatisch auch Sport". Also "Sport" soll dann auch automatisch ausgewählt erscheinen.

    dann möchtest du das <option>-Tag Bandhall mit dem Attribut onClick="dannAuchSport();" ergänzen, welches z.B. so aussieht:

      
    function dannAuchSport() {  
        alert("Wenn ih Bohhy Bandhall ist, dann auch Sport!");  
        document.frm.txt.selectedIndex = 3; // hier Sport.  
    }  
    
    

    Die Checkboxen hab ich schon. Ich weiß nur nicht wie ich das jetzt in JavaScript einbinden soll und wo ich frm und txt definiere...

    Plötzlich sind es Checkboxen? Tja, dann entfern mein ganzes <select>-Zeug und ersetz es durch <input type="checkbox">. Geht dann analog.

    Grüße an den Turner (wo wir gerade bei dem Thema sind ;) ),

    Sven

    1. Hallo und danke erstmal!!

      Also, du hast hobby1.html:

      <form name="frm">

      <select name="txt">
          <option name="hobby1" value="Bollyball">
          <option name="hobby2" value="Bandhall">
          <option name="sowieso" value="Sport">
        </select>
        <input type="button" value="Zeige Hobbys" onClick="zeigeAlert();">
      </form>

      
      >   
      > ich dachte gerade, ihr solltet tatsächlich ein richtiges "Fenster" öffnen, aber vermutlich handelt es sich nur um ein einfaches Dialogfenster:  
      >   
      > ~~~javascript
        
      
      > function zeigeAlert() {  
      >     var eingabe = document.frm.txt.value;  
      >     alert(eingabe);  
      > }  
      > 
      
      

      =)

      Und dann sollen wir die Aufgabe erweitern, sodass wenn "Handball" angeklickt wird, ein Fenster auf geht mit "Wenn Ihr Hobby Handball ist, dann automatisch auch Sport". Also "Sport" soll dann auch automatisch ausgewählt erscheinen.

      dann möchtest du das <option>-Tag Bandhall mit dem Attribut onClick="dannAuchSport();" ergänzen, welches z.B. so aussieht:

      function dannAuchSport() {
          alert("Wenn ih Bohhy Bandhall ist, dann auch Sport!");
          document.frm.txt.selectedIndex = 3; // hier Sport.
      }

      
      >   
      > > Die Checkboxen hab ich schon. Ich weiß nur nicht wie ich das jetzt in JavaScript einbinden soll und wo ich frm und txt definiere...  
      >   
      > Plötzlich sind es Checkboxen? Tja, dann entfern mein ganzes <select>-Zeug und ersetz es durch <input type="checkbox">. Geht dann analog.  
        
      Dann wird nur vor dem ersten Hobby die Checkbox angezeigt, muss ich dann jedesmal von neuem input type etc schreiben? und eght das dann trotzdem wenn alle den name="txt" tragen? oder wie geht das dann?  
        
      tausend dank mal!!  
        
      
      >   
      > Grüße an den Turner (wo wir gerade bei dem Thema sind ;) ),  
      >   
      > Sven
      
      1. Hallo Sarah,

        <form name="frm">

        <select name="txt">
            <option name="hobby1" value="Bollyball">
            <option name="hobby2" value="Bandhall">
            <option name="sowieso" value="Sport">
          </select>
          <input type="button" value="Zeige Hobbys" onClick="zeigeAlert();">
        </form>

          
        
        > > ~~~javascript
          
        
        > > function dannAuchSport() {  
        > >     alert("Wenn ih Bohhy Bandhall ist, dann auch Sport!");  
        > >     document.frm.txt.selectedIndex = 3; // hier Sport.  
        > > }  
        > > 
        
        

        Dann wird nur vor dem ersten Hobby die Checkbox angezeigt, muss ich dann
        jedesmal von neuem input type etc schreiben? und eght das dann trotzdem
        wenn alle den name="txt" tragen? oder wie geht das dann?

        ich versteh zwar nicht, was du meinst, aber das <select> hat einen Nachteil: du kannst nur eine Sache gleichzeitig auswählen. Und das ist blöd, wenn nun mal Handball & Sport ausgewählt werden soll.

        Also musst du entweder alternativ Checkboxen verwenden (sowas hattest du ja angedeutet) oder <select multiple> schreiben, um so ein Mehrfachauswahlfeld zu erzeugen. Allerdings gibt es dann logischerweise nicht mehr *die* Auswahl, sondern ggf. mehrere ausgewählte <option>-Elemente, für die du in dem JavaScript-Code eine Schleife bräuchtest, um sie abzuhandeln.

        Grüße,

        Sven

        --
        ich hatte mal meterlange signs, die sind alle weg
        1. Hallo Sven,

          also wenn ichs rchtig verstanden hab wäre es besser das ganze so zu ändern:

          <form name="frm">
               <input type="checkbox" name="txt">
                  <option name="hobby1" value="Musik"> Musik <br>
                  <option name="hobby2" value="Computer"> Computer <br>
                  <option name="hobby3" value="Mathematik"> Mathematik <br>
              <option name="hobby4" value="Lesen"> Lesen <br>
                                           <option name="hobby5" value="Sport"> Sport <br>
                                           <option name="hobby6" value="Handball"> Handball <br>
               </input>
               <input type="button" value="Zeige Hobbys" onClick="zeigeAlert();">
            </form>

          ??

          Aber jetzt erscheint halt nur en Kästchen vor "Musik". Sollte ja aber nicht sein... Und wenn ich vor jedem Hobby dieses input schreib, muss ich dann auch bei jedem Tag erneut name="txt" schreiben und funktioniert die Auswertung dann überhaupt?

          Danke

          1. Hallo Sarah,

            <form name="frm">
                 <input type="checkbox" name="txt">
                    <option name="hobby1" value="Musik"> Musik <br>

            hm... <input> ist ein leeres Element, da gibts keine Kinder à la <option>.

            <option name="hobby2" value="Computer"> Computer <br>
                    <option name="hobby3" value="Mathematik"> Mathematik <br>
                <option name="hobby4" value="Lesen"> Lesen <br>
                                             <option name="hobby5" value="Sport"> Sport <br>
                                             <option name="hobby6" value="Handball"> Handball <br>
                 </input>
                 <input type="button" value="Zeige Hobbys" onClick="zeigeAlert();">
              </form>
            Aber jetzt erscheint halt nur en Kästchen vor "Musik".
            Sollte ja aber nicht sein...

            Nun, das ist die Interpretation deines Browsers, der versucht, daraus noch etwas sinnvolles zu machen. Du wolltest sicher einige Checkboxen machen, das geht aber mit sowas wie:

              
            <form name="frm">  
               <input type="checkbox" name="hobby1" value="Musik"> Musik <br>  
               <input type="checkbox" name="hobby2" value="Computer"> Computa <br>  
               <input type="chkecbox" name="hobby3" value="Mathe!"> Mathematik! <br>  
               ...  
              
               <input type="button" value="Zeige Hobbys" onClick="zeigeAlert();">  
            </form>  
            
            

            Und wenn ich vor jedem Hobby dieses input schreib, muss ich dann auch bei jedem Tag erneut name="txt" schreiben und funktioniert die Auswertung dann überhaupt?

            du greifst dann direkt auf die Werte der einzelnen Checkboxen mit document.frm.hobby1.selected zu. Also z.B.

              
               if(document.frm.hobby1.selected) alert("Musik ausgewählt!");  
              
               if( !document.frm.hobby2.selected && document.frm.hobby3.selected )  
                   alert("Oh, ein Mathematiker, der sich nicht durch Computer verdummen lässt. Sehr schlau.");  
            
            

            Grüße,

            Sven

            1. Hi,

              <form name="frm">
                 <input type="checkbox" name="hobby1" value="Musik"> Musik <br>
                 <input type="checkbox" name="hobby2" value="Computer"> Computa <br>
                 <input type="chkecbox" name="hobby3" value="Mathe!"> Mathematik! <br>
                 ...

              <input type="button" value="Zeige Hobbys" onClick="zeigeAlert();">
              </form>

                
              So bitte nicht, sondern so:  
                
              <input type="checkbox" name="hobby1" id="hobby1" value="Musik"><label for="hobby1">Musik</label><br>  
              <input type="checkbox" name="hobby2" id="hobby2" value="Computer"><label for="hobby2>Computer</label><br>  
              ...  
                
              oder  
                
              <label><input type="checkbox" name="hobby1" value="Musik"> Musik</label><br>  
              <label><input type="checkbox" name="hobby2" value="Computer"> Computer</label><br>  
                
              weil dann die klickbare Fläche größer ist.  
                
              cu,  
              Andreas
              
              -- 
              [Warum nennt sich Andreas hier MudGuard?](http://MudGuard.de/)  
              [O o ostern ...](http://ostereier.andreas-waechter.de/)  
                
              Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.  
              
              
              1. Moin!

                Diese Variante ...

                <label><input type="checkbox" name="hobby1" value="Musik"> Musik</label><br>
                <label><input type="checkbox" name="hobby2" value="Computer"> Computer</label><br>

                Funktioniert aber im IE5/6 nicht. 7 konnte ich nicht testen.

                Cü,

                Kai

                --
                What is the difference between Scientology and Microsoft? One is an
                evil cult bent on world domination and the other was begun by L. Ron
                Hubbard
                ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|]
              2. Moin Mudguard,

                <label><input type="checkbox" name="hobby1" value="Musik"> Musik</label><br>
                <label><input type="checkbox" name="hobby2" value="Computer"> Computer</label><br>
                weil dann die klickbare Fläche größer ist.

                du hast völlig recht, das entspricht auch voll meiner Einstellung. Ich kann die Leute nicht nachvollziehen, die diese fiddeligen Checkboxen oder Radioboxen suchen, anstatt einfach schön auf das Label zu klicken. Anders ausgedrückt: Solche Labels sollten gesetztlich verpflichtend sein ;-)

                Dass man das <input> auch in das Label reinschreiben kann, ist eine nette Idee - bis jetzt hab ich das eigentlich nie mit rein genommen. spricht aber eigentlich nichts dagegen.

                Grüße,

                Sven

                --
                ich hatte mal meterlange signs, die sind alle weg
                1. Hi,

                  Dass man das <input> auch in das Label reinschreiben kann, ist eine nette Idee - bis jetzt hab ich das eigentlich nie mit rein genommen. spricht aber eigentlich nichts dagegen.

                  Außer, wie Kai festgestellt hat, der IE ...

                  cu,
                  Andreas

                  --
                  Warum nennt sich Andreas hier MudGuard?
                  O o ostern ...
                  Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
            2. Ja Ok, aber ich wollte ja wissen wo ich dann das txt einbaue??
              Das brauch ich ja für "var eingabe = document.frm.txt.value" oder?

        2. Moin Moin!

          ich versteh zwar nicht, was du meinst, aber das <select> hat einen Nachteil: du kannst nur eine Sache gleichzeitig auswählen.

          Falsch. Ich empfehle, gelegentlich mal SelfHTML zu lesen, insbesondere den Teil über Formulare, möglichst bevor Du so einen Unsinn postest.

          Alexander

          --
          Today I will gladly share my knowledge and experience, for there are no sweeter words than "I told you so".
          1. Hallo Alexander (HH),

            ich versteh zwar nicht, was du meinst, aber das <select> hat einen Nachteil: du kannst nur eine Sache gleichzeitig auswählen.
            Falsch. Ich empfehle, gelegentlich mal SelfHTML zu lesen, insbesondere den Teil über Formulare, möglichst bevor Du so einen Unsinn postest.

            tja, und du solltest vielleicht erst mal mein Posting fertiglesen, bevor du so eine aggressive Antwort gibst, denn ich schrieb:

            Also musst du [...] alternativ [...] <select multiple> schreiben, um so ein Mehrfachauswahlfeld zu erzeugen.

            Erst lesen, dann denken, dann schreiben. Und die Agressivität zuhause lassen.

            Grüße,

            Sven