kostenloser Webspace werbefrei: lima-city


mehrere Teaxtareas durch JS Funktion prüfen

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    anlagegeld

    anlagegeld hat kostenlosen Webspace.

    Hallo

    ich habe ein Formular mit mehreren <textarea>
    und möchte für bestimmte Textareas nur eine gewisse Anzahl Zeichen zulassen,

    ich habe es bisher einfac in zwei Funktionen gepackt
    aber die Frage ist, wie kann ich das mit nur einer Funktion machen
    so dass bei Klick in das Formularfeld die entsprechenden Ein-/Ausgabe Werte (name, id) angesprochen werden

    ich habe es mit this versucht, aber ohne Erfolg
    hier das Script mit den 2 Funktionen (die ich gerne als eine hätte, bzw. dynamisch
    so dass ich nicht für jedes weitere Textfeld eine eitere Funktion erstellen muss

    <script type="text/javascript">
    //<![CDATA[ 
    function countDigits1(){ 
    	
    	var maxDigits = 500; //maximale Zeichenanzahl
    	var areaString = document.forms[0].mytextfeld1.value;
    	var currLength = areaString.length + 1;
    	var restLength = maxDigits - areaString.length;
    	if (restLength < 0) { restLength = 0; }
    	
    	document.getElementById("mytextfeld1").innerHTML = restLength;
    	
    	if (areaString.length >= maxDigits) { 
    	//die folgende Zeile entfernt alle Zeichen die groesser als maxDigits sind
    	document.forms[0].mytextfeld1.value = document.forms[0].mytextfeld1.value.substring(0,maxDigits);
    	}
    
    }
    
    function countDigits2(){ 
    	
    	var maxDigits = 200; //maximale Zeichenanzahl
    	var areaString = document.forms[0].mytextfeld2.value;
    	var currLength = areaString.length + 1;
    	var restLength = maxDigits - areaString.length;
    	if (restLength < 0) { restLength = 0; }
    	
    	document.getElementById("mytextfeld2").innerHTML = restLength;
    	
    	if (areaString.length >= maxDigits) { 
    	//die folgende Zeile entfernt alle Zeichen die groesser als maxDigits sind
    	document.forms[0].mytextfeld2.value = document.forms[0].mytextfeld2.value.substring(0,maxDigits);
    	}
    
    }
    
    //]]> 
    </script>
    
    ...
    
    
    <textarea name="mytextfeld1" cols="64" rows="6" onKeyUp="countDigits1()" onClick="countDigits1()"></textarea>
    <p>Noch <span id="mytextfeld1" class="counter">500</span> Zeichen f&uuml;r die Beschreibung </p>
    
    
    <textarea name="mytextfeld2" cols="64" rows="6" onKeyUp="countDigits2()" onClick="countDigits2()"></textarea>
    <p>Noch <span id="mytextfeld2" class="counter">200</span> Zeichen f&uuml;r die Beschreibung </p>
    
    ...


    also wie mache ich aus den zwei Funktionen oben nur eine, die ich für beliebig viele Textfelder verwenden kann
    z.B. bei Funktions-Aufruf mit Parameter Übergabe .... aber wie die Parameter als Variable verwenden
    in z.B.: document.forms[0].mytextfeld2.value ... also anstelle mytextfeld2 aus Parameter-Übergabe
    oder mit this ... ?


    Beitrag zuletzt geändert: 24.10.2011 18:38:39 von anlagegeld
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. anlagegeld schrieb:
    Hallo

    ich habe ein Formular mit mehreren <textarea>
    und möchte für bestimmte Textareas nur eine gewisse Anzahl Zeichen zulassen,

    ich habe es bisher einfac in zwei Funktionen gepackt
    aber die Frage ist, wie kann ich das mit nur einer Funktion machen
    so dass bei Klick in das Formularfeld die entsprechenden Ein-/Ausgabe Werte (name, id) angesprochen werden
    [...]

    also wie mache ich aus den zwei Funktionen oben nur eine, die ich für beliebig viele Textfelder verwenden kann
    z.B. bei Funktions-Aufruf mit Parameter Übergabe .... aber wie die Parameter als Variable verwenden
    in z.B.: document.forms[0].mytextfeld2.value ... also anstelle mytextfeld2 aus Parameter-Übergabe
    oder mit this ... ?

    Yep mit this
    <script type="text/javascript">
    //<![CDATA[
    function countDigits(node){
    
    	var maxDigits = node.parentNode.getElementsByTagName('INPUT')[0].value; //maximale Zeichenanzahl
    	var outputNode =node.parentNode.getElementsByTagName('SPAN')[0];
    	var areaString = node.value;
    	var currLength = areaString.length + 1;
    	var restLength = maxDigits - areaString.length;
    	if (restLength < 0) { restLength = 0; }
    
    	outputNode.innerHTML = restLength;
    
    	if (areaString.length >= maxDigits) {
    	//die folgende Zeile entfernt alle Zeichen die groesser als maxDigits sind
    	node.value = node.value.substring(0,maxDigits);
    	}
    
    }
    
    
    
    //]]>
    </script>
    
    
    </head>
    <body>
    
    ...
    
    <form>
            <div>
            <input name="maxNum" type="hidden" value="500">
                    <textarea name="mytextfeld1" cols="64" rows="6" onKeyUp="countDigits(this)" onClick="countDigits(this)"></textarea>
                    <p>Noch <span id="mytextfeld1" class="counter">500</span> Zeichen f&uuml;r die Beschreibung </p>
            </div>
    
             <div>
            <input name="maxNum" type="hidden" value="50">
                    <textarea name="mytextfeld1" cols="64" rows="6" onKeyUp="countDigits(this)" onClick="countDigits(this)"></textarea>
                    <p>Noch <span id="mytextfeld1" class="counter">50</span> Zeichen f&uuml;r die Beschreibung </p>
            </div>
    
    </form>


    Beachte das bei meiner Lösung
    -Jedes Textfed von einem div (oder sonstwas) für parentNode eingefasst werde muss.
    -innerhab dieses div's das erste input-feld die Information für die maximale Zeichenanzahl beinhalten muss (getElementsByTagName("INPUT")[0])
    -innerhab dieses div's das erste SPAN-feld automatisch die Ausgabe bekommt (getElementsByTagName("SPAN")[0])

  4. Autor dieses Themas

    anlagegeld

    anlagegeld hat kostenlosen Webspace.

    ahhhhh ok

    ich hatte es etwa so versucht (das this in der Funktion abfangen)

    var areaString = document.forms[0].this.value;


    was ja nicht funktioniert hat ... Danke für den Code !!!

    noch (kleine) Frage:
    so wie es aussieht, können doch die hidden-Fields auch unterschiedliche Namen haben
    also maxNum1 und maxNum2 usw.

    noch ne (größere) Frage:
    wie kann ich jetzt auch noch für einzele (nicht alle) Textareas eine Mindest-Zeichen-Anzahl verlangen

    z.B. ein zweites hidden-Field und <span> Tag einfügen

    und im JS Code dann entsprechende Rechnung und Ausgabe-Zuweisung

    <html>
    <head>
    <title>Test</title>
    
    <script type="text/javascript">
    //<![CDATA[
    
    function countDigits(node){
    
       var maxDigits = node.parentNode.getElementsByTagName('INPUT')[0].value; //maximale Zeichenanzahl
       var minDigits = node.parentNode.getElementsByTagName('INPUT')[1].value; //minimale Zeichenanzahl
       var outmax = node.parentNode.getElementsByTagName('SPAN')[0];
       var outmin = node.parentNode.getElementsByTagName('SPAN')[1];
       var areaString = node.value;
       var currLength = areaString.length + 1;
       var restLength = maxDigits - areaString.length;
       var miniLength = minDigits - areaString.length;
    	
       if (restLength < 0) { restLength = 0; }
       if (miniLength < 0) { miniLength = 0; }
    
       outmax.innerHTML = restLength;
       outmin.innerHTML = miniLength;
    
       if (areaString.length >= maxDigits) {
    	//die folgende Zeile entfernt alle Zeichen die groesser als maxDigits sind
    	node.value = node.value.substring(0,maxDigits);
       }
    
    }
    
    //]]>
    </script>
    
    
    </head>
    <body>
    
    ...
    
    <form name="formular1" method="post" action="">
    
    <div>
    	<input name="maxNum" type="hidden" value="500" />
    	<input name="minNum" type="hidden" value="100" />
    	<textarea name="mytextfeld1" cols="64" rows="9" onKeyUp="countDigits(this)" onClick="countDigits(this)"></textarea>
    	<p>Maximal noch <span id="maxzeichen1" class="counter">500</span> Zeichen f&uuml;r die Beschreibung </p>
    	<p>Mindestens noch <span id="minzeichen1" class="counter">100</span> Zeichen f&uuml;r die Beschreibung </p>
    </div>
    
    <div>
    	<input name="maxNum" type="hidden" value="50" />
    	<textarea name="mytextfeld1" cols="64" rows="4" onKeyUp="countDigits(this)" onClick="countDigits(this)"></textarea>
    	<p>Noch <span id="maxzeichen2" class="counter">50</span> Zeichen f&uuml;r die Beschreibung </p>
    </div>
    
    <br /> OK: <input type="submit" name="run" value="Abschicken" />
    
    </form>
    
    ...
    
    </body>
    </html>


    das mit .... Noch mindestens x Zeichen ... funktioniert dann zwar im ersten Textfeld
    aber im zweiten Textfeld wird nicht mehr der Wert für maximale Zeichen aktualisiert ?!

    verstehe aber grad garnicht, warum es jetzt damit nur noch im ersten Textfeld funktioniert ?
    irgendwo ist der Wurm drin, aber wo .... ???

    EDIT: ideal wäre dann noch, wenn man das Formular erst dann abschicken kann
    wenn die Mindest-Zeichen Bedingung(en) erfüllt ist (sind) ... :)




    Beitrag zuletzt geändert: 25.10.2011 13:14:21 von anlagegeld
  5. Vergiss Namen , es spielt keine Rolle.
    Versuch parentNode und getElementsByTagName zu verstehen bzw die javascript Baumstruktur.
    this ist immer das Element von wo es aufgerufen wurde
    Also Textarea
    die Tetarea ist ja von einem DIv eingerahmt, Man sagt dazu das dieses Div der Elternknoten (parentNode) von Textarea ist weil sich die Textarea IN dem Div befindet
    Also rufe ich mit this.parenNode das ElternElement von dem ort aus auf wo geklickt wurde.
    In dem DIv befinden sich neben der textarea auch noch ein input, ein span und andere tags.

    Beachte das [0] bei getElementsBYTagName("SPAN")[0]
    Damit rufe ich das ERSTE (es wird bei null angefangen zu Zählen) SPAN Element INNERHAB des Elternnotens von this auf.

    Also knntest Du mit getElementsBYTagName("SPAN")[1] das zweite Feld aufrufen.

    Da das mit ALLEN html-tags funktioniert kannst Du beiebige Werte einlesen und ausgeben.
    Wichtg ist immer nur ob es das Erste( zweite, Dritte usw ) element ist.
    Zur verdeutlichung:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta name="generator" content="Webweaver v1.6.7 [http://webweaver.ws]" />
    <style type="text/css">
    div{border: 1px #888 dotted; margin: 20px;padding: 10px;}
    span{border: 1px #AAA dotted; margin: 20px;padding: 10px;}
    
    </style>
    <script type="text/javascript">
    function showNotes(node)
    {
    var output = node.parentNode.getElementsByTagName('textarea')[0];
    output.value="THIS wird rot\n";
    node.style['border']="solid red 3px";
    
    output.value += "THIS.parentNode wird blau<\n";
    node.parentNode.style['border']="solid blue 1px";
    
    
    output.value += "Das DRITTE SPAN in THIS.parentNode wird Lila\n";
    node.parentNode.getElementsByTagName("SPAN")[2].style['border']="solid purple 3px";
    
    output.innerHTML=output.innerHTML+"Im zweiten SPAN steht folgendes geschrieben:<br>"+node.parentNode.getElementsByTagName("SPAN")[1].innerHTML;
    
    }
    
    </script>
    </head>
    <body>
    Feld 1
    <div>
    <textarea></textarea>
         <div onClick="showNotes(this)">Klickmich</div>
         <span>ERSTES SPAN IN FELD 1</span>
         <span>zweite SPAN IN FELD 1</span>
         <span>Drittes SPAN IN FELD 1</span>
    </div>
    
    
    Feld 2
    <div>
    
         <span>ERSTES SPAN IN FELD 2</span>
         <div onClick="showNotes(this)">Klickmich</div>
         <span>zweite SPAN IN FELD 2</span>
         <textarea></textarea>
         <span>Drittes SPAN IN FELD 2</span>
    </div>
    
    <div>
    </body>
    </html>



    Wenn Du das verstanden hast lösen sich alle ragen außer dem letzten von selber

    Beitrag zuletzt geändert: 26.10.2011 1:07:51 von simuliertes
  6. Autor dieses Themas

    anlagegeld

    anlagegeld hat kostenlosen Webspace.

    simuliertes schrieb:
    Beachte das [0] bei getElementsBYTagName("SPAN")[0]
    Damit rufe ich das ERSTE (es wird bei null angefangen zu Zählen) SPAN Element INNERHAB des Elternnotens von this auf.

    Also knntest Du mit getElementsBYTagName("SPAN")[1] das zweite Feld aufrufen.


    ja, das habe ich wohl verstanden, parentNode = Eltern-Element
    und auch dass Arrays mit 0 (NULL) fürs ERSTE Element beginnen

    bei meinem Code oben funktioniert es ja auch wunderbar im ersten DIV
    (Minimum Zeichen im 2ten INPUT und Ausgane im 2ten SPAN)

    es werden im ersten DIV die Max. und die Min. Zeichen gezählt und angezeigt,
    nur im zweiten DIV klappt es dann nicht mehr .... dort ist nur ein INPUT und ein SPAN

    sobald ich dort auch ein zweites INPUT vor die textarea einfüge, dann funktioniert auch das

    2tes DIV:
    <div>
    	<input name="maxNum" type="hidden" value="50" />
    	<input name="minNum" type="hidden" value="0" />
    	<textarea name="mytextfeld1" cols="64" rows="5" onKeyUp="countDigits(this)" onClick="countDigits(this)"></textarea>
    	<p>Noch <span id="maxzeichen2" class="counter">50</span> Zeichen f&uuml;r die Beschreibung </p>
    </div>


    aber das erste INPUT (im 2ten DIV) war doch da .... und ich habe angenommen,
    wenn es kein zweites INPUT vorhanden, dann ist Wert minDigits mit INPUT')[1] einfach 0 (null)

    ok, es kann auch sein, dass dieser Wert minDigits dann anstatt 0 doch 'false' ist
    und deshalb die Rechnung miniLength = minDigits - areaString.length; einen Fehler verursacht

    aber wenn ich einfüge
    ... 
    var minDigits = node.parentNode.getElementsByTagName('INPUT')[1].value; //minimale Zeichenanzahl
    if (minDigits === false) { minDigits = 0; }
    ...


    dann klappt es auch nicht, also doch nicht false ?!

    wenn ich im 2ten DIV ein zweites INPUT einfüge, dann funktioniert beides ....


    also wenn ich INPUT')[1] auslese im Script, muss es dann auch zwingend vorhanden sein ?
    ... wenn nicht, wass passiert dann, kommt sofort ein Script Abbruch
    oder gibt es einen Rückgabe-Wert den man aus-filtern kann ?

    Danke


    Beitrag zuletzt geändert: 26.10.2011 11:31:05 von anlagegeld
  7. achso..
    Ok, sorry für den Erklärbär im letzte post, .
    Ich empfehle Dir zum testen den Firefox zu benutzen.
    Dort findest Du unter Extras->Web Entwickler -> Fehlerkonsole
    Eine Ausgabe aller Fehler.
    (Ich Empfehe zusätzlich das addon "Firebug" besonders für css tests)

    Ist ein Element nicht vorhanden kommt es beim Aufruf zu einer Fehlermeldung, die Zeile wird nicht ausgeführt.
    Dadurch exisitiert die Variabel . outmin nicht und es ommt zum nächsten Fehler.
    Usw..
    So siehts bei deinem vorletzten Code aus:
    Fehler: node.parentNode.getElementsByTagName("INPUT")[1] is undefined
    Zeile: 12


    Lösung:
    var maxDigits = node.parentNode.getElementsByTagName('INPUT')[0].value; //maximale Zeichenanzahl
       var minDigits = (node.parentNode.getElementsByTagName('INPUT').length>1)?node.parentNode.getElementsByTagName('INPUT')[1].value:0; //minimale Zeichenanzahl
       var outmax = node.parentNode.getElementsByTagName('SPAN')[0];
       var outmin = (node.parentNode.getElementsByTagName('SPAN').length>1)?node.parentNode.getElementsByTagName('SPAN')[1]:0;


    node.parentNode.getElementsByTagName('SPAN').length

    gibt die ANzahl der SPAN Elemente (innerhalb des eltern-elements) wieder.
    var anyVar = (argument)? isTrue: isFalse;

    ist die Kurzform für:
    if  (argument)
    {var anyVar = isTrue ;
    }else{
    var anyVar = isFalse;}



    Edit:

    anlagegeld schrieb:
    ideal wäre dann noch, wenn man das Formular erst dann abschicken kann
    wenn die Mindest-Zeichen Bedingung(en) erfüllt ist (sind) ... :)


    onsubmit

    Edito 2
    Nochmal der Obligatorische Hinweis:
    Javascript lässt sich abschalten! Also musst Du sowieso noch extra die Zeichenanzahl überprüfen.


    Beitrag zuletzt geändert: 26.10.2011 18:53:35 von simuliertes
  8. Autor dieses Themas

    anlagegeld

    anlagegeld hat kostenlosen Webspace.

    Vielen Dank, so funktionirt es

    Firebug werde ich mir mal reinzeihen und sehen was man damit rausziehen kann

    auch das mit OnSubmit habe ich ausprobiert, funktioniert zwar
    aber irgendwie sind nach Aufruf der alert Meldung alle vorherigen Eingaben im Formular dann weg

    das leigt wahrscheinlich daran, dass ich Cache ausgeschalten habe (in htaccess)

    also prüfe ich nach Absenden per PHP, und wenn unvollständig geht es zurück zum Formular
    mit Übergabe der bereits eigegebenen Inhalte (so dass man nicht alles nochmall neu schreiben muss)

    Danke für die Hilfe !
  9. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!