Disable submit button with jQuery until all fields have values (input, radio, select, checkbox)

Question

I have a form with a several different field types, all of which need to be complete before submission. I have the submit button disabled and would like to remove the disabled attribute once all the fields have values.

I have examples from previous questions of this functionality working with radios and checkboxes and I've read a few answers which show how to achieve this using <input> fields only:

• Disabling submit button until all fields have values
• Disable submit button until all form inputs have data

But is there any way we can get check that all field types have values using jQuery? Including <select> and <textarea> fields?

Here's a Codepen of a basic version of my form and here's my HTML:

<div class="contact-form">
    <div class="contact-form__row">
        <p>Text field</p>
        <input type="text" />
    </div>
    <div class="contact-form__row">
        <p>Radio fields</p>
        <label for="radio-1">Radio 1</label>
        <input id="radio-1" type="radio" name="radio-option" />
        <label for="radio-2">Radio 2</label>
        <input id="radio-2" type="radio" name="radio-option" />
    </div>
    <div class="contact-form__row">
        <p>Checkbox fields</p>
        <label for="checkbox-1">Checkbox 1</label>
        <input id="checkbox-1" type="checkbox" />
        <label for="checkbox-2">Checkbox 2</label>
        <input id="checkbox-2" type="checkbox" />
    </div>
    <div class="contact-form__row">
        <p>Select options</p>
        <select id="my-select" name="my-select">
            <option value="a">Option A</option>
            <option value="b">Option B</option>
        </select>
    </div>
    <div class="contact-form__row">
        <p>Text area</p>
        <textarea></textarea>
    </div>
    <div class="contact-form__row">
        <input type="submit" value="Submit" disabled />
    </div>
</div>

Is this possible?

Answer 1

you can do like this with jQuery: (in codepen replace all your javascript with this code, I have tested it in your codepen)

<script>
$(function() {
    $('.contact-form').on('input',':input',function() {
        var inputs = $('.contact-form :input');
        var num_inputs = inputs.length;
        var num_filled = inputs.filter(function() { return !!this.value }).length;
        $('.contact-form :submit').prop('disabled',(num_filled<num_inputs));
    });
});
</script>

good luck!

Answer 2

A few remarks:

1. In the next snippet, I assume ALL inputs (except radio buttons) have to be filled in before making the form submittable, which does not necessarily represent all real life scenarios.
2. As mentioned, radios (in this example only 2) are given a special treatment since only one per group can be selected.
3. Concerning <select> s, one will be considered invalid if an empty option if selected (if one exists). In this example, your select tag always has a non-empty value, I added another to the markup to show its behavior.

Let me know if it works

 $(document).ready(function() { $(":input").on('input', function(){validate();}); $(":input").on('change', function(){validate();}); }); function validate() { var $submitButton = $("input[type=submit]"); var isValid = true; if($(':checkbox:checked').length != $(':checkbox').length) isValid = false; else if($(':radio:checked').length == 0) isValid = false; else{ $('input:text, textarea').each(function() { if($(this).val() == ''){ isValid = false; return false; } }); if(isValid){ $('select').each(function() { if($(this).val() == ''){ isValid = false; return false; } }); } } $submitButton.prop("disabled", !isValid); } 

 .contact-form { width: 400px; margin: 50px; } .contact-form__row { padding: 0 0 10px; margin: 0 0 10px; border-bottom: 1px solid grey; } p { font-weight: bold; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="contact-form"> <div class="contact-form__row"> <p>Text field</p> <input type="text" /> </div> <div class="contact-form__row"> <p>Radio fields</p> <label for="radio-1">Radio 1</label> <input id="radio-1" type="radio" name="radio-option" /> <label for="radio-2">Radio 2</label> <input id="radio-2" type="radio" name="radio-option" /> </div> <div class="contact-form__row"> <p>Checkbox fields</p> <label for="checkbox-1">Checkbox 1</label> <input id="checkbox-1" type="checkbox" /> <label for="checkbox-2">Checkbox 2</label> <input id="checkbox-2" type="checkbox" /> </div> <div class="contact-form__row"> <p>Select options</p> <select id="my-select" name="my-select"> <option value="a">Option A</option> <option value="b">Option B</option> </select> <select id="my-select" name="my-select"> <option></option> <option value="a">Option A</option> <option value="b">Option B</option> </select> </div> <div class="contact-form__row"> <p>Text area</p> <textarea></textarea> </div> <div class="contact-form__row"> <input type="submit" value="Submit" disabled /> </div> </div>