jQuery disable/enable submit button

Question

I have this HTML:

How can I do something li

Answer 1

It will work like this:

$('input[type="email"]').keyup(function() {
    if ($(this).val() != '') {
        $(':button[type="submit"]').prop('disabled', false);
    } else {
        $(':button[type="submit"]').prop('disabled', true);
    }
});

Make sure there is an 'disabled' attribute in your HTML

Answer 2

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

Answer 3

We can simply have if & else .if suppose your input is empty we can have

if($(#name).val() != '') {
   $('input[type="submit"]').attr('disabled' , false);
}

else we can change false into true

Answer 4

Al types of solution are supplied. So I want to try for a different solution. Simply it will be more easy if you add a id attribute in your input fields.

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

Now here is your jQuery

$("#textField").change(function(){
  if($("#textField").val()=="")
    $("#submitYesNo").prop('disabled', true)
  else
    $("#submitYesNo").prop('disabled', false)
});

Answer 5

For form login:

<form method="post" action="/login">
    <input type="text" id="email" name="email" size="35" maxlength="40" placeholder="Email" />
    <input type="password" id="password" name="password" size="15" maxlength="20" placeholder="Password"/>
    <input type="submit" id="send" value="Send">
</form>

Javascript:

$(document).ready(function() {    
    $('#send').prop('disabled', true);

    $('#email, #password').keyup(function(){

        if ($('#password').val() != '' && $('#email').val() != '')
        {
            $('#send').prop('disabled', false);
        }
        else
        {
            $('#send').prop('disabled', true);
        }
    });
});

Answer 6

The answers above don't address also checking for menu based cut/paste events. Below's the code that I use to do both. Note the action actually happens with a timeout because the cut and past events actually fire before the change happened, so timeout gives a little time for that to happen.

$( ".your-input-item" ).bind('keyup cut paste',function() {
    var ctl = $(this);
    setTimeout(function() {
        $('.your-submit-button').prop( 'disabled', $(ctl).val() == '');
    }, 100);
});