-
Notifications
You must be signed in to change notification settings - Fork 10.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Settings Save button disable/enable #47444
base: trunk
Are you sure you want to change the base?
Conversation
Test using WordPress PlaygroundThe changes in this pull request can be previewed and tested using a WordPress Playground instance. 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. |
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: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice approach! LGTM and tested well 👍 🚀
a84bf4b
to
ba78b2d
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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);
});
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 🤔 |
Submission Review Guidelines:
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:
Changelog entry
Significance
Type
Message
Update Settings to disable Save button unless modifications are made.
Comment