JSFiddle - React, Tailwind, and code Playground

HTML

<form id="My50PageForm">
    
    <input name="forename" value="barny"> try editing this field<br>
    <input name="surname" value="something"><br>
    <select name="meal">
        <option value="none">No Meal</option>
        <option value="burger" selected="selected">Burger</option>
        <option value="zebra">Whole Zebra</option>
        </select><br />
    Do you need headphones: 
        <input type="radio" name="headphones" value="no" checked="checked">No</radio>
        <input type="radio" name="headphones" value="yes">Yes<radio>
        <input type="radio" name="headphones" value="deluxe">Deluxe<radio>
     <br>
    <button id="save">Check for changed values</button>
</form>

JavaScript

$(document).ready(function(){
    //Initial setup no longer needed. the DOM has the default states anyway...
    
    //here's where we filter the elements for ones which have changed
    $("#My50PageForm").submit(function(){        
        var elems = $("#My50PageForm :input").filter(function(value){
            var elem=$(this),
                type=this.tagName +"_"+(elem.attr("type")||""); // uniquely name the element tag and type
           
            switch (type){
                case "INPUT_radio": case "INPUT_checkbox":                    
                    return elem.prop("checked")!=elem.prop("defaultChecked");
                case "INPUT_text": case "INPUT_textarea": case "INPUT_":                 
                    return elem.val()!=elem.prop("defaultValue");
                case "SELECT_":
                    var options=$(this).find('option'),
                        defaultValue=options.first().val(); //use the first element's value as default in case no defaults are set
                    options.each(function (i,o) {
                        defaultValue=this.defaultSelected?this.value:defaultValue;
                    });
                    return $(this).val()!=defaultValue;
                    
                default:
                    console.log("type "+type+" not handled");
                    return false;
            }
         });
        
        if(elems.length){
            console.log(elems.serialize());
            return false;
            $.post("http://jsfiddle.net/example.cfm",
                   elems.serialize());
        }else{
           alert("nothing changed");   
        }         
        
        return false;
    });
});