How to Disable and Enable a Submit Button Based on Text Field Input in jQuery?

Disabling and Enabling Submit Button in jQuery Based on Text Field Input

Understanding the Issue:

You want to control the enabled/disabled state of a submit button based on the contents of a text field. The challenge arises when the text field becomes empty again, requiring the submit button to be re-disabled.

The Solution:

Initially, set the disabled attribute of the submit button:

$(document).ready(function() {
  $(':input[type="submit"]').prop('disabled', true);
});

Next, handle the keyup event of the text field to monitor its contents:

$('input[type="text"]').keyup(function() {
  var text = $(this).val();

  // If the text field is not empty, enable the submit button.
  if (text != '') {
    $(':input[type="submit"]').prop('disabled', false);
  }

  // If the text field becomes empty, disable the submit button.
  else {
    $(':input[type="submit"]').prop('disabled', true);
  }
});

With this approach, you can dynamically disable and enable the submit button based on the presence of input in the text field.

The above is the detailed content of How to Disable and Enable a Submit Button Based on Text Field Input in jQuery?. For more information, please follow other related articles on the PHP Chinese website!