JQuery - Disable submit button unless original form data has changed

Question

I found the following code here (Disable submit button unless original form data has changed) and it works but for the life of me, I can't figure out how to change the properties, text and CSS of the same submit button.

I want the text, background and hover background to be different when the button is enabled/disabled and also toggle another DIV visible/hidden.

$('form')
.each(function(){
    $(this).data('serialized', $(this).serialize())
})
.on('change input', function(){
    $(this)             
        .find('input:submit, button:submit')
            .prop('disabled', $(this).serialize() == $(this).data('serialized'))
    ;
 })
.find('input:submit, button:submit')
    .prop('disabled', true);

Can someone please provide a sample. I have no hair left to pull out :-)

Answer 1

The answer you've copied isn't that great because a form doesn't have change or input events. Form elements do, instead. Therefore, bind the events on the actual elements within the form. Everything else looks okay except that you need to store the state of whether or not the stored/current data is equal to each other and then act accordingly. Take a look at the demo that hides/shows a div based on the state.

$('form')
.each(function() {
    $(this).data('serialized', $(this).serialize())
})
.on('change input', 'input, select, textarea', function(e) {
    var $form = $(this).closest("form");
	var state = $form.serialize() === $form.data('serialized');    
	$form.find('input:submit, button:submit').prop('disabled', state);
    
    //Do stuff when button is DISABLED
    if (state) {
        $("#demo").css({'display': 'none'});
    } else {
        //Do stuff when button is enabled
        $("#demo").css({'display': 'block'});
    }

    //OR use shorthand as below
    //$("#demo").toggle(!state);
})
.find('input:submit, button:submit')
.prop('disabled', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <input name="tb1" type="text" value="tbox" />
    <input name="tb2" type="text" value="tbox22" />
    <input type="submit" value="Submit" />
</form>

<div id="demo" style="margin-top: 20px; height: 100px; width: 200px; background: red; display: none;">Data isn't the same as before!</div>

And the rest could be done via CSS using the :disabled selector(CSS3) or whatever is appropriate.