JSFiddle - React, Tailwind, and code Playground

by gromer

HTML

<div id="exit-div"><a href="#" id="exit">Exit</a></div>

<div id="form-div">
    <form id="a-form">
        <p>
            <label for="name">Name:</label>
            <input type="text" name="name" value="Mike" />
        </p>
        <p>
            <label for="phone">Phone:</label>
            <input type="text" name="phone" value="8015554125" />
        </p>
        <p><input type="button" id="check" value="Check for Changes" /></p>
    </form>
</div>

<div id="results-div">
    <span>Results:</span>
    <ul id="results"></ul>
</div>

<div id="output-div">
    <span><a href="#" id="clear-output">Output:</a></span>
    <div ></div>
</div>

CSS

form p {
    margin-bottom: 10px;
}

div {
    padding: 10px;
}

JavaScript

$('input').each(function (index, element) {
    $this = $(this);
    $this.data('originalValue', $this.val());
});

$('#clear-output').click(function(e) {
    e.preventDefault();
    $('#output-div div').html('');
});

$('#exit').click(function(e) {
    e.preventDefault();
    
    var changeCount = getChangeCount();
    
    var result = false;
    if (changeCount > 0) {
        result = confirm("There are unsaved changes on the form, are you sure you want to exit?");
    }
    
    if (changeCount === 0 || result === true) {
        log('Exiting');
    }
});

$('#check').click(function (e) {
    e.preventDefault();
    
    $('#results li').empty();
    
    var changeCount = 0;
    $('input').each(function (index, element) {
        $this = $(this);
        var original = $this.data('originalValue');
        var current = $this.val();
        if (original !== current ) {
            changeCount += 1;
            $('#results').append('<li>' + original + ' -> ' + current + '</li>');
        }
    }).promise().done(function () {
        if (changeCount > 0) {
            log(changeCount + ' change(s).');
        } else {
            log('No changes.');
        }
    });
});

function getChangeCount() {
    var changeCount = 0;
    $('input').each(function (index, element) {
        $this = $(this);
        var original = $this.data('originalValue');
        var current = $this.val();
        if (original !== current ) {
            changeCount += 1;
            $('#results').append('<li>' + original + ' -> ' + current + '</li>');
        }
    });
    
    return changeCount;
}

function log(message) {
    $('#output-div div').append(new Date().toISOString() + ': ' + message + '<br />');
}