Trying to check if textfield has text, then enabling/disabling submit based on check

Question

Like the title says, I have a submit button for a form that I would like to be disabled unless there is text in the text box. The field is properly disabled, but when text is entered, the submit remains disabled.

Here is the HTML:

<form method="get" action="#">
    <input type="text" id="edit-combine" name="combined"/>
    <input type="submit" id="edit-submit-clone-of-combined-search" value="search"/>
</form>

Here is the jquery:

 if($('#edit-combine').val().length == 0){
            $('#edit-submit-clone-of-combined-search').prop("disabled", true);
    }else{
        $('#edit-submit-clone-of-combined-search').prop("disabled", false);
    }

I made a JSFiddle for this: http://jsfiddle.net/CR47/ZUmCp/

Answer 1

Unfortunately HTML/Js does not know your intention. So you need to help them by attaching your logic to an event handler bound to the text box, something like a keyup event in your case.

$('#edit-combine').on("keyup", function () {
      $('#edit-submit-clone-of-combined-search')
                    .prop("disabled", 
                            $('#edit-combine').val().length == 0);
}).keyup();

Demo

Worth looking:

keyup

Change

Answer 2

Your starting state depends on the existence of text in you textbox. After that, you can respond to change events on the text box by changing its state depending on the existence of text in the textbox. You are failing to attach your code to the textbox's change event.

You should not respond to keyup events, as other posters have said, because a user could paste a value into your text box using the mouse. Respond to the change event and everything will workout for the best. Trust me, I'm a professional :)