CODEWITHSUNDEEP
javascriptjqueryhtml
chrisjleu
chrisjleu

Reputation: 4380

Jquery submit button not disabled when no text in input area

I have a text area in a form that has a character limit and I want to disable the submit button if the character limit is exceeded or if there are no characters entered. When the user enters some characters but then proceeds to remove all of them again, leaving the text area empty, the send button remains enabled despite the check that's in place. Everything else works as I expect it to. It must be something simple but I just can't see it...

HTML:

<textarea name="t" id="message-input-field" autofocus="autofocus" placeholder=""></textarea>
<input type="submit" value="Send" id="send-message-button" class="button"/>
<span id="counter"></span>

jQuery:

// Disable by default
$('#send-message-button').prop('disabled', true);

// Do stuff when there is textarea activity
$('#message-input-field').on("propertychange input textInput", function () {
    var charLimit = 140;
    var remaining = charLimit - $(this).val().length;
    if(remaining == charLimit) {
        console.log("disabling");
        // No characters entered so disable the button
        $('#send-message-button').attr('disabled', true);
    } if (remaining < 0) {
        // remaining = 0; // Prevents the counter going into negative numbers
        $('#counter').addClass("over-char-limit").text(remaining);
        $('#send-message-button').attr('disabled', true);
    } else {
        $('#send-message-button').removeAttr('disabled');
        $('#counter').removeClass("over-char-limit").text(remaining);
    }
});

CSS

.over-char-limit {
    color: red;
}

UPDATE:

I've settled on the following code which works fine for me now. It perhaps isn't the most efficient/elegant way to do it but to my simple mind it is quite clear and readable. Thanks to @Tats_innit and @gdoron for helping with the solution. 

// Disable the send button by default. Enable only when text entered.
$('#send-message-button').prop('disabled', true);

// Character counter logic on the 'send message' text area. Rules are:
// 1. Counter appears on any input of text (pasting or key strokes).
// 2. Counter can go into negative numbers but changes to red when it does.
// 3. 'Send' button disabled when limit exceeded or no characters entered. 
$('#message-input-field').on("propertychange input textInput", function() {

    var charLimit = 140;

    // Calculate how many characters remain (this could be a negative number)
    var remaining = charLimit - $(this).val().length;

    // Add the counter value to #counter
    $('#counter').text(remaining);

    if (remaining == charLimit) {
       // Disable the button as no characters entered
        $('#send-message-button').prop('disabled', true);
        $('#counter').removeClass("over-char-limit");
    } else if (remaining < 0) {
        // Disable the button as too many characters entered
        // remaining = 0; // Prevents the counter going into negative numbers
        $('#send-message-button').prop('disabled', true);
        $('#counter').addClass("over-char-limit");
    } else {
        // Happy case: characters have been entered but do not exceed limit
        $('#send-message-button').prop('disabled', false);
        $('#counter').removeClass("over-char-limit");
    }
});

Upvotes: 2

Views: 2050

Answers (4)

Tats_innit
Tats_innit

Reputation: 34107

Working demo http://jsfiddle.net/M3WgK/1/ or http://jsfiddle.net/M3WgK/12/ (with 10 letters to show full working) :)

Further demo with counter http://jsfiddle.net/M3WgK/15/

Using API : http://api.jquery.com/prop/

Also please note you have 2 if blocks you might just want 2 as your logic is === or < than else do default.

Hope this helps and @Gdorons explanation is valid to use .prop good read here: .prop() vs .attr()

code

// Disable by default
$('#send-message-button').prop('disabled', true);

// Do stuff when there is textarea activity
$('#message-input-field').on("propertychange input textInput", function() {
    var charLimit = 140;
    var remaining = charLimit - $(this).val().length;

    if (remaining === charLimit) {
       // No characters entered so disable the button
        $('#send-message-button').prop('disabled', true);

    } else if (remaining < 0) {
        // remaining = 0; // Prevents the counter going into negative numbers
        $('#counter').addClass("over-char-limit").text(remaining);
        $('#send-message-button').prop('disabled', true);
    } else {
        $('#send-message-button').removeAttr('disabled');
        $('#counter').removeClass("over-char-limit").text(remaining);
    }
});​

Upvotes: 3

Cranio
Cranio

Reputation: 9847

Why not MUCH simpler code?

$("#message-input-field").keyup(function() {
    var c = $(this).val().length;
    var ok = (c>0 && c<140);
    var button = $("#send-message-button");
    ok ? button.removeAttr('disabled') : button.attr("disabled",true);
    $("#counter").toggleClass("over-char-limit", !ok); // toggles class, easy way
} );​​​​​​​​​​​​​​​​​​

Sidenote: you should start with the button already disabled (as we have no input). And, you should include the code for the class change and counter, but it should be straightforward. Ask for help if you need :)

Upvotes: 0

XepterX
XepterX

Reputation: 1011

There is nothing wrong with your code, it's just you miss this here::

if(remaining == charLimit) {.......} else if (remaining < 0) {

That's all.

if you don't want to use the if, the you might want to move down the

if(remaining == charLimit) {}

to the lower part of the if else statement.

Upvotes: 0

gdoron
gdoron

Reputation: 150253

Change:

$('#send-message-button').removeAttr('disabled');

To:

$('#send-message-button').prop('disabled', false);

You didn't set attribute, you changed the property:

$('#send-message-button').prop('disabled', true);

And change:

$('#send-message-button').attr('disabled', true);

To:

$('#send-message-button').prop('disabled', true);

Upvotes: 2

Related Questions