I have a text field with a counter next to it. But beneath that is the submit form, and I want it to be inactive (grayed out, unable to submit) unless they have typed 100 characters.

I'm using a jsfiddle which I found on here and adapted to demonstrate what I'm doing:

/

Does not seem to be working exactly right. First of all, it's not grayed initially... but when I begin typing, it then recognizes that there aren't 100 characters and it does disable.

But, my code should re-enable the button if the length is not less than 100, i.e. when it reaches or exceeds 100 characters. However, it does not. What am I doing wrong?

$("#field").keyup(function() {
    el = $(this);
    $("#charNum").text(el.val().length);

    if(el.val().length < 100) {
        $('#submit').attr('disabled','true');
    } else {
        $('#submit').attr('disabled','false');
    }
});

I have a text field with a counter next to it. But beneath that is the submit form, and I want it to be inactive (grayed out, unable to submit) unless they have typed 100 characters.

I'm using a jsfiddle which I found on here and adapted to demonstrate what I'm doing:

http://jsfiddle/xqyWV/396/

Does not seem to be working exactly right. First of all, it's not grayed initially... but when I begin typing, it then recognizes that there aren't 100 characters and it does disable.

But, my code should re-enable the button if the length is not less than 100, i.e. when it reaches or exceeds 100 characters. However, it does not. What am I doing wrong?

$("#field").keyup(function() {
    el = $(this);
    $("#charNum").text(el.val().length);

    if(el.val().length < 100) {
        $('#submit').attr('disabled','true');
    } else {
        $('#submit').attr('disabled','false');
    }
});

• javascript

5 Answers 5

You want this in your JS:

$('#submit').removeAttr('disabled');

and this in your HTML:

<input type="submit" name="button" id="submit" value="do some stuff" disabled="disabled" style="float:left;width:160px;height:30px;"/>

Demo: http://jsfiddle/xqyWV/398/

To fix your html you just need to add a disabled attribute to your submit button.

<input type="submit" name="button" id="submit" value="do some stuff" style="float:left;width:160px;height:30px;" disabled="disabled" />

In you javascript the main issue is that you are setting the disabled attribute to the string "true" or "false". Change it to a Boolean true and false and you'll be all set.

$("#field").keyup(function(){
    el = $(this);
    $("#charNum").text(el.val().length);

    if(el.val().length > 100){
        $('#submit').attr('disabled', false);
    } else {
        $('#submit').attr('disabled', true);
    }
});

JsFiddle: http://jsfiddle/xqyWV/400/

For pleteness sake here is the same answer without jQuery:

HTML

<input type="submit" name="button" id="submit" value="do some stuff" disabled="disabled" style="float:left;width:160px;height:30px;"/>

document.getElementById('submit').removeAttribute('disabled');

Demo: http://jsbin./torug/1/edit

An easier way would just add an onclick:

<input type="submit" name="button" id="submit" value="do some stuff" style="float:left;width:160px;height:30px;"/>

and then in your <script> area, you can do:

document.getElementById('submit').setAttribute('onClick','functionname()');

By doing this you add an onClick so that the button can call a specific function.

By default the page will load it without an onClick. By adding the attribute you can the enable it.

Just add this in your HTML:

disabled="true"

... change it for this

<input type="submit" name="button" id="submit"  disabled="true"  value="do some stuff" style="float:left;width:160px;height:30px;" />

and add this in your JS:

$('#submit').removeAttr('disabled');