CODEWITHSUNDEEP
jquery
TwixxyKit
TwixxyKit

Reputation: 10703

jquery - check length of input field?

The code below is intended to enable the submit button once the user clicks in the textarea field. It works, but I'm trying to also make it so that it's only enabled if there's at least one character in the field. I tried wrapping it in:

if ($(this).val().length > 1) 
{

}

But, that didn't seem to work... Any ideas?

$("#fbss").focus(function () {
    $(this).select();
    if ($(this).val() == "Default text") {
        $(this).val("");
        $("input[id=fbss-submit]").removeClass();
        $("input[id=fbss-submit]").attr('disabled', false);
        $("input[id= fbss-submit]").attr('class', '.enableSubmit');
        if ($('.charsRemaining')) {
            $('.charsRemaining').remove();
            $("textarea[id=fbss]").maxlength({
                maxCharacters: 190,
                status: true,
                statusClass: 'charsRemaining',
                statusText: 'characters left',
                notificationClass: 'notification',
                showAlert: false,
                alertText: 'You have exceeded the maximum amount of characters',
                slider: false
            });

        }
    }
});

Upvotes: 59

Views: 370630

Answers (3)

BegYourPardon
BegYourPardon

Reputation: 197

alternatively using keyup()

 $("#fbss").keyup(function() {
 if($(this).val().length >1) {
    $('#submit').prop('disabled', false);
   }
 });

Upvotes: 1

Fyodor Soikin
Fyodor Soikin

Reputation: 80915

That doesn't work because, judging by the rest of the code, the initial value of the text input is "Default text" - which is more than one character, and so your if condition is always true.

The simplest way to make it work, it seems to me, is to account for this case:

    var value = $(this).val();
    if ( value.length > 0 && value != "Default text" ) ...

Upvotes: 135

user113716
user113716

Reputation: 322612

If you mean that you want to enable the submit after the user has typed at least one character, then you need to attach a key event that will check it for you.

Something like:

$("#fbss").keypress(function() {
    if($(this).val().length > 1) {
         // Enable submit button
    } else {
         // Disable submit button
    }
});

Upvotes: 38

Related Questions