$(document).ready(function(){
// disable a submit button by default
$("#submitBtn").attr("disabled",true);
// click button event .
$("#submitBtn").on("click",function(e){
e.preventDefault();
});
// keyup event function
$("#messageBox").on("keyup",function(e){
// get length of inputs into textarea
var count = $(this).val().length ;
if (count > 140 || count === 0)
{
// disable button
$("#submitBtn").attr("disabled",true);
// change a color of progress bar depend on it value
$(".progress-bar").removeClass("progress-bar-primary").addClass("progress-bar-danger");
// remove any character more than 140
$(this).val( $(this).val().slice(0,140) );
// update counter
count = $(this).val().length ;
}
else
{
// activate submit button
$("#submitBtn").attr("disabled",false);
// set value to progress bar
$(".progress-bar").attr("style","width:"+count+"%");
// change a color of progress bar depend on it value
$(".progress-bar").removeClass("progress-bar-danger").addClass("progress-bar-primary");
}
// write a value into progress bar
$(".progress-bar span").text(count);
});
});
<body>
<div class="container">
<div class=" well col-lg-8 col-lg-push-2 col-md-8 col-md-push-2 col-sm-8 col-sm-push-2 col-xs-12" style="margin-top:30px;">
<form class="form-group" method="post" action="#">
<h3 class="text text-center">{ Counter Letters }</h3>
<textarea class="form-control" cols="20" rows="5" id="messageBox"></textarea>
<br /> <br />
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="display:inline;">
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 pull-right">
<div class="progress progress-striped active" style="height:30px;">
<div class="progress-bar brogress-bar-primary" role="progressbar" aria-valuenow="00"
aria-valuemin="0" aria-valuemax="140" style="width:0%">
<span style="font-weight:bold;">0</span>
</div>
</div>
</div>
<button type="submit" class="btn btn-md btn-primary pull-left" id="submitBtn">
Submit
<span class="glyphicon glyphicon-send"></span>
</button>
</div>
</form>
</div>
</div>
</body>