JSFiddle - React, Tailwind, and code Playground

by mblase75

HTML

<form id="formid">
    <input type="text" name="f1"/><br/>
    <textarea rows="4" cols="40" name="f2"></textarea><br/>
    <select name="f3">
        <option value="">select one:</option>
        <option value="0">zero</option>
        <option value="1">one</option>
        <option value="2">two</option>
    </select><br/>
    <input type="submit"/>
</form>

JavaScript

$(document).ready(function() {
    $form = $('#formid'); // cache
    $form.find(':input[type="submit"]').prop('disabled', true); // disable submit btn
    $form.find(':input').change(function() { // monitor all inputs for changes
        var disable = false;
        $form.find(':input').not('[type="submit"]').each(function(i, el) { // test all inputs for values
            if ($.trim(el.value) === '') {
                disable = true; // disable submit if any of them are still blank
            }
        });
        $form.find(':input[type="submit"]').prop('disabled',disable);
    });
});