jQuery: When entering text in input field, doesn't enable the button

Question

I have a jsfiddle here.

jQuery

$(function() {
    //var input = $('form :input[type="text"]')
    $('form :input[type="text"]').live('keyup', function() {
        $('form .create-playlist-button')
            .attr('disabled', $('form :input[type="text"]').val().length == 0);
    });
});

Needed

• When I start entering the data in the textbox, create should be enabled.

• When I remove all text from the textbox, create should be disabled.

I am very new to jQuery and this thing is not working for me.

Answer 1

$('form :input[type="text"]').live('keyup', function() {
      var val = $.trim(this.value); // this.value is faster than $(this).val()
      $('form .create-playlist-button').prop('disabled', val.length == 0);
});

DEMO

Here, I used .prop() instead of .attr(), according to jQuery doc .prop() should be use. I also used .trim() for removing the whitespace from the beginning and end of value.

---

About your code

In your code you used $('form :input[type="text"]') two times, one for bind event and one to getting the value of text field. But that is not necessary, because within keyup event handler function this will refers to that input element on which keyup event binded.

If you sometime need to use any selector multiple times for any purpose it will be better to cache that in a variable and reuse that variable. Just for example:

var input = $('form :input[type="text"]');
input.on('click', function() {
      alert( this.value );
      input.addClass('something');
});

---

If would be better if you use .on() instead of .live() for delegate event handler, because .live() has been deprecated.

You can use .on() like following:

$('form').on('keyup', ':input[type="text"]', function() {
   var val = $.trim(this.value);
   $('form .create-playlist-button').prop('disabled', val.length == 0);
});

---

Note

Syntax of .on() for delegate event handling is like:

$(staticContainer).on( eventName, target, handlerFunction )

Here, staticContainer point to an element which belong to DOM at page load, i.e which is not dynamic and also container of target on which you want to bind your event.

---

Just for some more go here

• .prop() vs .attr()

• http://forum.jquery.com/topic/whats-the-difference-between-jquery-attr-and-jquery-prop

Answer 2

Updated:

$(function(){
    //var input = $('form :input[type="text"]')
    $('form :input[type="text"]').live('keyup',function(){   
            $(this).closest('form').find('.create-playlist-button').prop('disabled',$(this).val().length==0);
     });
});

In the "keyup" handler, you use this (or $(this) to use it via jQuery) to get at the text field that's actually involved. I also changed the code to ensure you'll find the correct "companion" button. It looks up the chain of parent elements to find the enclosing <form>, then finds the button inside that form.

The way you're assigning the event handlers is deprecated. It should be:

    $('form').on('keyup', ':input[type="text"]', function(){ ...

Also if you checked for "keypress" instead of "keyup" you'd fix the bug wherein the button doesn't work until the second character.

edit — oh and one more thing: you should usually use .prop() to update attributes, not .attr(). It's a confusing thing about the newer jQuery API, but the times you need to use .attr are kind-of rare. Unfortunately, there's a ton of old instructional material out there that was written back before jQuery 1.6 was released.

Answer 3

You should use the .change() method !

And inside it juste do a test:

if ($(this).val().length > 0)
...
else
...

Answer 4

here ya go... using your original fiddle:

http://jsfiddle.net/9kKXX/4/

Answer 5

Only a small change is necessary.

$(function(){
//var input = $('form :input[type="text"]')
$('form :input[type="text"]').live('keyup',function(){   
        $('form .create-playlist-button').attr('disabled',$(this).val().length==0);
 });
 });

Fiddle: http://jsfiddle.net/9kKXX/36/