Logo
Overview
Enable submit button if at least one input has value

Enable submit button if at least one input has value

vinothvkr vinothvkr
July 26, 2018
3 min read
JavaScript JQuery

Overview

This tutorial demonstrates how to dynamically enable a submit button only when at least one form field has been filled. This pattern is useful for:

  • Search forms with multiple optional filters
  • Advanced filters with “search with any criteria” logic
  • Auto-save features triggered by any field change

HTML Form Structure

Let’s create a simple form with multiple input types:

<form class="cc-form">
  <input type="email" id="email" class="email" name="email" placeholder="Email">
  <input type="text" id="name" class="name" name="name" placeholder="Name">
  <input type="text" id="city" class="city" name="city" placeholder="City">
  <select name="dropdown" id="dropdown" class="dropdown">
    <option value="" selected>Choose...</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </select>
  <input name="checkbox" type="checkbox" value="true">
  <button type="submit" id="search" disabled>Search</button>
</form>

Note that the button starts disabled — we’ll enable it via JavaScript when conditions are met.

jQuery Implementation

Here’s the complete jQuery solution:

$(document).ready(function(){
  // Initial validation on page load
  validateButton();


  // Attach event listeners to form inputs
  $('.cc-form input:text').keyup(validateButton);
  $('.cc-form select').change(validateButton);
  $('.cc-form input:checkbox').change(validateButton);
});


function validateButton() {
  let hasValue = false;


  // Check text inputs and select dropdowns
  $('.cc-form input:text, .cc-form select').each(function(){
    if ($.trim($(this).val()).length > 0) {
      hasValue = true;
    }
  });


  // Check checkboxes
  $('.cc-form input:checkbox').each(function() {
    if($(this).filter(':checked').length > 0) {
      hasValue = true;
    }
  });


  // Enable or disable button based on validation
  if(hasValue){
    $('#search').removeAttr('disabled');
  } else {
    $('#search').attr('disabled', 'disabled');
  }
}
Note

The logic inverts the common pattern: instead of disabling when invalid, we enable when valid. The button starts disabled and becomes enabled only when at least one field has a value.

How It Works

Page Load ($(document).ready))

When the page loads, validateButton() is called immediately. This ensures the button state is correct even if JavaScript loads after cached form values.

Event Listeners

Three event types are monitored:

  1. .keyup() — Fires every time a character is typed in text inputs
  2. .change() — Fires when a dropdown selection changes
  3. .change() — Fires when a checkbox is checked/unchecked

Validation Logic

The validateButton() function:

  1. Starts with hasValue = false
  2. Loops through all text inputs and selects using .each()
  3. $.trim($(this).val()).length > 0 — Checks if the field has content (trim removes whitespace)
  4. If any field has content, sets hasValue = true
  5. Checks all checkboxes separately using .filter(':checked')
  6. Enables button if hasValue is true, disables if false
Tip

The $.trim() function removes leading and trailing whitespace, so a field with only spaces won’t trigger the button.

Complete Working Example

// Alternative: More modern vanilla JavaScript approach
document.addEventListener('DOMContentLoaded', function() {
  const form = document.querySelector('.cc-form');
  const button = document.querySelector('#search');


  function validateButton() {
    const inputs = form.querySelectorAll('input:not([type="checkbox"]), select');
    const checkboxes = form.querySelectorAll('input[type="checkbox"]');


    let hasValue = false;


    // Check text inputs and selects
    inputs.forEach(input => {
      if (input.value.trim().length > 0) {
        hasValue = true;
      }
    });


    // Check checkboxes
    checkboxes.forEach(checkbox => {
      if (checkbox.checked) {
        hasValue = true;
      }
    });


    button.disabled = !hasValue;
  }


  // Listen to all input changes
  form.addEventListener('input', validateButton);
  form.addEventListener('change', validateButton);


  // Initial validation
  validateButton();
});

Testing Your Form

  1. Open the HTML page in a browser
  2. The submit button should be disabled initially
  3. Start typing in any field — the button becomes enabled
  4. Clear all fields — the button becomes disabled again
  5. Select a checkbox — the button becomes enabled
Warning

Remember to test all input types: text fields, dropdowns, and checkboxes to ensure the validation works correctly across your form.

Live Demo & Source Code

Summary

This technique provides a smooth user experience by giving visual feedback (enabled/disabled button) based on form state. It works with any combination of input types and is easily customizable for different validation logic.