Olla: Textareas deaktivieren

Hallo Forum,

Ich hab es geschafft, bei 2 Textareas die 2. zu deaktivieren, wenn in die erste etwas eingetragen ist.

  
<script language="javascript" type="text/javascript">  
 <!--  
 function disable_textareas() {  
   if(document.getElementsByName('PF')[0] != '')  
   {  
     document.getElementsByName('PF')[1].disabled = true;  
   }  
 }  

<textarea name="PF" onchange="disable_textareas()" ></textarea>  
<textarea name="PF"></textarea>

Was mache ich aber, wenn ich die Anzahl der Textareas gar nicht vorher kenne und auch ein Eitrag in Textarea 5 die ersten 4 Textareas und alle Textareas von 5 bis n deaktivieren soll?

Danke für Hilfe, Oliver

  1. Was mache ich aber, wenn ich die Anzahl der Textareas gar nicht vorher kenne und auch ein Eitrag in Textarea 5 die ersten 4 Textareas und alle Textareas von 5 bis n deaktivieren soll?

    Natürlich von 6 bis n.

    Oliver

    1. mit document.getElementsByName("PF").length erhältst du die Anzahl

      1. mit document.getElementsByName("PF").length erhältst du die Anzahl

        ..weil ich mich nicht herantasten kann. Andauernd stürzt bei nachfolgendem Code mein Editor ab:

          
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
        <HTML>  
         <HEAD>  
          <TITLE> New Document </TITLE>  
          <META NAME="Generator" CONTENT="EditPlus">  
          <META NAME="Author" CONTENT="">  
          <META NAME="Keywords" CONTENT="">  
          <META NAME="Description" CONTENT="">  
         </HEAD>  
          
         <BODY>  
          <script language="javascript" type="text/javascript">  
         <!--  
         function disable_textareas() {  
           for (var i = 0; document.getElementsByName('PF').length; i++){  
           if(document.getElementsByName('PF')[i] != '')  
           {  
             document.getElementsByName('PF')[1].disabled = true;  
           }  
         }  
         }  
          </script>  
          
          
        <textarea name="PF" onchange="disable_textareas()" ></textarea>  
        <textarea name="PF" onchange="disable_textareas()" ></textarea>  
         </BODY>  
        </HTML>  
          
          
        Wäre ja eh erst eine Annäherung gewesen (weil document.getElementsByName('PF')[1].disabled = true; ja nicht alle anderen disabled), aber mein Editor machts nicht mit :-(  
          
        Olla  
          
        
        
        1. Hi,

          Andauernd stürzt bei nachfolgendem Code mein Editor ab:

          for (var i = 0; document.getElementsByName('PF').length; i++){

          Diese Schleife hat eine "Weiterlauf-Bedingung", die nie* false wird - also läuft sie endlos.

          Du willst, dass i von 0 bis Anzahl der Elemente minus 1 läuft, also so lange, wie i kleiner als die Anzahl ist:

          for (var i = 0; i < document.getElementsByName('PF').length; i++){ ... }

          Und das kann man auch so schreiben:

          for (var i = 0, l = document.getElementsByName('PF').length; i < l; i++){ ... }

          Es wird eine zusätzliche (ebenfalls lokale) Variable l für die Anzahl der Elemente (length, deswegen bei mir 'l') eingeführt, und i dann jeweils mit dieser verglichen. Das ist in so fern ein bisschen "schöner", als damit der Ausdruck document.getElementsByName('PF').length nicht bei jedem Schleifendurchlauf erneut ausgewertet werden muss.

          * sofern length ungleich 0 ist.

          MfG ChrisB

          --
          Light travels faster than sound - that's why most people appear bright until you hear them speak.
          1. »»    for (var i = 0; document.getElementsByName('PF').length; i++){

            Diese Schleife hat eine "Weiterlauf-Bedingung", die nie* false wird - also läuft sie endlos.

            Hallo Chris,

            ach Du K...e, da hätt ich auch selber gut drauf kommen dürfen ;-)

            Danke für Deine Hilfe.

            Jetzt habe ich eine Lösung, mit der ich aber immer noch nicht so 100pro zufrieden bin, weil alles disabled wird, sobald ich mit dem Mauszeiger die aktive Textarea verlasse.

              
            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
            <HTML>  
             <HEAD>  
              <TITLE> New Document </TITLE>  
              <META NAME="Generator" CONTENT="EditPlus">  
              <META NAME="Author" CONTENT="">  
              <META NAME="Keywords" CONTENT="">  
              <META NAME="Description" CONTENT="">  
             </HEAD>  
              
             <BODY>  
              <script language="javascript" type="text/javascript">  
             <!--  
             function disable_textareas() {  
            for (var i = 0; i < document.getElementsByName('PF').length; i++){  
            if(document.getElementsByName('PF')[i] != '')  
               {  
            var e = i;  
            for (var q = 0; q < document.getElementsByName('PF').length; q++){  
            if (q!=e)  
            {  
            document.getElementsByName('PF')[q].disabled = true;  
              
            }  
            	 }  
               }  
             }  
             }  
              </script>  
              
            <textarea name="PF" onchange="disable_textareas()" ></textarea><BR>  
            <textarea name="PF" onchange="disable_textareas()" ></textarea><BR>  
            <textarea name="PF" onchange="disable_textareas()" ></textarea><BR>  
            <textarea name="PF" onchange="disable_textareas()" ></textarea><BR>  
            <textarea name="PF" onchange="disable_textareas()" ></textarea>  
             </BODY>  
            </HTML>  
            
            

            Kann ich die einmal aktive Textarea aktiv belassen und alle anderen dennoch disablen?

            Grüße, Olla

            1. Hi,

              if(document.getElementsByName('PF')[i] != '')

              Was willst du denn mit dieser Abfrage bezwecken?
              Ein Formularfeld wird nie einem Leerstring entsprechen.

              Kann ich die einmal aktive Textarea aktiv belassen und alle anderen dennoch disablen?

              Übergebe beim Aufruf deiner Funktion die Referenz auf das Objekt, auf dem diese aufgerufen wird, als Parameter - das geht in diesem Kontext ganz einfach mittels this:

              <textarea name="PF" onchange="disable_textareas(this)"></textarea>

              Und in deiner Funktion (deren Kopf du natürlich so erweiterst, dass sie diesen Parameter auch entgegen nimmt) vergleichst du dann die jeweils aktuelle Textarea (also document.getElementsByName('PF')[SchleifenZaehler]) mit der, deren Referenz als Parameter übergeben wurde - und nur, wenn die nicht gleich sind, dann setzt du das disabled-Attribut auf true.

              MfG ChrisB

              --
              Light travels faster than sound - that's why most people appear bright until you hear them speak.
              1. Hi,

                »» if(document.getElementsByName('PF')[i] != '')

                Was willst du denn mit dieser Abfrage bezwecken?
                Ein Formularfeld wird nie einem Leerstring entsprechen.

                Hallo Chris,

                auch nicht bei allerersten Aufruf? Dann ist doch die Textarea leer?

                Übergebe beim Aufruf deiner Funktion die Referenz auf das Objekt, auf dem diese aufgerufen wird, als Parameter - das geht in diesem Kontext ganz einfach mittels this

                Was genau übergebe ich mit "this"? Ich hab gesucht und geforscht, bin aber so unbeholfen in JS, dass ich nur herausgefunden habe, dass ich eine Referenz übergebe. Und das hast Du schon in Deinem Post geschrieben. Ein Alert bringt nur "Object" als Ergebnis. Und ich weiß nichts damit anzufangen.

                Und in deiner Funktion (deren Kopf du natürlich so erweiterst, dass sie diesen Parameter auch entgegen nimmt)

                Hab ich gemacht. Weiß es aber nicht auszuwerten :-(

                »»vergleichst du dann die jeweils aktuelle Textarea (also document.getElementsByName('PF')[SchleifenZaehler]) mit der, deren Referenz als Parameter übergeben wurde - und nur, wenn die nicht gleich sind, dann setzt du das disabled-Attribut auf true.

                Dennoch war Dein Post absolut zielführend. Ich hab es im Prinzip genau so gemacht, wie Du vorschlägst. Nur etwas anders umgesetzt.

                  
                 <BODY>  
                  <script language="javascript" type="text/javascript">  
                 <!--  
                function disable_textareas(p1) {  
                for (var i = 0; i < document.getElementsByName('PF').length; i++)  
                {  
                if (i!=p1) {  
                document.getElementsByName('PF')[i].disabled = true;  
                }  
                 }  
                 }  
                  </script>  
                  
                <textarea name="PF" onchange="disable_textareas('0')" ></textarea><BR>  
                <textarea name="PF" onchange="disable_textareas('1')" ></textarea><BR>  
                <textarea name="PF" onchange="disable_textareas('2')" ></textarea><BR>  
                <textarea name="PF" onchange="disable_textareas('3')" ></textarea><BR>  
                <textarea name="PF" onchange="disable_textareas('4')" ></textarea>  
                 </BODY>  
                </HTML>  
                
                

                Da die Seite eh über php generiert wird, ist es unproblematisch, anstelle von "this" gleich die Indexnummer zu übergeben.

                Trotzdem hätte ich gerne mal die Originallösung gehabt. Kannst Du mir sie mal geben, damit ich weiterlerne? Ist ja keine Faulheit oder so. Denn meine Lösung funktioniert ja dank Deiner Hilfe perfekt.

                Danke und Grüße, Olla

                1. Hi,

                  »» if(document.getElementsByName('PF')[i] != '')

                  Was willst du denn mit dieser Abfrage bezwecken?
                  Ein Formularfeld wird nie einem Leerstring entsprechen.

                  auch nicht bei allerersten Aufruf? Dann ist doch die Textarea leer?

                  Dann ist das value-Attribut vielleicht leer, ja - aber auf dieses greifst du hier ja nicht zu.

                  Übergebe beim Aufruf deiner Funktion die Referenz auf das Objekt, auf dem diese aufgerufen wird, als Parameter - das geht in diesem Kontext ganz einfach mittels this

                  Was genau übergebe ich mit "this"? Ich hab gesucht und geforscht, bin aber so unbeholfen in JS, dass ich nur herausgefunden habe, dass ich eine Referenz übergebe. Und das hast Du schon in Deinem Post geschrieben. Ein Alert bringt nur "Object" als Ergebnis. Und ich weiß nichts damit anzufangen.

                  Eine Referenz ist etwas, das - nun ja, irgendworauf "referenziert" :-)
                  Also eine Art "Zeiger".

                  document.getElementsByName('PF')[i] - das liefert dir eine Referenz auf das (i+1)-te Formulerfeld mit Namen "PF".

                  Wenn du dich direkt "am" Formularfeld befindest - und das tust du mit dem im textarea-Tag notierten Eventhandler - dann liefert this ebenso eine Referenz auf eben dieses textarea-Element.

                  Die Referenz dient einfach dazu, von JavaScript aus HTML-Elemente anzusprechen.
                  (Und du nutzt ja auch schon Referenzen, wenn auch ohne es zu wissen - an der Stelle, wo du schreibst
                  document.getElementsByName('PF')[i].disabled = true;

                  • document.getElementsByName('PF')[i] referenziert eine der Textareas, und indem du an diese Referenz mit einem Punkt noch disabled anhängst, kannst du dann auf die disabled-Eigenschaft eben dieser Textarea zugreifen.)

                  Und beim alert bekommst du nur "[object]" oder sowas ähnliches (Browser wie FireFox oder Opera würden dir sowas wie [object HTMLFormElement] o.ä. liefern) - weil ein textarea-Element nun mal etwas "abstraktes" ist, dass sich nicht als Textstring (und nur solche gibt alert ja aus) darstellen lässt.

                  Und in deiner Funktion (deren Kopf du natürlich so erweiterst, dass sie diesen Parameter auch entgegen nimmt)

                  Hab ich gemacht. Weiß es aber nicht auszuwerten :-(

                  document.getElementsByName('PF')[i] liefert dir eine Referenz auf eine der Textareas, und wenn du this als Parameter übergeben hättest, dann würde dieser Parameter auch eine Referenz auf eine der Textareas darstellen.
                  Du müsstest also nur noch feststellen, ob beide Referenzen sich auf das gleiche Objekt beziehen - das geht mit einem ganz normalen Vergleich mittels des == Operators, bzw. negiert mit !=

                  Dennoch war Dein Post absolut zielführend. Ich hab es im Prinzip genau so gemacht, wie Du vorschlägst. Nur etwas anders umgesetzt.

                  So geht es natürlich auch.
                  Es gibt selten eine "ideale" Lösung, es führen immer viele Wege nach Rom.
                  Und an einer Lösung, die du mit ein paar Hinweisen selbst erarbeitet hast, lernst du ja auch mehr :-)

                  Trotzdem hätte ich gerne mal die Originallösung gehabt. Kannst Du mir sie mal geben, damit ich weiterlerne? Ist ja keine Faulheit oder so. Denn meine Lösung funktioniert ja dank Deiner Hilfe perfekt.

                  Das wäre so in etwa die Umsetzung dessen, was ich im Sinne hatte:

                  function disable_textareas(textareaAufDerIchAufgerufenWurde) {  
                    for(var i = 0, l = document.getElementsByName('PF').length; i < l; i++) {  
                      var aktuelleTextarea = document.getElementsByName('PF')[i];  
                      if(aktuelleTextarea != textareaAufDerIchAufgerufenWurde) {  
                        aktuelleTextarea.disabled = true;  
                      }  
                    }  
                  }
                  

                  Und Aufruf dann wie gesagt über
                  <textarea name="PF" onchange="disable_textareas(this)" ></textarea>

                  (Beachte hier noch, dass ich den Parameter an der Stelle, wo ich die Funktion *definiere*, nicht this genannt habe - this ist ein "reserviertes Wort" mit bestimmter Bedeutung, und würde innerhalb der FUnktion ggf. etwas anderes meinen, wenn ich es dort verwenden würde. Also nenne ich den Parameter hier textareaAufDerIchAufgerufenWurde - und beim *Aufruf* der Funktion schreibe ich dann this in die Klammern, um an dieser Stelle den Inhalt von this an die Funktion zu übergeben.)

                  MfG ChrisB

                  --
                  Light travels faster than sound - that's why most people appear bright until you hear them speak.
                  1. Hi Chris,

                    document.getElementsByName('PF')[i] liefert dir eine Referenz auf eine der Textareas, und wenn du this als Parameter übergeben hättest, dann würde dieser Parameter auch eine Referenz auf eine der Textareas darstellen.
                    Du müsstest also nur noch feststellen, ob beide Referenzen sich auf das gleiche Objekt beziehen - das geht mit einem ganz normalen Vergleich mittels des == Operators, bzw. negiert mit !=

                    Ok. Verstanden. Aber was kann ich mit dieser Referenz machen, außer sie zu haben und/oder zu vergleichen?
                    Im Moment ist das für mich nur eine Blackbox und ich weiß nichts damit zu tun (außer zu vergleichen). Wie komme ich über diese Referenz z.B. an den Formularfeldinhalt oder den "Index" (hoffe, Du weißt, was ich damit meine, ich kenne die ganzen Fachbegriffe nicht).

                    »» Dennoch war Dein Post absolut zielführend. Ich hab es im Prinzip genau so gemacht, wie Du vorschlägst. Nur etwas anders umgesetzt.

                    So geht es natürlich auch.
                    Es gibt selten eine "ideale" Lösung, es führen immer viele Wege nach Rom.
                    Und an einer Lösung, die du mit ein paar Hinweisen selbst erarbeitet hast, lernst du ja auch mehr :-)

                    Deshalb bin ich auch doppelt froh über Deine Hilfe und zieh den Hut davor, wieviel Arbeit Du Dir dabei machst!

                    Das wäre so in etwa die Umsetzung dessen, was ich im Sinne hatte:

                    Habe Deine Lösung ausprobiert. Sie hat den Nachteil, dass alle Textareas disabled werden, sobald der Aufruf der Funktion erfolgt.

                    Warum ist das so und in meiner Lösung bleibt die aktive Textarea auch aktiv?

                    Grüße, Olla

                    1. Hi,

                      Ok. Verstanden. Aber was kann ich mit dieser Referenz machen, außer sie zu haben und/oder zu vergleichen?
                      Im Moment ist das für mich nur eine Blackbox und ich weiß nichts damit zu tun (außer zu vergleichen). Wie komme ich über diese Referenz z.B. an den Formularfeldinhalt

                      In dem du auf den Inhalt seines value-Attributes zugreifst (vor allem bei Textfeldern, auch bei einigen anderen; die Seite erklärt auch, was Formularfelder im Allgemeinen noch so für Eigenschaften habe).

                      oder den "Index" (hoffe, Du weißt, was ich damit meine, ich kenne die ganzen Fachbegriffe nicht).

                      Nein, sorry, weiss ich nicht - welchen "Index"?

                      Wenn du auf Formularelemente über getElementsByName oder auch die auf der verlinkten Seite oben genannten Schreibweisen zugreifst - dann sind sie innerhalb der sog. NodeList ("Liste von Knoten"; Elemente in einem Dokumentenbaum bezeichnet man als Knoten) zwar über einen nullbasierten Index ansprechbar - aber sie selber "haben" dadurch keinen Index. Dieser ist lediglich ihre Position in der jeweiligen Liste. Und da die, je nach Liste, unterschiedlich sein kann (per getElementsByName könntest du z.B. *alle* [Formular-]Elemente auf einer Seite ermittelt haben, mit einer anderen Zugriffsweise nur die innerhalb eines bestimmten Formulars), gibt es auch keinen "eindeutigen Index", der eine direkte Eigenschaft des jeweiligen Formularelements sein könnte.

                      Habe Deine Lösung ausprobiert. Sie hat den Nachteil, dass alle Textareas disabled werden, sobald der Aufruf der Funktion erfolgt.

                      Das sollte nicht so sein; vielleicht habe ich beim theoretischen Überlegen einen Fehler gemacht, oder du beim Einbau - kannst du mal zeigen, wie das Ganze bei dir fertig eingebaut aussieht (vorzugsweise ein online-Beispiel)?

                      MfG ChrisB

                      --
                      Light travels faster than sound - that's why most people appear bright until you hear them speak.
                      1. Hi Chris,

                        In dem du auf den Inhalt seines value-Attributes zugreifst (vor allem bei Textfeldern, auch bei einigen anderen; die Seite erklärt auch, was Formularfelder im Allgemeinen noch so für Eigenschaften habe).

                        OK. So wird ein Schuh draus. :-)
                        Ich habe Javascript  bisher immer etwas stiefmütterlich behandelt... war ein  Fehler. JS kann echt ein paar Dinge, die man serverseitig nicht lösen kann :-)

                        »» oder den "Index" (hoffe, Du weißt, was ich damit meine, ich kenne die ganzen Fachbegriffe nicht).

                        Nein, sorry, weiss ich nicht - welchen "Index"?

                        Ich meinte die fortlaufende Nummerierung der Textareas (in meinem Fall durch die while-schleife in php)

                        Wenn du auf Formularelemente über getElementsByName oder auch die auf der verlinkten Seite oben genannten Schreibweisen zugreifst - dann sind sie innerhalb der sog. NodeList ("Liste von Knoten"; Elemente in einem Dokumentenbaum bezeichnet man als Knoten) zwar über einen nullbasierten Index ansprechbar - aber sie selber "haben" dadurch keinen Index. Dieser ist lediglich ihre Position in der jeweiligen Liste. Und da die, je nach Liste, unterschiedlich sein kann (per getElementsByName könntest du z.B. *alle* [Formular-]Elemente auf einer Seite ermittelt haben, mit einer anderen Zugriffsweise nur die innerhalb eines bestimmten Formulars), gibt es auch keinen "eindeutigen Index", der eine direkte Eigenschaft des jeweiligen Formularelements sein könnte.

                        Muß das jetzt mal ganz zitieren. Und dazu was fragen:

                        1. Wo lernt man sowas? Informatik-Studium?
                        2. Hab ichs (glaube ich) verstanden. Danke für diese Erklärung.

                        »» Habe Deine Lösung ausprobiert. Sie hat den Nachteil, dass alle Textareas disabled werden, sobald der Aufruf der Funktion erfolgt.

                        Das sollte nicht so sein;

                        Ist aber so. Versuchs doch mal ;-)

                        vielleicht habe ich beim theoretischen Überlegen einen Fehler gemacht, oder du beim Einbau - kannst du mal zeigen, wie das Ganze bei dir fertig eingebaut aussieht (vorzugsweise ein online-Beispiel)?

                        Ok. Ich habs in meinem Editor ausprobiert (EditPlus2) und über die Vorschau festgestellt. Habe online natürlich meine Lösung genommen

                        a) weil ich sie früher hatte
                        b) weil sie genau das macht, was ich will.

                        Aber ohne Deine freundlich Hilfe wäre ich bei weitem

                        a) weder auf meine Lösung gekommen
                        b) noch hätte ich so viel in so kurzer Zeit gelernt

                        Deshalb 1000 Dank an Dich! Find ich mega erstaunlich, wieviel Mühe Du Dir für (in diesem Fall mich) machst. Hut ab!

                        Grüße, Olla

                        P.S: Das ganze Programm läuft übrigens in einem Intranet.

                        MfG ChrisB

                        1. Mahlzeit Olla,

                          JS kann echt ein paar Dinge, die man serverseitig nicht lösen kann :-)

                          Andererseits kann es viele Dinge nicht, die man besser serverseitig löst.

                          1. Wo lernt man sowas? Informatik-Studium?

                          Nö - was hat das mit Informatik zu tun? Sowas lernt man z.B. in http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_name@title=SELFHTML. :-)

                          MfG,
                          EKKi

                          --
                          sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|