linkNES linkNES - 4 months ago 10
CSS Question

Jquery custom function issues

I'm trying to grab the article elements id value for all the article elements one by one so I can add it to the

countCharacters() function
so I can have a unique character count for each textarea but both my jquery functions dont seem to work correctly. For example my character count should look something like this.

countCharacters('#comment-1535 .review-info', '#comment-1535 .review-info + div .count', 5000);


countCharacters('#comment-553 .review-info', '#comment-553 .review-info + div .count', 5000);


countCharacters('#comment-6547 .review-info', '#comment-6547 .review-info + div .count', 5000);


Here is my JSFiddle https://jsfiddle.net/jm52wg9k/

HTML

<article class="review" id="comment-1535">
<div class="review-details">
<div class="review-stats">
<!-- content -->
</div>
<form method="post" action="" class="review-form">
<fieldset>
<ol>
<li><label for="review-info">Review Info:</label></li>
<li><textarea name="review_info" class="review-info"></textarea><div class="some"><span class="count"></span></div></li>
</ol>
</fieldset>
<fieldset>
<ol>
<li><input type="submit" name="submit_review" value="Submit Review" class="submit-review" /></li>
</ol>
</fieldset>
</form>
</div>
</article>


<article class="review" id="comment-553">
<div class="review-details">
<div class="review-stats">
<!-- content -->
</div>
<form method="post" action="" class="review-form">
<fieldset>
<ol>
<li><label for="review-info">Review Info:</label></li>
<li><textarea name="review_info" class="review-info"></textarea><div class="some"><span class="count"></span></div></li>
</ol>
</fieldset>
<fieldset>
<ol>
<li><input type="submit" name="submit_review" value="Submit Review" class="submit-review" /></li>
</ol>
</fieldset>
</form>
</div>
</article>


<article class="review" id="comment-6547">
<div class="review-details">
<div class="review-stats">
<!-- content -->
</div>
<form method="post" action="" class="review-form">
<fieldset>
<ol>
<li><label for="review-info">Review Info:</label></li>
<li><textarea name="review_info" class="review-info"></textarea><div class="some"><span class="count"></span></div></li>
</ol>
</fieldset>
<fieldset>
<ol>
<li><input type="submit" name="submit_review" value="Submit Review" class="submit-review" /></li>
</ol>
</fieldset>
</form>
</div>
</article>


Jquery

$(document).ready(function() {
function countCharacters( input, output, max ) {
var $input = $(input);
var $output = $(output);
$output.text(max + ' characters left');
$input
.keydown(function(event) {
if (event.keyCode != 8 &&
event.keyCode != 46 &&
$input.val().length >= max)
event.preventDefault();
})
.keyup(function() {
var val = $input.val().slice(0, max);
var left = max - val.length;
$input.val(val);
$output.text(left + ' characters left');
});
}
countCharacters(reviewInfo() + '.review-info', reviewInfo() + '.review-info + div .count', 5000);
});

$(document).ready(function(){
function reviewInfo(){
var review = $('.review-info').closest('article').attr('id');
var review2 = '#' + review;
return review2;
};
});


CSS

*{
border: 0;
margin: 0;
padding: 0;
}

article{
margin-top: 1em;
}

textarea{
width: 90%;
}

input{
margin: 1em 0;
color: #fff;
background: green;
padding: .5em;
}

Answer

DEMO

Your code was fine but the way you were implementing it wasn't proper. Below changes I have made to your code.. See inline comments for more details

function countCharacters(input, output, max,event) {
      //Only changes here is I removed .keyup and .keydown which I've binded outside
      var $input = $(input);
      var $output = $(output);
      if (event.keyCode != 8 && event.keyCode != 46 &&
         $input.val().length >= max)
            event.preventDefault();
       var val = $input.val().slice(0, max);
       var left = max - val.length;
       $input.val(val);
       $output.text(left + ' characters left');
}

$(".review-info").on('keyup keypress',function(event){
    var _this=$(this);//key up and key press out side document.ready
    var _thisCount=_this.next('.some').find('.count');
    //find the span using current control's next .some div and its child .count
    var max=5000; //also you can add as an data-* attribute to your controls
    countCharacters(_this,_thisCount,max,event);//call the function with necessary params
})