How to Enable and Disable a Submit Button with jQuery

By the end of this page, you will understand how to detect input changes with jQuery, read the current value of a text field correctly, and enable or disable a submit button based on whether the field is empty. You will also learn why .change() is often not enough for this task and why .val() must be called as a function.

The main concept here is reacting to user input and updating element state dynamically.

In jQuery, form elements can be changed after the page loads. A common example is disabling a submit button until the user enters valid input. This improves usability and can prevent incomplete form submissions.

There are two important ideas behind this:

1. Reading the current value of an input

To get the text currently inside an input field, jQuery uses:

$(selector).val()

Notice the parentheses. .val() is a function. If you write .val without parentheses, you are referring to the function itself, not the input's value.

2. Listening for the right event

The .change() event only fires when the input loses focus after its value has changed. That means it does not react immediately while the user is typing.

For live typing behavior, .input event is a better fit:

$('input').on('input', function () {
    // runs every time the value changes
});

Why this matters

This pattern appears often in real applications:

Think of the submit button as a door with an electronic lock.

• The text input is like a sensor.
• If the sensor detects no text, the door stays locked.
• If the sensor detects some text, the door unlocks.
• If the text is removed, the door locks again.

Your code's job is to keep checking the sensor and update the lock state immediately whenever the input changes.

The most common jQuery solution is:

$(document).ready(function () {
    const $text = $('input[type="text"]');
    const $submit = $('input[type="submit"]');

    $submit.prop('disabled', true);

    $text.on('input', function () {
        if ($(this).val().trim() !== '') {
            $submit.prop('disabled', false);
        } else {
            $submit.prop('disabled', true);
        }
    });
});

What this does

• Selects the text input and submit button
• Disables the submit button initially
• Listens for every input change
• Checks whether the field is empty
• Enables or disables the button accordingly

Better version with less repeated code

$(document).ready(function () {
     $text = $();
     $submit = $();

     () {
        $submit.(, $text.().() === );
    }

    ();
    $text.(, toggleSubmit);
});

Consider this code:

$(document).ready(function () {
    const $text = $('input[type="text"]');
    const $submit = $('input[type="submit"]');

    function toggleSubmit() {
        $submit.prop('disabled', $text.val().trim() === '');
    }

    toggleSubmit();
    $text.on('input', toggleSubmit);
});

Step-by-step trace

1. The page finishes loading.
2. jQuery runs the function inside $(document).ready(...).
3. $text stores the text input element.
4. $submit stores the submit button.
5. The toggleSubmit() function is created.
6. toggleSubmit() runs immediately.
   • If the input is empty, disabled becomes true.
   • So the submit button starts disabled.

This pattern is used in many practical situations:

Form validation

Disable the submit button until required fields are filled in.

Examples:

• contact forms
• login forms
• newsletter signup forms

Search interfaces

Enable a search button only when the user has typed a query.

Comment or message forms

Prevent empty comments or blank chat messages from being submitted.

Admin panels

Require a value before allowing an action such as creating a category, tag, or user role.

Filters and dashboards

Only allow a filter action when the user has entered meaningful criteria.

In all of these cases, the idea is the same: use the current form state to control whether an action is allowed.

In real projects, developers usually avoid scattering UI logic across many event handlers. Instead, they place the rule in one reusable function.

Common pattern: one validation function

function updateFormState() {
    const hasText = $text.val().trim() !== '';
    $submit.prop('disabled', !hasText);
}

This makes the code easier to maintain.

Guarding against invalid submission

Even if the button is disabled in the UI, validation should still happen when the form submits.

$('form').on('submit', function (event) {
    if ($text.val().trim() === '') {
        event.preventDefault();
    }
});

UI rules improve user experience, but submit-time validation protects correctness.

Using selectors efficiently

In larger codebases, developers often cache jQuery selectors instead of querying the DOM repeatedly.

const $form = $('form');
 $text = $form.();
 $submit = $form.();

Here are the most common mistakes beginners make with this pattern.

1. Using .val instead of .val()

Broken code:

if ($(this).val != '') {
    // wrong
}

Why it fails:

• .val is a function reference
• .val() actually calls the function and returns the input value

Correct code:

if ($(this).val() !== '') {
    // correct
}

2. Using .change() when you want live typing

Broken expectation:

$('input[type="text"]').change(function () {
    // this may not run while the user is typing
});

Why it fails:

// Select elements
const $text = $('input[type="text"]');
const $submit = $('input[type="submit"]');

// Disable button
$submit.prop('disabled', true);

// Enable button
$submit.prop('disabled', false);

// Check current value
$text.val()

// Treat spaces as empty
$text.val().trim() === ''

// Update on every keystroke
$text.on('input', function () {
    $submit.prop('disabled', $(this).val().trim() === '');
});

Key rules

• Use .val() not .val
• Use .on('input', ...) for live updates
• Use .prop('disabled', true/false) for boolean state
• Use .trim() if spaces should count as empty

Why is my jQuery submit button code not working?

A common reason is using .val instead of .val(), or using .change() when you actually need the input event.

Should I use .attr() or .prop() to disable a button in jQuery?

Use .prop() for boolean properties like disabled. It is the preferred modern jQuery approach.

Why does .change() not fire while I type?

Because .change() usually runs only after the input loses focus and its value has changed. For live typing, use .on('input', ...).

How do I prevent users from submitting only spaces?

Use .trim() before checking the value:

$text.val().trim() === ''

Do I still need form validation if the button is disabled?

Yes. Client-side disabling improves user experience, but you should still validate on form submission and on the server.

• jQuery event handling — related because this pattern depends on responding to user actions like typing.
• Form validation — related because enabling or disabling submit buttons is a basic validation technique.
• DOM properties vs attributes — related because disabled is best handled as a property with .prop().
• jQuery selectors — related because you need to target the correct input and button elements.
• JavaScript string trimming — related because .trim() helps treat whitespace-only input as empty.
• Submit event handling — related because forms should still be validated when submission happens.
• Client-side vs server-side validation — related because UI checks are helpful, but server validation is still necessary.