Shawna: Individuelles Suchformular!

Hallo

ich habe vor ein Individuelles Suchformular zuerstellen so wie auf z.b http://www.expedia.de/ das wenn man auf auf einem Radiobutton klickt eine andere Suchmaske erscheint!

Ok ich dachte erst per hidden ist das zu lösen wird es sicher auch sein aber die frage ist wie wird der Radiobutton verlinkt?

<a href="www.testlink.de"><input name="e" type="radio" value="e"></a>

das nimmt der gute IE nicht an nicht mal der 7er.

gruss shawna

  1. Hallo Shawna,

    ich habe vor ein Individuelles Suchformular zuerstellen so wie auf z.b http://www.expedia.de/ das wenn man auf auf einem Radiobutton klickt eine andere Suchmaske erscheint!

    Ok ich dachte erst per hidden ist das zu lösen wird es sicher auch sein aber die frage ist wie wird der Radiobutton verlinkt?

    Nein auf der von dir verlinkten Seite passiert das mit Javascript und ohne es aktiviert zu haben kommst du da auch nicht weit.

    Die Funktion,die für das Ein- und Ausblenden der verschiedenen Suchmasken zuständig ist, arbeitet tatsächlich mit den für die Style-Eigenschaft "visibility" zuständigen Werten "visible" und "hidden":

      
      
    function ExpandHiddenPanel(element) {  
      
    for (var i = 0; i< element.form.length; i++) {  
     if (element.form[i].name == element.name) {  
      
    try{  
    var targetele = element.form[i].getAttribute('target')  
    var ActiveTE = document.getElementById(targetele);  
      if (element.form[i].id == element.id) {  
      
    ActiveTE.style.display='inline';  
    ActiveTE.style.visibility='visible';}  
      else {  
    ActiveTE.style.display='none';  
    ActiveTE.style.visibility='hidden';  
      
      }  
      }  
    catch(e) {};  
     }  }  
      
    }  
    
    

    Ich rate dir aber, dich nicht an dem Quellcode der von dir verlinkten Seite zu orientieren; der validiert hinten und vorne nicht. Ein Target-Attribut für Radiobuttons muss man jedenfalls proprietär nennen. Man fragt sich, warum die Information nicht einfach aus dem Value-Attribut gezogen wird.

    Weil die Programmierer wohl selbst nicht mehr durchgeblickt haben, setzen sie sicherheitshalber auch um alles einen Try- mit leerem Catch-Block. Gewöhn dir das bloß nicht an.

    Du hast ja wahrscheinlich auch etwas viel Übersichtlicheres vor.

    Gruß Gernot

    1. Hallo Gernot

      ich werde mich sicher nicht an irgentwelchem Quellcode halten ich probiere micht eigentlich immer selber bis es funtz aber bei solchen Javascriptsachen hört es dann irgentwie auf.

      Bin schon am überlegen eine Fernstudium nebenbei zu machen und java zu lernen.

      Aba zurück:

      ich verstehe das script nicht wirklich :/

      Es werden 4 Radiobutton sein die dann auch 4 verschidenen Masken auslösen sollen. Aber nun verstehe ich nicht soll jeder Radio eine Funktion aufrufen? Oder ist nur eine funktion nötig? Und welche Werte müssen sie haben?

      Sry fragen über fragen!

      Gruss Shawna

      1. Hallo Shawna,

        Bin schon am überlegen eine Fernstudium nebenbei zu machen und java zu lernen.

        Wobei das etwas anderes ist als Javascript!

        Es werden 4 Radiobutton sein die dann auch 4 verschidenen Masken auslösen sollen. Aber nun verstehe ich nicht soll jeder Radio eine Funktion aufrufen? Oder ist nur eine funktion nötig? Und welche Werte müssen sie haben?

        Ja, du rufst bei jedem Radiobutton, der eine solche Ein-Ausblend-Aktion auslösen soll über den Eventhandler "onclick" dieselbe Funktion auf, der du den Radiobutton selbst über this als Objekt übergibst.

          
        <input type="radio" name="maskenwahl" onclick="[code lang=javascript]einblenden(this)
        ~~~" value="suchmaske1" />  
        <input type="radio" name="maskenwahl" onclick="`einblenden(this)`{:.language-javascript}" value="suchmaske2" />  
        <input type="radio" name="maskenwahl" onclick="`einblenden(this)`{:.language-javascript}" value="suchmaske3" />  
        <input type="radio" name="maskenwahl" onclick="`einblenden(this)`{:.language-javascript}" value="suchmaske4" />  
        [/code]  
          
        Die Funktion könnte dann so ausehen:  
          
        ~~~javascript
          
        function einblenden(radio) {  
           var radioGruppe = radio.form[radio.name];  
           for(i=0; i<radio.form[radio.name].length; i++) {  
              if(radioGruppe[i] != radio) {  
                 document.getElementById(radioGruppe[i].value).style.display = 'none';  
              } else {  
                 document.getElementById(radio.value).style.display = '';  
              }  
           }  
        }  
        
        

        Deinen ein- und auszublendenden Elementen, in denen sich die unterschiedlichen Suchmasken befinden gibst du IDs z.B. "suchmaske1", "suchmaske2" etc.

        Genau diese ID verpasst du den jeweiligen Radiobuttons als value, damit der jeweils angeklickte der aufgerufenen Funktion, der er sich selbst übergibt, sagen kann, welche Suchmaske einzublenden ist und dass die übrigen auszublenden sind.  Das Ausblenden geschieht durch das Zuweisen der display-Eigenschaft "none", das (Wieder-)Einblenden dadurch, dass du diese Eigenschaft durch Zuweisen einer leeren Zeichenkette wieder entziehst, wodurch das jeweilige Element wieder den sichtbaren Default-Wert erhält.

        Gruß Gernot

        1. Hallo Shawna,

          Bin schon am überlegen eine Fernstudium nebenbei zu machen und java zu lernen.

          Wobei das etwas anderes ist als Javascript!

          Ja das ist Java aber ist Javascript nicht eine abwandlung von Java?

          Es werden 4 Radiobutton sein die dann auch 4 verschidenen Masken auslösen sollen. Aber nun verstehe ich nicht soll jeder Radio eine Funktion aufrufen? Oder ist nur eine funktion nötig? Und welche Werte müssen sie haben?

          Ja, du rufst bei jedem Radiobutton, der eine solche Ein-Ausblend-Aktion auslösen soll über den Eventhandler "onclick" dieselbe Funktion auf, der du den Radiobutton selbst über this als Objekt übergibst.

          <input type="radio" name="maskenwahl" onclick="[code lang=javascript]einblenden(this)

          
          > <input type="radio" name="maskenwahl" onclick="`einblenden(this)`{:.language-javascript}" value="suchmaske2" />  
          > <input type="radio" name="maskenwahl" onclick="`einblenden(this)`{:.language-javascript}" value="suchmaske3" />  
          > <input type="radio" name="maskenwahl" onclick="`einblenden(this)`{:.language-javascript}" value="suchmaske4" />  
          > [/code]  
          >   
          > Die Funktion könnte dann so ausehen:  
          >   
          > ~~~javascript
            
          
          > function einblenden(radio) {  
          >    var radioGruppe = radio.form[radio.name];  
          >    for(i=0; i<radio.form[radio.name].length; i++) {  
          >       if(radioGruppe[i] != radio) {  
          >          document.getElementById(radioGruppe[i].value).style.display = 'none';  
          >       } else {  
          >          document.getElementById(radio.value).style.display = '';  
          >       }  
          >    }  
          > }  
          > 
          
          

          Deinen ein- und auszublendenden Elementen, in denen sich die unterschiedlichen Suchmasken befinden gibst du IDs z.B. "suchmaske1", "suchmaske2" etc.

          Genau diese ID verpasst du den jeweiligen Radiobuttons als value, damit der jeweils angeklickte der aufgerufenen Funktion, der er sich selbst übergibt, sagen kann, welche Suchmaske einzublenden ist und dass die übrigen auszublenden sind.  Das Ausblenden geschieht durch das Zuweisen der display-Eigenschaft "none", das (Wieder-)Einblenden dadurch, dass du diese Eigenschaft durch Zuweisen einer leeren Zeichenkette wieder entziehst, wodurch das jeweilige Element wieder den sichtbaren Default-Wert erhält.

          Viel lieben Dank ich werde das am Montag testen. Zu dem Doppelposting tut mir leid, wusste nicht das es gleich als Doppelposting gesehen wird, es waren ja 2 unterschiedliche Sachen sry

          Gruss shawna

          Gruß Gernot

          1. Hello out there!

            Ja das ist Java aber ist Javascript nicht eine abwandlung von Java?

            Nein. Beides sind völlig verschiedene Sprachen; nachzulesen in SELFHTML: JavaScript, Java. Die Syntax ist stellenweise ähnlich (an C angelehnt).

            Und sei bitte kein Vollquottel!

            See ya up the road,
            Gunnar

            --
            „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
            1. Hello out there!

              Ja das ist Java aber ist Javascript nicht eine abwandlung von Java?

              Nein. Beides sind völlig verschiedene Sprachen; nachzulesen in SELFHTML: JavaScript, Java. Die Syntax ist stellenweise ähnlich (an C angelehnt).

              Hast du denn evtl einen Tipp um Javascript von grund an zu lernen?

              lG shawna

              Und sei bitte kein Vollquottel!

              See ya up the road,
              Gunnar

              1. Hast du denn evtl einen Tipp um Javascript von grund an zu lernen?

                Kommt drauf an was du brauchst. selfhtml ist eigentlich dafür schon eine gute Anlaufstation.

                Struppi.

                --
                Javascript ist toll (Perl auch!)
                1. Hast du denn evtl einen Tipp um Javascript von grund an zu lernen?

                  »»

                  Kommt drauf an was du brauchst.

                  Wie meinst du was ich brauch :)

                  selfhtml ist eigentlich dafür schon eine gute Anlaufstation.

                  Struppi.

                  1. Hast du denn evtl einen Tipp um Javascript von grund an zu lernen?
                    »»
                    Kommt drauf an was du brauchst.

                    Wie meinst du was ich brauch :)

                    Ähm - um Javascript von grund an zu lernen - dachte ich

                    Struppi.

                    --
                    Javascript ist toll (Perl auch!)
                    1. Hast du denn evtl einen Tipp um Javascript von grund an zu lernen?
                      »»
                      Kommt drauf an was du brauchst.

                      Wie meinst du was ich brauch :)

                      Ähm - um Javascript von grund an zu lernen - dachte ich

                      Ja eine Buchempfehlung evtl. oder ähnliches :)
                      Gruss Shawna

                      Struppi.

                      1. Hast du denn evtl einen Tipp um Javascript von grund an zu lernen?
                        »»
                        Kommt drauf an was du brauchst.

                        Wie meinst du was ich brauch :)

                        Ähm - um Javascript von grund an zu lernen - dachte ich

                        Ja eine Buchempfehlung evtl. oder ähnliches :)

                        Damit kann ich dir leider nicht weiterhelfen, ich hab noch nie ein JS Buch in der Hand gehabt.

                        Struppi.

                        --
                        Javascript ist toll (Perl auch!)
              2. Hello out there!

                Und sei bitte kein Vollquottel!

                [Fullquote gelöscht]

                Hast du denn evtl einen Tipp um Javascript von grund an zu lernen?

                Einen, um Zitieren von Grund an zu lernen: http://leatn.to/quote

                See ya up the road,
                Gunnar

                --
                „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
                1. Hello out thete!

                  Ich kaufe ein R:
                  http://learn.to/quote

                  See ya up the toad,
                  Gunnat

                  --
                  „Wet Gtünde anhött, kommt in Gefaht nachzugeben.“ (Goethe)
                  1. Hallo Gunnar,

                    See ya up the toad,

                    is' gut, komm wieder von der Kröte runter!

                    *scnr*
                     Martin

                    --
                    F: Was ist ekliger als ein angebissener Apfel mit einem Wurm drin?
                    A: Ein angebissener Apfel mit einem halben Wurm.
          2. Hallo

            ich habe heute versucht das Script einzusetzen leider bekomme ich dabei eine Fehlermeldung.

            Sry wenn der Code sehr lang wird:

            [code lang=html]
            <div class="search">
                  <table border="0" cellspacing="0" cellpadding="0">
                   <tr>
                    <td width="25" align="right">
                     <input type="radio" name="Reiseauswahl" onclick="masken(this)" value="flug" />
                    </td>
                    <td width="29" class="radio">Flug</td>
                    <td width="25" align="right">
                     <input type="radio" name="Reiseauswahl" onclick="masken(this)" value="hotel" />
                    </td>
                    <td width="35" class="radio">Hotel</td>
                    <td width="25" align="right">
                     <input type="radio" name="Reiseauswahl" onclick="masken(this)" value="fh" />
                    </td>
                    <td width="70" class="radio">Flug + Hotel </td>
                    <td width="25" align="right">
                     <input type="radio" name="Reiseauswahl" onclick="masken(this)" value="lmm" />
                    </td>
                    <td width="93" class="radio">Lastminute</td>
                   </tr>
                  </table>
                 </div>
                 <!--Hidden Flug-->
                  <div id="flug">
                  <form action="weiss ich noch ned" method="get">
                   <p>Hinreise am:</p>
                    <select name="tag">

            <option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option>
                     <option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option>
                     <option value="29">29</option><option value="30">30</option><option value="31">31</option>
                    </select>
                    <select name="monat">
                     <option value="jan">Januar</option><option value="feb">Februar</option><option value="m&auml;r">M&auml;rz</option>
                    </select>
                    <select name="abflug" style="margin-left:70px;">
                     <option>Abflughafen</option><option value="txl">Tegel</option><option value="muc">M&uuml;nchen</option>
                    </select>
                   <p>Rückreise am:</p>
                    <select name="tag">
                     <option value="29">29</option><option value="30">30</option><option value="31">31</option>
                    </select>
                    <select name="monat">
                      <option value="okt">Oktober</option><option value="nov">November</option><option value="dez">Dezember</option>
                    </select>

            <select name="rueckflug" style="margin-left:70px;">
                     <option>Reiseziel&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option><option value="bkk">Bankok</option>
                    </select>
                   <p style="margin-top:15px;">Personen&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Alter bei Reiseantritt:</p>
                    <select name="erwachsende">
                      <option value="1">1. Erw.</option><option value="2">2. Erw.</option><option value="3">3. Erw.</option>
                      <option value="4">4. Erw.</option>
                    </select>
                    <input name="search" type="submit" value="Suchen" style="margin-left:50px;" />
                   </form>
                  </div>
                  <!--Ende Hidden Flug-->

            Das Javascript habe ich ausgelagert und sieht jetz so aus!

            [ code lang=javascript]
            function masken(radio) {
                var radioGruppe = radio.form[radio.name];
                for(i=0; i<radio.form[radio.name].length; i++) {
                   if(radioGruppe[i] != radio) {
                      document.getElementById(radioGruppe[i].value).style.display = 'none';
                   } else {
                     document.getElementById(radio.value).style.display = '';
                   }
                }
             }

            Und zwar bekomme ich die Fehlermeldung "form" ist Null oder kein Objekt. Zeile ist die angegeben <table border="0" cellspacing="0" cellpadding="0">

            Wo liegt mein Fehler!

            1. Und zwar bekomme ich die Fehlermeldung "form" ist Null oder kein Objekt. Zeile ist die angegeben <table border="0" cellspacing="0" cellpadding="0">

              Wo liegt mein Fehler!

              Das kein form existiert.

              Struppi.

              --
              Javascript ist toll (Perl auch!)
              1. Und zwar bekomme ich die Fehlermeldung "form" ist Null oder kein Objekt. Zeile ist die angegeben <table border="0" cellspacing="0" cellpadding="0">

                Wo liegt mein Fehler!

                Das kein form existiert.

                Ok das dachte ich mir fast :) Ich dachte an dieser Stelle wäre kein form erfoderlich. Was muss denn dieses form beinhalten?

                Gruss Shawna

                Struppi.

                1. Und zwar bekomme ich die Fehlermeldung "form" ist Null oder kein Objekt. Zeile ist die angegeben <table border="0" cellspacing="0" cellpadding="0">

                  Wo liegt mein Fehler!

                  Das kein form existiert.

                  Ok das dachte ich mir fast :) Ich dachte an dieser Stelle wäre kein form erfoderlich. Was muss denn dieses form beinhalten?

                  Naja, wenn du auf this.form zugreifst, aber kein Fomrular da ist, was sollte also this.form sein?

                  Was Form beinhalten muss: http://de.selfhtml.org/html/referenz/attribute.htm#form

                  Struppi.

                  --
                  Javascript ist toll (Perl auch!)
                  1. Und zwar bekomme ich die Fehlermeldung "form" ist Null oder kein Objekt. Zeile ist die angegeben <table border="0" cellspacing="0" cellpadding="0">

                    Wo liegt mein Fehler!

                    Das kein form existiert.

                    Ok das dachte ich mir fast :) Ich dachte an dieser Stelle wäre kein form erfoderlich. Was muss denn dieses form beinhalten?

                    Naja, wenn du auf this.form zugreifst, aber kein Fomrular da ist, was sollte also this.form sein?

                    Verstehe grad nicht was du meinst? Da wo das form erwartet wurde ist die Radiogruppe für die Auswahl der hidden Suchmasken! Ich habe nun ein form vergeben und es funzt auch soweit nur gibt der IE immer noch ein Fehler Objekt erfoderlich.

                    Gruss Shawna

                    Was Form beinhalten muss: http://de.selfhtml.org/html/referenz/attribute.htm#form

                    Struppi.

                    1. Naja, wenn du auf this.form zugreifst, aber kein Fomrular da ist, was sollte also this.form sein?

                      Verstehe grad nicht was du meinst?

                      <input type="radio" name="Reiseauswahl" onclick="masken(this)" value="fh" />
                                                                              ^^^^ this
                      function masken(radio) {
                          var radioGruppe = radio.form[radio.name];
                                                  ^^^ this.form
                      ....

                      Ich habe nun ein form vergeben und es funzt auch soweit nur gibt der IE immer noch ein Fehler Objekt erfoderlich.

                      Der Firefox nicht?
                      Der Fehler liegt hier:
                      document.getElementById(radioGruppe[i].value).style.display = 'none';
                      du solltest überprüfen ob das Element überhaupt existiert.
                      Von daher würde ich die Funktion eher so schreiben:

                      function masken(radio) {  
                       var radioGruppe = radio.form[radio.name];  
                       for(var i = 0; i < radioGruppe.length; i++) {  
                        var o = document.getElementById(radioGruppe[i].value);  
                        if(o)  
                         o.style.display = radioGruppe[i] == radio ? '' : 'none';  
                        else  
                         alert('Element: ' + radioGruppe[i].value + ' existiert nicht.');  
                       }  
                      }
                      

                      Struppi.

                      --
                      Javascript ist toll (Perl auch!)
                      1. Naja, wenn du auf this.form zugreifst, aber kein Fomrular da ist, was sollte also this.form sein?

                        Verstehe grad nicht was du meinst?

                        <input type="radio" name="Reiseauswahl" onclick="masken(this)" value="fh" />
                                                                                ^^^^ this
                        function masken(radio) {
                            var radioGruppe = radio.form[radio.name];
                                                    ^^^ this.form
                        ....

                        Ich habe nun ein form vergeben und es funzt auch soweit nur gibt der IE immer noch ein Fehler Objekt erfoderlich.

                        Der Firefox nicht?
                        Der Fehler liegt hier:
                        document.getElementById(radioGruppe[i].value).style.display = 'none';
                        du solltest überprüfen ob das Element überhaupt existiert.
                        Von daher würde ich die Funktion eher so schreiben:

                        function masken(radio) {

                        var radioGruppe = radio.form[radio.name];
                        for(var i = 0; i < radioGruppe.length; i++) {
                          var o = document.getElementById(radioGruppe[i].value);
                          if(o)
                           o.style.display = radioGruppe[i] == radio ? '' : 'none';
                          else
                           alert('Element: ' + radioGruppe[i].value + ' existiert nicht.');
                        }
                        }

                        
                        >   
                        >   
                        > Struppi.  
                          
                        Danke das klappt wunderbar jetzt :)  
                        Gruss Shawna
                        
    2. Hello out there!

      Nein auf der von dir verlinkten Seite passiert das mit Javascript und ohne es aktiviert zu haben kommst du da auch nicht weit.

      Dem Hinweis mangelt es IMHO an Deutlichkeit. Jede Interaktion auf einer Webseite, die mit JavaScript realisiert ist, bedarf einer JavaScript-freien Alternative.* Oder anders gesagt: Das Ausblenden mittels JavaScript ist die Alternative zur ständig sichtbaren Variante.

      See ya up the road,
      Gunnar

      * War das jetzt korrektes Deutsch?

      --
      „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
      1. Hallo Gunnar,

        Jede Interaktion auf einer Webseite, die mit JavaScript realisiert ist, bedarf einer JavaScript-freien Alternative.*

        * War das jetzt korrektes Deutsch?

        Ja, super! Wir wollen ja nicht, dass wir der Genitiv-Objekte (Genitiv-Ergänzungen) verlustig gehen. Ich zumindest mag ihrer gar nicht entbehren.

        Gruß Gernot

  2. Ok ich dachte erst per hidden ist das zu lösen wird es sicher auch sein aber die frage ist wie wird der Radiobutton verlinkt?

    Es ist unhöflich und hier unerwünscht ein Thema mehrmals zu eröffnen

    Struppi.

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

      Es ist unhöflich und hier unerwünscht ein Thema mehrmals zu eröffnen

      Shawna hat gestern nach einer Kosmetik gesucht, derer sie gar nicht bedurft hätte, wenn sie gleich ihr eigentliches Anliegen geschildert hätte. Jetzt haben wir was über Cursor-Manipulationen mit CSS gelernt und etwas über das dynamische Ein- und Ausblenden von Seitenteilen über Javascript. Das hat beides recht wenig miteinander zu tun, das ist also kein Doppelposting, auch wenn Shawna sich darüber noch nicht einmal Gedanken gemacht hat.

      https://forum.selfhtml.org/?t=149528&m=971430

      Gruß Gernot

      1. Hallo nochmal,

        nach einer Kosmetik gesucht, derer sie gar nicht bedurft hätte,

        ohjemine, mein Deutsch lässt nach.

        Es muss natürlich heißen: "_deren_ sie gar nicht bedurft hätte,"

        "Derer" wird nur kataphorisch (vorausweisend) gebraucht.

        Gruß Gernot

      2. ...Das hat beides recht wenig miteinander zu tun, das ist also kein Doppelposting, auch wenn Shawna sich darüber noch nicht einmal Gedanken gemacht hat.

        Das sehe ich anders.

        Das Problem beider Threads hat eine Ursache, nur die Fragestellungen in beiden Threads haben nichts mit dem eigentlichen Problem zu tun, was ja auch dein Themenwechsel in diesem Thread gezeigt hatte.

        Also, da die "Ursache" der Fragen gleich ist, bleibt es für mich ein Doppelposting, dass für mich zumindest auch genau das war, ich hab erst in dem anderen Thread das gelesen und meine Frage nach dem Warum gestellt, aus genau der Überlegung, die in diesem Thread zutage kam. Ich hätte mir also den einen sparen können. Daher auch meine Reaktion.

        Struppi.

        --
        Javascript ist toll (Perl auch!)