Settings Save button disable/enable

[psealock]

Submission Review Guidelines:

• I have followed the WooCommerce Contributing Guidelines and the WordPress Coding Standards.
• I have checked to ensure there aren't other open Pull Requests for the same update/change.
• I have reviewed my code for security best practices.
• Following the above guidelines will result in quick merges and clear and detailed feedback when appropriate.

Changes proposed in this Pull Request:

Closes Partial fix for #47393

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

1. Go to the all Settings screens and see the Save button is disabled. Make any change to the form and see that the Save button becomes enabled.

Changelog entry

• Automatically create a changelog entry from the details below.

Significance

• Patch
• Minor
• Major

Type

• Fix - Fixes an existing bug
• Add - Adds functionality
• Update - Update existing functionality
• Dev - Development related task
• Tweak - A minor adjustment to the codebase
• Performance - Address performance issues
• Enhancement - Improvement to existing functionality

Message

Update Settings to disable Save button unless modifications are made.

Comment

[github-actions]

Test using WordPress Playground

The changes in this pull request can be previewed and tested using a WordPress Playground instance.
WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Test this pull request with WordPress Playground.

Note that this URL is valid for 30 days from when this comment was last updated. You can update it by closing/reopening the PR or pushing a new commit.

[github-actions]

Hi @moon0326, @rjchow, @woocommerce/ghidorah

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

[moon0326]

Nice approach! LGTM and tested well 👍 🚀

[chihsuan]

Thanks for working on this and adding the tests! 👍

I confirmed that the Save button is disabled when no modifications are made and enabled when modifications are made.

However, if we reset the form after making modifications, the Save button is still enabled. What do you think disabling the Save button again when the form is reset?

It seems that we can achieve this by storing the initial values of the form fields and comparing them with the current values whenever an input event occurs.

$(document).ready(function() {
    // Store the initial values of the form fields
    var initialFormState = $('#exampleForm').serialize();

    // Function to check if the form values have changed
    function checkFormChanges() {
        var currentFormState = $('#exampleForm').serialize();
        if (currentFormState === initialFormState) {
            $('#saveButton').prop('disabled', true);
        } else {
            $('#saveButton').prop('disabled', false);
        }
    }

    // Listen for changes in any of the form fields
    $('#exampleForm input').on('input', checkFormChanges);
});

[adrianduffell]

What do you think disabling the Save button again when the form is reset?

That's a super idea @chihsuan! However I suggest we hold on it until we get feedback about the PR from developers (there will be communications about the change to mitigate risks to 3PD customization). I like that we're using an existing implementation to detect changes so I'd lean towards keeping our surface area small at first 🤔