Ankündigung

Einklappen
Keine Ankündigung bisher.

Zählfunktion in einem Formular unterbringen

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Zählfunktion in einem Formular unterbringen

    Dieser Code enthält 11 Input-Felder (jeweils mit formular method=post umschachtelt), wobei jedem Feld eine function Zählen() zugeordnet ist.
    Die function zählt per javascript die eingegebenen Zeichen. Die Anzahl wird in einem weiteren Input-Feld neben dem jeweiligen Input-Feld wiedergegeben.

    Kann man diese Java-Funktion irgendwie so verschachteln, dass ich mit einem Button alle abgesendeten Input-Felder aufrufen kann? Dadurch, dass jedes Input-Feld ein eigenes Formular zum Zeichen-zählen braucht, muss der Button zum absenden aller Input-Felder außerhalb der jeweiligen Formulare sein. Und so funktioniert das nicht :/

    Code:
    <script type="text/javascript">
    function zaehlen() {
     anz = document.formular.Antwort.value.length;
     document.formular.anzeige.value = anz;
     }
    function zaehlen2() {
     anz = document.formular2.Antwort2.value.length;
     document.formular2.anzeige2.value = anz;
     }
     function zaehlen3() {
     anz = document.formular3.Antwort3.value.length;
     document.formular3.anzeige3.value = anz;
     }
     function zaehlen4() {
     anz = document.formular4.Antwort4.value.length;
     document.formular4.anzeige4.value = anz;
     }
     function zaehlen5() {
     anz = document.formular5.Antwort5.value.length;
     document.formular5.anzeige5.value = anz;
     }
     function zaehlen6() {
     anz = document.formular6.Antwort6.value.length;
     document.formular6.anzeige6.value = anz;
     }
     function zaehlen7() {
     anz = document.formular7.Antwort7.value.length;
     document.formular7.anzeige7.value = anz;
     }
     function zaehlen8() {
     anz = document.formular8.Antwort8.value.length;
     document.formular8.anzeige8.value = anz;
     }
     function zaehlen9() {
     anz = document.formular9.Antwort9.value.length;
     document.formular9.anzeige9.value = anz;
     }
     function zaehlen10() {
     anz = document.formular10.Antwort10.value.length;
     document.formular10.anzeige10.value = anz;
     }
     function zaehlen11() {
     anz = document.formular11.Antwort11.value.length;
     document.formular11.anzeige11.value = anz;
     }
    </script>
    <form method="post"  name="formular" onKeyup="zaehlen()">
    <h3>Frage: <input name="Antwort" id="Antwort" rows="4" cols="40" ></input>
    <input type="text" name="anzeige" size="3"></h3>
    </form>
    
    <form method="post" name="formular2" onKeyup="zaehlen2()">
    <h3>Antwort 1: <input name="Antwort2" id="Antwort2" rows="4" cols="40" ></input>
    <input type="text" name="anzeige2" size="3">
    </form></h3>
    <form method="post"  name="formular3" onKeyup="zaehlen3()">
    <h3>Antwort 2: <input name="Antwort3" id="Antwort3" rows="4" cols="40" ></input>
    <input type="text" name="anzeige3" size="3">
    </form></h3>
    <form method="post"  name="formular4" onKeyup="zaehlen4()">
    <h3>Antwort 3: <input name="Antwort4" id="Antwort4" rows="4" cols="40" ></input>
    <input type="text" name="anzeige4" size="3">
    </form></h3>
    <form method="post"  name="formular5" onKeyup="zaehlen5()">
    <h3>Antwort 4: <input name="Antwort5" id="Antwort5" rows="4" cols="40" ></input>
    <input type="text" name="anzeige5" size="3">
    </form></h3>
    <form method="post"  name="formular6" onKeyup="zaehlen6()">
    <h3>Antwort 5: <input name="Antwort6" id="Antwort6" rows="4" cols="40" ></input>
    <input type="text" name="anzeige6" size="3">
    </form></h3>
    <form method="post"  name="formular7" onKeyup="zaehlen7()">
    <h3>Antwort 6: <input name="Antwort7" id="Antwort7" rows="4" cols="40" ></input>
    <input type="text" name="anzeige7" size="3">
    </form></h3>
    <form method="post"  name="formular8" onKeyup="zaehlen8()">
    <h3>Antwort 7: <input name="Antwort8" id="Antwort8" rows="4" cols="40" ></input>
    <input type="text" name="anzeige8" size="3">
    </form></h3>
    <form method="post"  name="formular9" onKeyup="zaehlen9()">
    <h3>Antwort 8: <input name="Antwort9" id="Antwort9" rows="4" cols="40" ></input>
    <input type="text" name="anzeige9" size="3">
    </form></h3>
    <form method="post"  name="formular10" onKeyup="zaehlen10()">
    <h3>Antwort 9: <input name="Antwort10" id="Antwort10" rows="4" cols="40" ></input>
    <input type="text" name="anzeige10" size="3">
    </form></h3>
    <form method="post"  name="formular11" onKeyup="zaehlen11()">
    <h3>Antwort 10: <input name="Antwort11" id="Antwort11" rows="4" cols="40" ></input>
    <input type="text" name="anzeige11" size="3">
    </form></h3>

  • #2
    Kann man diese Java-Funktion irgendwie so verschachteln
    JavaScript, nicht Java.

    dass ich mit einem Button alle abgesendeten Input-Felder aufrufen kann?
    Nach dem Absenden kannst du auf der Seite eh nix mehr machen. Und da jedes Feld ein eigenes Formular hat, kannst du auch nur höchstens ein Input-Feld senden.

    Dadurch, dass jedes Input-Feld ein eigenes Formular zum Zeichen-zählen braucht
    Das ist lediglich eine Restriktion von dir. Zum Zeichenzählen braucht man kein Formular

    der Button zum absenden aller Input-Felder außerhalb der jeweiligen Formulare sein. Und so funktioniert das nicht
    Das ist korrekt, du kannst nur ein einziges deiner Formulare absenden.

    Kommentar


    • #3
      ein kleines Beispiel, wenn ich richtig verstanden habe was Du meinst...

      HTML-Code:
      <!doctype html>
      <meta charset="UTF-8">
      <title>Zählen</title>
      <form>
          <input type = 'text'><b></b><br>
          <input type = 'text'><b></b><br>
          <input type = 'text'><b></b><br>
      </form>
      <script>
          Array.from(document.querySelectorAll('input')).forEach(function(_){
              _.addEventListener('keyup', function(){
                  _.nextSibling.innerHTML=_.value.length;
              });
          });
      </script>

      Kommentar


      • #4
        Zitat von kaminbausatz Beitrag anzeigen
        ein kleines Beispiel, wenn ich richtig verstanden habe was Du meinst...

        HTML-Code:
        <!doctype html>
        <meta charset="UTF-8">
        <title>Zählen</title>
        <form>
        <input type = 'text'><b></b><br>
        <input type = 'text'><b></b><br>
        <input type = 'text'><b></b><br>
        </form>
        <script>
        Array.from(document.querySelectorAll('input')).forEach(function(_){
        _.addEventListener('keyup', function(){
        _.nextSibling.innerHTML=_.value.length;
        });
        });
        </script>
        Das ist genau das was ich meinte. Danke

        Kommentar


        • #5
          Zitat von kaminbausatz Beitrag anzeigen
          ein kleines Beispiel, wenn ich richtig verstanden habe was Du meinst...

          HTML-Code:
          <!doctype html>
          <meta charset="UTF-8">
          <title>Zählen</title>
          <form>
          <input type = 'text'><b></b><br>
          <input type = 'text'><b></b><br>
          <input type = 'text'><b></b><br>
          </form>
          <script>
          Array.from(document.querySelectorAll('input')).forEach(function(_){
          _.addEventListener('keyup', function(){
          _.nextSibling.innerHTML=_.value.length;
          });
          });
          </script>
          Wie immer eine pragmatisch kurze und knappe Antwort von Dir. Es fehlen die tags html body habe es deswegen vom HTML5 Validator prüfen lassen. Es ist tatsächlich valide ???

          Kommentar


          • #6
            Es ist tatsächlich valide ???
            Das war auch schon in HTML 4 (und vorher) so. Warum sollte das für HTML5 geändert worden sein?

            Kommentar


            • #7
              Diese tags sind optional - ich setze sie manchmal, manchmal aber auch nicht, je nach Tageslaune.

              Kommentar


              • #8
                Zitat von phpnovi Beitrag anzeigen

                Wie immer eine pragmatisch kurze und knappe Antwort von Dir. Es fehlen die tags html body habe es deswegen vom HTML5 Validator prüfen lassen. Es ist tatsächlich valide ???
                Die tags html body werden ganz am Anfang des Codes an einer anderen Stelle (zwischendurch könnte es andere Code oder <Body> Abschnitte geben) geöffnet.

                Es ist valide.

                Ich versuche jetzt noch den Code anzupassen und zu konfigurieren, beispielsweise ein Leerzeichen zwischen Input und Zähler zu setzen und die Schriftfarbe zu ändern, falls eine bestimmte Zeichenanzahl erreicht ist.

                Kommentar


                • #9
                  Wenn man aber mit der Maus was reinkopiert wird nicht gezählt.
                  Will man das auch haben dann einfach keyup gegen input tauschen.

                  Kommentar


                  • #10
                    Mit jQuery würde ich so etwas versuchen:

                    HTML-Code:
                    <form method="post">
                        Frage 1:
                        <textarea name="Antwort" rows="4" cols="40" class="count-text" data-count-target="#question1-count" ></textarea>
                        <input type="text" name="anzeige" id="question1-count" size="3">
                    </form>
                    
                    <form method="post">
                        Frage 2:
                        <textarea name="Antwort" rows="4" cols="40" class="count-text" data-count-target="#question2-count" ></textarea>
                        <input type="text" name="anzeige" id="question2-count" size="3">
                    </form>
                    
                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
                    <script>
                    jQuery('form').on('input', '.count-text', function() {
                        var element = jQuery(this);
                        var countTarget = jQuery(element.data('count-target'));
                        countTarget.val(element.val().length);
                    });
                    </script>

                    Kommentar


                    • #11
                      Zitat von Blar Beitrag anzeigen
                      Mit jQuery würde ich so etwas versuchen:
                      Wenn Du das so aufwändig gestalten willst, würde ich über vue nachdenken....

                      HTML-Code:
                      <!doctype html>
                      <meta charset="UTF-8">
                      <title>Sample</title>
                      <script src="https://unpkg.com/vue"></script>
                      <div id="app">
                        <input v-model="message"><p>{{ message.length }}</p>
                      </div>
                      <script>
                      var app = new Vue({el: '#app',data: {message: ''}})
                      </script>

                      Kommentar


                      • #12
                        Zitat von kaminbausatz Beitrag anzeigen
                        ein kleines Beispiel, wenn ich richtig verstanden habe was Du meinst...

                        HTML-Code:
                        <!doctype html>
                        <meta charset="UTF-8">
                        <title>Zählen</title>
                        <form>
                        <input type = 'text'><b></b><br>
                        <input type = 'text'><b></b><br>
                        <input type = 'text'><b></b><br>
                        </form>
                        <script>
                        Array.from(document.querySelectorAll('input')).forEach(function(_){
                        _.addEventListener('keyup', function(){
                        _.nextSibling.innerHTML=_.value.length;
                        });
                        });
                        </script>
                        Hallo,

                        der Code ist gut aber ich habe ein Tooltipp und möchte das innerhab dessen ausheben, wie mache ich das?

                        HTML-Code:
                        <form>
                        <input type = 'text' class='tooltipp' title='Verwendete Zeichen: <span>(Zeichenzahl)</span>'><br>
                        <input type = 'text' class='tooltipp' title='Verwendete Zeichen: <span>(Zeichenzahl)</span>'><br>
                        <input type = 'text' class='tooltipp' title='Verwendete Zeichen: <span>(Zeichenzahl)</span>'><br>
                        </form>
                        <script>
                        Array.from(document.querySelectorAll('input')).forEach(function(_){
                        _.addEventListener('keyup', function(){
                        _.nextSibling.innerHTML=_.value.length;
                        });
                        });
                        </script>
                        LG
                        Thomas

                        Kommentar

                        Lädt...
                        X