JSFiddle - React, Tailwind, and code Playground

by BenjaminRay

HTML

<form id="myForm">
    <label for="firstName">First name:</label>
    <input id="firstName" type="text" name="fname" value="defaultval1" />
    <br />
    <label for="lastName">Last name:</label>
    <input id="lastName" type="text" name="lname" value="defaultval2" />
    <br />
    <br />
    <input id="btnSubmit" type="button" value="Submit" />
    <input id="btnReset" type="button" value="Reset" />
</form>

JavaScript

function hasAnythingChanged() {
    var hasChanged = false;
    $('#myForm :input[type=text]').each(function () {
        if (this.defaultValue != this.value) {
            hasChanged = true;
        }
    });
    return hasChanged;
}

$(function () {
    $('#btnReset').on('click', function () {
        var form = document.getElementById("myForm");
        form.reset();
    });

    $('#btnSubmit').on('click', function () {
        event.preventDefault();
        if (hasAnythingChanged()) {
            alert('Submitting at least one changed value!');
            // Do your submit action here
        } else {
            alert('Please change at least one value.')
            return false;
        }
    });
});