HTML form with detectable changes and a reset button

Let’s create an HTML form with many different types of inputs with values and a hidden submit button and a reset button. Now, create a jQuery script that detects changes in input fields, unhides the submit and reset buttons, and hides them again if there is no noticeable change according to old values. Also, the reset button will reset values back to their original values.

DEMO

See the Pen Form with detectable changes by Puneet Sharma (@webdevpuneet) on CodePen.

HTML

<form class="dynamicForm">
    <label for="textInput">Text Input:</label>
    <input type="text" id="textInput" name="textInput" value="Default Text">
    <br><br>

    <label for="numberInput">Number Input:</label>
    <input type="number" id="numberInput" name="numberInput" value="10">
    <br><br>

    <label for="checkboxInput">Checkbox:</label>
    <input type="checkbox" id="checkboxInput" name="checkboxInput">
    <br><br>

    <label for="selectInput">Select:</label>
    <select id="selectInput" name="selectInput">
        <option value="option1" selected>Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
    </select>
    <br><br>

    <button type="submit" class="submitButton hidden">Submit</button>
    <button type="button" class="resetButton hidden">Reset</button>
</form>

<form class="dynamicForm">
    <label for="textInput">Text Input:</label>
    <input type="text" id="textInput" name="textInput" value="Default Text">
    <br><br>

    <label for="numberInput">Number Input:</label>
    <input type="number" id="numberInput" name="numberInput" value="10">
    <br><br>

    <label for="checkboxInput">Checkbox:</label>
    <input type="checkbox" id="checkboxInput" name="checkboxInput">
    <br><br>

    <label for="selectInput">Select:</label>
    <select id="selectInput" name="selectInput">
        <option value="option1" selected>Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
    </select>
    <br><br>

    <button type="submit" class="submitButton hidden">Submit</button>
    <button type="button" class="resetButton hidden">Reset</button>
</form>

CSS

.hidden {
display: none;
}

jQuery

$(document).ready(function () {
    $('.dynamicForm').each(function () {
        const form = $(this);
        const originalValues = {};

        // Save original values of the form
        form.find(':input').each(function () {
            const input = $(this);
            if (input.is(':checkbox')) {
                originalValues[input.attr('name')] = input.is(':checked');
            } else {
                originalValues[input.attr('name')] = input.val();
            }
        });

        const submitButton = form.find('.submitButton');
        const resetButton = form.find('.resetButton');

        function checkForChanges() {
            let hasChanges = false;
            form.find(':input').each(function () {
                const input = $(this);
                if (input.is(':checkbox')) {
                    if (input.is(':checked') !== originalValues[input.attr('name')]) {
                        hasChanges = true;
                    }
                } else {
                    if (input.val() !== originalValues[input.attr('name')]) {
                        hasChanges = true;
                    }
                }
            });

            if (hasChanges) {
                submitButton.removeClass('hidden');
                resetButton.removeClass('hidden');
            } else {
                submitButton.addClass('hidden');
                resetButton.addClass('hidden');
            }
        }

        // Attach change event to all input fields
        form.find(':input').on('input change', function () {
            checkForChanges();
        });

        // Reset button functionality
        resetButton.on('click', function () {
            form.find(':input').each(function () {
                const input = $(this);
                if (input.is(':checkbox')) {
                    input.prop('checked', originalValues[input.attr('name')]);
                } else {
                    input.val(originalValues[input.attr('name')]);
                }
            });
            checkForChanges();
        });
    });
});