mehrere Teaxtareas durch JS Funktion prüfen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
aufruf
aufrufen
ausgabe
beschreibung
code
dank
element
fehler
feld
formular
frage
funktion
input
null
parameter
rufen
span
url
zeichen
zweites input
-
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ü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ü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 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
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ü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ü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])
-
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ür die Beschreibung </p> <p>Mindestens noch <span id="minzeichen1" class="counter">100</span> Zeichen fü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ü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 -
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 -
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ü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 -
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 -
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 ! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
