Anzeige restlicher Zeichen bei mehreren Formular-Feldern

Ravelli · 21.01.2008, 20:06

Hallo Freunde der Nacht,

ich hoffe, dass Ihr mir bei folgendem Problem helfen könnt:

Derzeit programmiere ich an einem Formular, welches zu jeder TEXTAREA und zu jedem INPUT die verbleibenden Zeichen anzeigen soll. Dazu muss ich den Namen der einzelnen Felder als String an eine JavaScript-Funktion übergeben. Leider klappt das nicht!

Hier der Code der Seite:

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <script type='text/javascript'>
      //<![CDATA[
        function check(form,maxLength,field)
        {
          len=form.field.value.length;
          if (len>maxLength)
          {
            form.field.value=form.field.value.substring(0,maxLength);
            left=0;
          }
          else {left=maxLength-len;}
          form.len.value=left;
        }
      //]]>
    </script>
  </head>
  <body>
    <form method="" action="">
      <table summary="">
        <tr>
          <td>
            Feld1:
          </td>
          <td>
            <input onkeyup="check(this.form,3,'Feld1')" type="text" name="Feld1" maxlength="3" value="" />
          </td>
          <td>
            <input name="len" value="3" disabled="disabled" size="4" />
          </td>
        </tr>
      </table>
    </form>
  </body>
</html>

Das eigentliche Problem liegt in der Zeile

Code:

len=form.field.value.length;

Wenn ich hier zum testen statt der Variablen 'field' direkt den String 'Feld1' eingebe, wird der Wert für 'len' korrekt berrechnet. Allerdings ist das nicht Sinn der Sache, da das Script für mehrere verschiedene Felder eingesetzt werden soll.

Hat jemand eine Idee? Wenn ja, dann schon mal vielen Dank im Voraus!
Und einen schönen Abend,
Ravelli

Adromir · 21.01.2008, 20:16

Gib jedem Feld eine id und benutze getElementById() um das Feld zu bestimmen.

Ravelli · 21.01.2008, 21:20

Hallo Adromir,

vielen Dank für Deine rasche Antwort! Leider habe ich es nicht hin bekommen. Der Verweis vom Skript auf das Feld funktioniert genauso wie zuvor, allerdings ist das eigentliche Problem nicht gelöst - halt das Problem mit der Berechnung von 'len'.

Aber vielleicht meintest Du es ganz anders, daher hier mal der abgewandelte Code:

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <script type='text/javascript'>
      //<![CDATA[
        function check(form,maxLength,field)
        {
          var temp = document.getElementById(field);
          len=form.temp.value.length;
          if (len>maxLength)
          {
            form.temp.value=form.temp.value.substring(0,maxLength);
            left=0;
          }
          else {left=maxLength-len;}
          form.len.value=left;
        }
      //]]>
    </script>
  </head>
  <body>
    <form method="" action="">
      <table summary="">
        <tr>
          <td>
            Feld1:
          </td>
          <td>
            <input onkeyup="check(this.form,3,'Feld1')" id="Feld1" type="text" name="Feld1" maxlength="3" value="" />
          </td>
          <td>
            <input name="len" value="3" disabled="disabled" size="4" />
          </td>
        </tr>
      </table>
    </form>
  </body>
</html>

Rizzo · 21.01.2008, 23:20

Hier hast Du mal ein funktionierendes Beispiel, vielleicht hilft es Dir ja, wenn Du das mal mit deinem Code vergleichst.

Ravelli · 21.01.2008, 23:48

Hallo Rizzo,

vielen Danke für Deine Antwort. Allerdings hilft sie mir auch nicht weiter, da das Beispiel nur das Verarbeiten eines einzelnen Formularfeldes behandelt. Das bekomme ich leicht hin.

Das eigentliche Problem liegt in der Zeile

Code:

len=form.field.value.length;

Das 'field' ist hier ein Objekt, aber an der Stelle muss ein String stehen.
zb. würde diese Zeile korrekt rechnen, wenn ich sie so schreibe:

Code:

len=form.Feld1.value.length;

Allerdings bringt mir das nichts, da ich ja auch Feld2, Feld3, ... FeldX mit dem Skript verarbeiten will.

Das heißt, ich müsste aus dem String-Objekt namens 'field' einen String machen.

Oder?

Gute Nacht,
Ravelli

Cybergreek · 22.01.2008, 00:00

Probier mal folgendes:

HTML-Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <script type='text/javascript'>
      //<![CDATA[
        function check(form,maxLength,field,lenField)
        {
        	var temp = document.getElementById(field);
          len=temp.value.length;
          if (len>maxLength)
          {
            temp.value=form.temp.value.substring(0,maxLength);
            left=0;
          }
          else {left=maxLength-len;}
          myLenField = document.getElementById(lenField);
          myLenField.value=left;
        }
      //]]>
    </script>
  </head>
  <body>
    <form method="" action="">
      <table summary="">
        <tr>
          <td>
            Feld1:
          </td>
          <td>
            <input onkeyup="check(this.form,3,'Feld1','len')" id="Feld1" type="text" name="Feld1" maxlength="3" value="" />
          </td>
          <td>
            <input name="len" id="len" value="3" disabled="disabled" size="4" />
          </td>
        </tr>
        <tr>
          <td>
            Feld1:
          </td>
          <td>
            <input onkeyup="check(this.form,3,'Feld2','len2')" id="Feld2" type="text" name="Feld2" maxlength="3" value="" />
          </td>
          <td>
            <input name="len2" id="len2" value="3" disabled="disabled" size="4" />
          </td>
        </tr>
      </table>
    </form>
  </body>
</html>

Ravelli · 22.01.2008, 00:11

Hallo Cybergreek,

das sieht ja prima aus!

Werde mir mal in Ruhe anschauen, warum und wie das funktioniert.

Vielen Dank dafür!!!

Schönen Gruß aus dem Eggegebirge,
Ravelli

Cybergreek · 22.01.2008, 00:15

Zitat:

Zitat von Ravelli

Werde mir mal in Ruhe anschauen, warum und wie das funktioniert.

Genau der richtige Ansatz

Freut mich, dass es klappt. Viel Spaß damit!

Malleus · 22.01.2008, 12:16

Hallo,

ich hab' mir das ganze nochmal genauer angeschaut und dabei folgendes entdeckt:

PHP-Code:


			
function check(form,maxLength,field,lenField)

{

      var temp = document.getElementById(field);

          len=temp.value.length;

          if (len>maxLength)

          {

            temp.value=form.temp.value.substring(0,maxLength);

            left=0;

          }

          else {left=maxLength-len;}

          myLenField = document.getElementById(lenField);

          myLenField.value=left;

        }

Die "if"-Anweisung ist unnötig, da das Script hier nie hineinspringt. Grund?

PHP-Code:


			
<input onkeyup="check(this.form,3,'Feld1','len')" id="Feld1" type="text" name="Feld1" maxlength="3" value="" />

Das Attribut "maxlength" gibt ja bereits die maximale Anzahl von Zeichen an.
Wäre das Script hineingesprungen. hätte es einen Scriptfehler gegeben:

PHP-Code:


			
            temp.value=form.temp.value.substring(0,maxLength);

"temp" ist eine Objectvariable. Diese kannst Du nicht mit "." an das Form-Objekt anschließen. Das "form" muß nur entfernt werden und dann funktioniert es.

Man könnte das ganze auch so implementieren:

PHP-Code:


			
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <title></title>

    <script type='text/javascript'>

      //<![CDATA[

        function check( myControl )

        {

          var numChars = myControl.maxLength - myControl.value.length;

          

          var fieldIndex = myControl.getAttribute( "name" ).replace( /D/g , "" );

// Der Replace-Ausdruckt löscht alle "Nicht-Zahlen". Übrig bleibt der Index im Feldnamen.

          

          document.getElementsByName( "Length" + fieldIndex )[ 0 ].value = numChars;

// Mit Hilfe des Indexes greife ich dann auf das entsprechende "Restanzeige"-Objekt zu.

        }

      //]]>

    </script>

  </head>

  <body>

    <form method="" action="">

      <table summary="">

        <tr>

          <td>

            Feld1:

          </td>

          <td>

            <input onkeyup="check(this)" type="text" name="Feld1" maxlength="3" value="" />

          </td>

          <td>

            <input name="Length1" value="3" disabled="disabled" size="4" />

          </td>

        </tr>

        <tr>

          <td>

            Feld2:

          </td>

          <td>

            <input onkeyup="check(this)" type="text" name="Feld2" maxlength="6" value="" />

          </td>

          <td>

            <input name="Length2" value="6" disabled="disabled" size="4" />

          </td>

        </tr>



      </table>

    </form>

  </body>

</html>

tschau

Frank

Ravelli · 22.01.2008, 12:38

Hallo Malleus,

vielen Dank für Deine Mühen! Die if-Anweisung benötige ich für TEXTAREAs, die ich auf z.B. 1000 Zeichen begrenzen möchte. Obiger Code war nur als Beispiel gedacht, um es einfach zu halten. Das ganze kommt nachher in ein Formular mit ca 15 verschiedenen Feldern.

Hier ein Blick auf die Baustelle:
http://www.paderdesign.de/demo.htm

Deinen Code werde ich mir heute Abend mal in Ruhe anschauen. Vielleicht kann ich meinen dann noch etwas abspecken! ;-)

Sonnigen Gruß aus Altenbeken,
Ravelli

Malleus · 22.01.2008, 12:52

Erwischt! An Textareas hab' ich nicht gedacht.

Trotzdem stellt sich mir die Frage, ob das Script bei Dir mit den Textareas funktioniert hat.

Tschau

Frank

Nachtrag: Hab' gerade auf Deiner Seite gesehen, daß Du's angepaßt hast!

Ravelli · 22.01.2008, 12:59

Auf Anhieb hat die if-Anweisung nicht funktioniert. Ich musste sie noch ein wenig anpassen, halt so, wie es Cybergreek auch mit den Script-Zeilen zuvor getan hat.

Die if-Anweisung sieht dann so aus:

Code:

if (len>maxLength)
              {
                temp.value=temp.value.substring(0,maxLength);
                left=0;
              }

Gruß,
Ravelli