2010-12-26 11 views
0

Vielleicht habe ich zu lange an meiner Site gearbeitet, aber ich kann das folgende nicht zur Arbeit bekommen. Ich habe mein Textarea ein Onkeyup() Ereignis namens Limiter feuern, die das Textfeld überprüfen und den Text in der Box begrenzen soll, während ein anderes Readonly-Eingabefeld, das die Menge der verbleibenden Zeichen zeigt aktualisiert.Kann document.getElementById() nicht finden, um mein textarea zu finden

Dies ist der Javascript-Code:

<script type="text/javascript"> 
var count = "500"; 
function limiter(){ 
    var comment = document.getElementById("comment"); 
    var form = this.parent; 
    var tex = comment.value; 
    var len = tex.length; 
    if(len > count){ 
     tex = tex.substring(0,count); 
     comment.value =tex; 
     return false; 
    } 
    form.limit.value = count-len; 
} 
</script> 

Das Formular sieht wie folgt aus:

<form id="add-course-rating" method="post" action="/course_ratings/add/8/3/5/3" 
accept- charset="utf-8"><div style="display:none;"><input type="hidden" 
name="_method" value="POST" /> 


    //Other inputs here 

    <div id="comment-name" style="margin-top:10px"> 
    <div id="comment-name-text"> 
    <b>Comments</b><br /> 
    Please leave any comments that you think will help anyone else. 
    </div> 
    <style type="text/css"> 
    .rating-form-box textarea { 
     -moz-border-radius:5px 5px 5px 5px; 
    } 
    </style> 
    <div class="rating-form-box"> 
      <textarea name="data[CourseRatings][comment]" id="comment" 
       onkeyup="limiter()" cols="115" rows="5" ></textarea> 
       <script type="text/javascript"> 
        document.write("<input type=text name=limit size=4 
        readonly value="+count+">"); 
       </script> 
    </div> 
<input type="submit" value="Add Rating" style="float: right;"> 
</form> 

Wenn jemand das wäre toll helfen kann.

+0

Sorry das war ein weiterer Versuch, wird jetzt behoben – Slruh

+0

Setzen Sie die Skripte nach Tag. – miqbal

+0

Nein, das tut nichts – Slruh

Antwort

1

Würde das für Sie funktionieren? Example Link

EDIT:
Sie sollten die Elementinstanz mit dem Funktionsaufruf onkeyup="limiter(this)" diese Art und Weise in Ihrer Funktion übergeben Sie eine Referenz auf das Objekt haben werden, die diese Funktion aufgerufen, jetzt Ihre Funktion wird so etwas wie:

function limiter(a) { 
    var comment = a; 
    var form = document.getElementById('add-course-rating'); 
    var tex = comment.value; 
    var len = tex.length; 
    if (len > count) { 
     tex = tex.substring(0, count); 
     comment.value = tex; 
     return false; 
    } 
    form.limit.value = count - len; 
} 

Auch keine Notwendigkeit, Element dynamisch zu erstellen, wenn Sie das wirklich nicht brauchen! Setzen Sie einfach den Wert des Readonly mit Javascript:

Und Sie sind gut zu gehen!

+0

Danke ... das ist Präfekt! – Slruh

+0

@Slruh - toll, bitte beachte @ Davids Kommentare zum Umgang mit 'this' und' eltern' nicht zu verwechseln mit 'parentNode' ... – ifaour

+0

Warum die down vote jungs? Bitte lassen Sie den Grund wissen, was hier schief gelaufen ist .. !!! – ifaour

3

Sie haben:

onkeyup="limiter()" 

Da Sie nicht limiter im Rahmen eines Objekts aufrufen, müssen Sie window.limiter anrufen.

var form = this.parent; 

this So ist window und formwindow.parent ist, die die gleiche wie window ist (es sei denn, das Dokument in einem Rahmen eingelegt ist).

Sie möchten this die Formularsteuerung vornehmen. Verwenden Sie dazu event binding in unobtrusive JavaScript.

(Und keine input als Element verwendet ausschließlich zur Anzeige Ausgabe, es macht keinen Sinn. Sie wahrscheinlich ein Etikett im Zusammenhang mit dem Textfeld benutzen wollen ... und ein anderes Label für <b>Comments</b><br />Please leave any comments that you think will help anyone else. zu verwenden)