Home > Web Front-end > JS Tutorial > How to Disable and Enable a Submit Button Based on Text Field Input in jQuery?

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

Patricia Arquette
Release: 2024-11-10 15:04:03
Original
1037 people have browsed it

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);
});
Copy after login

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);
  }
});
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template