jQuery disable/enable submit button

Question

I have this HTML:

How can I do something li

Answer 1

I Hope below code will help someone ..!!! :)

jQuery(document).ready(function(){

    jQuery("input[type=submit]").prop('disabled', true);

    jQuery("input[name=textField]").focusin(function(){
        jQuery("input[type=submit]").prop('disabled', false);
    });

    jQuery("input[name=textField]").focusout(function(){
        var checkvalue = jQuery(this).val();
        if(checkvalue!=""){
            jQuery("input[type=submit]").prop('disabled', false);
        }
        else{
            jQuery("input[type=submit]").prop('disabled', true);
        }
    });

}); /*DOC END*/

Answer 2

or for us that dont like to use jQ for every little thing:

document.getElementById("submitButtonId").disabled = true;

Answer 3

you can also use something like this :

$(document).ready(function() {
    $('input[type="submit"]').attr('disabled', true);
    $('input[type="text"]').on('keyup',function() {
        if($(this).val() != '') {
            $('input[type="submit"]').attr('disabled' , false);
        }else{
            $('input[type="submit"]').attr('disabled' , true);
        }
    });
});

here is Live example

Answer 4

Try

let check = inp=> inp.nextElementSibling.disabled = !inp.value;

<input type="text" name="textField" oninput="check(this)"/>
<input type="submit" value="send" disabled />

Answer 5

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

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

The above enable code is more accurate than:

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

You can use both methods.

Answer 6

I had to work a bit to make this fit my use case.

I have a form where all fields must have a value before submitting.

Here's what I did:

  $(document).ready(function() {
       $('#form_id button[type="submit"]').prop('disabled', true);

       $('#form_id input, #form_id select').keyup(function() {
          var disable = false;

          $('#form_id input, #form_id select').each(function() {
            if($(this).val() == '') { disable = true };
          });

          $('#form_id button[type="submit"]').prop('disabled', disable);
       });
  });

Thanks to everyone for their answers here.