Jquery submit button not disabled when no text in input area

Question

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");
    }
});

Yes, it was a simple mistake. – gdoron Jun 22 '12 at 08:07 — gdoron, Jun 22 '12 at 08:07

score 3 · Accepted Answer · edited May 23 '17 at 10:29

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);
    }
});

gdoron · Answer 2 · 2012-06-22T08:10:04.187

2

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);

edited Jun 22 '12 at 08:10

answered Jun 22 '12 at 08:02

gdoron

147,333
58
291
367

I have changed the code to use `.prop` consistently but nevertheless the same problem remains. – chrisjleu Jun 22 '12 at 09:18

Cranio · Answer 3 · 2012-06-22T08:25:03.427

0

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 :)

edited Jun 22 '12 at 08:25

answered Jun 22 '12 at 08:20

Cranio

9,647
4
35
55

NOTE: I've not included the code for counter and text class, but It should be straightforward to implement. – Cranio Jun 22 '12 at 08:22
minor change: `var ok = (c>0 && c<=140); ` – Alex R. Jun 22 '12 at 08:23
@AlexR. yeah it was for tesing, now there's the correct number – Cranio Jun 22 '12 at 08:26
I understand 10. Just highlighted `<=` to include the limit as valid length. – Alex R. Jun 22 '12 at 08:26
@chrisjleu I've added also a simple code for toggling the class – Cranio Jun 22 '12 at 08:28
@Cranio, This works. However, I probably didn't mention this in my original question but I've added the HTML and CSS for the counter, which I want displayed to the user. Perhaps you can include this in your answer. – chrisjleu Jun 22 '12 at 09:01

score 0 · Answer 4 · answered Jun 22 '12 at 08:24

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.

Jquery submit button not disabled when no text in input area

UPDATE:

4 Answers4