jQuery disable/enable submit button

I have this html:

<input type=text name=textField /> <input type=submit value=send /> 

How can I do something like this:

  • When the text field is empty the submit should be disabled (disabled=disabled).
  • When something is typed in the text field to remove the disabled attribute.
  • If the text field becomes empty again(the text is deleted) the submit button should be disabled again.

I tried something like this:

$(document).ready(
function()
{

  $('input[type=submit]').attr('disabled','disabled');

  $('input[type=text]').change(
function()
{

 
  if($(this).val != '')
{

 
 
  $('input[type=submit]').removeAttr('disabled');

 
  
}
  
});
 
});
 

... but it doesn't work. Any ideas? Thanks.

Text Copied From stackoverflow.com
on : Tue, Oct 20, 2009 Views : 1150237

Accepted Answer

The problem is that the change event fires only when focus is moved away from the input (e.g. someone clicks off the input or tabs out of it). Try using keyup instead:

$(document).ready(
function() 
{

   $(':input[type=submit]').prop('disabled', true);

   $('input[type=text]').keyup(
function() 
{

 
  if($(this).val() != '') 
{

 
 
 $(':input[type=submit]').prop('disabled', false);

 
  
}
   
});
  
});
 
Text Copied From stackoverflow.com
on : Tue, Oct 20, 2009

Ask Question

If you want to ask question you must LogIn or SignUp
Login SignUp

Quick Links

E-Magazines

@

Total Followers
Study Group Created
Study Group Joined
Following Teacher
Following Organization
Blog Articles Added
Questions Asked
Questions Answered
Jobs Posted
Total Members in Group
Questions asked by members
Tasks added in this Group

Please wait..

Ok

Login to Open ESchool OR Create your account    Login   SignUp