Enable submit button if at least one input has value

vinothvkr vinothvkr #JavaScript#JQuery

Learn how to enable form submission when at least one input field contains a value using JavaScript and jQuery.

Enable submit button if at least one input has value

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.