Question

I am only 2 days into jquery so I’m probably making a simple error here. Basically I have a input field that when clicked gets a blue border around it (doing this by having a css class be added to the input field on keyup and the css adds the border color). On keyup the submit button also shows. The only other thing I want is to show a remaining character count. Everything else works except the last part. Here’s all my code:

<style type="text/css">.onFocus { border:3px solid #BBDAFD; }</style>

<script type="text/javascript">
    $(document).ready(function(){

        $('.submitButton').hide();
        $('.remaining').hide();

        var typed = $('input1').val();

        $('.input1').keyup(function(){
            $('.input1').addClass('onFocus');
            $('.submitButton').show();
            $('.remaining').show().html(150 - typed);
        });

    });
</script>

<form action="submitComment.php" name="" method="post">
    <label>Leave a comment</label>
    <input type="text" class="input1" maxlength="150" />
    <br />
    <span class="remaining"></span>
    <br />
    <input type="button" name="commentSubmit" value="Submit Comment" class="submitButton" />
</form>

Instead of executing the operation 150 (which is the max character limit I want to allow) from the present value of the input field which should be stored in the variable “typed”, instead jquery just splits out:

NaN

What is the problem/solution here?

EDIT

Opps, just noticed that this:

var typed = $('input1').val();

should be:

var typed = $('.input1').val();

Now NAN doesn’t show but 150 shows. So the operation is still not being performed.

Answer 1

This:

    var typed = $('input1').val();

    $('.input1').keyup(function(){
        $('.input1').addClass('onFocus');
        $('.submitButton').show();
        $('.remaining').show().html(150 - typed);
    });

Needs to look like this:

    $('.input1').keyup(function(){
        $(this).addClass('onFocus');
        $('.submitButton').show();
        $('.remaining').show().html(150 - this.value.length);
    });

It’s important to check the current value length inside the keyup handler, otherwise you’re always checking against what the value length was on document.ready.