CODEWITHSUNDEEP
jquery
Alice
Alice

Reputation: 11

Why isn't this simple jQuery code working?

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.

Upvotes: 0

Views: 108

Answers (4)

Nikita Rybak
Nikita Rybak

Reputation: 68006

Put this as first line in keyup event handler

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

and remove var typed... from above.

Changes

  1. You want typed to be computed each time input value changes, not once when page is loaded.
  2. You missed a dot in selector ('input1')
  3. Use length function to get input size

edit
Nick Craver has posted a better way to do this, I leave it here just to point out mistakes.

Upvotes: 0

Codeacula
Codeacula

Reputation: 2368

First:

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

Should probably be:

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

Second:

If you're trying to get how many characters are typed in, you should probably use:

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

Upvotes: 0

Nick Craver
Nick Craver

Reputation: 630409

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.

Upvotes: 4

Robert
Robert

Reputation: 21388

The problem is that you're effectively trying to subtract "150 - whatever I typed". So it's spitting out NaN, or Not a Number. You want the length, no the actual value.

var typed = $('.input1').val().length; // This will have the actual text

$('.remaining').show().html(150 - typed.length); // (150 - 24) as an example

Upvotes: 0

Related Questions