[wp-trac] [WordPress Trac] #35176: Update button should be disabled if there haven't been any changes.

[WordPress Trac]

#35176: Update button should be disabled if there haven't been any changes.
---------------------------+---------------------------------
 Reporter:  EmpireOfLight  |       Owner:
     Type:  enhancement    |      Status:  new
 Priority:  normal         |   Milestone:  Awaiting Review
Component:  Editor         |     Version:  4.4
 Severity:  normal         |  Resolution:
 Keywords:  close          |     Focuses:  ui, administration
---------------------------+---------------------------------

Comment (by khag7):

 Currently the post editor shows the publish/update button with the class
 "button-primary".

 What if we set the class to "button-secondary" and then updated the class
 to "button-primary" if a change is made. This way we never disable the
 button, but we do avoid drawing attention to the button until a change is
 made.

 Keep in mind, we do already offer an alert box if the user tries to close
 the window without saving changes.

 Try pasting this JS into your browser's js console after the page loads:

 {{{
         wp.updatePublishButton = function(){

                 alphasort =
 function(a,b){return((a.name<b.name)?-1:((a.name>b.name)?1:0));}
                 currentformvalues =
 jQuery.param(wp.postfields.serializeArray().sort(alphasort));

                 if ( typeof wp.initialformvalues === 'undefined' ) {
                         wp.initialformvalues = currentformvalues;
                 }

                 if ( wp.initialformvalues === currentformvalues ) {
                         jQuery('#publish').removeClass('button-
 primary').addClass('button-secondary');
                 } else {
                         jQuery('#publish').removeClass('button-
 secondary').addClass('button-primary');
                 }
         }

         wp.postfields = jQuery('#post :input').not('[type="hidden"]');
         wp.updatePublishButton();
         wp.postfields.on( 'change keyup', wp.updatePublishButton );
 }}}

 It's not perfect but its a start. Detects changes to form fields, compares
 to initial values, sets button class accordingly.

 It doesn't detect changes in the visual TinyMCE editor (except maybe when
 the autosave happens?) but it works for the text editor. It will take some
 tweaking to make it work with TinyMCE.

 I kind of like the behavior actually, seeing the button change from blue
 to gray lets me know that the form data is different than when I started.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/35176#comment:8>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform