Maybe I've been working on my site for to long, but I can't get the following to work. I am having my textarea fire an onkeyup() event called limiter which is supposed to check the textarea and limit the text in the box, while updated another readonly input field that shows the amount of characters left.
This is the 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>
The form looks like this:
<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>
If anyone can help that would be great.