I have a form that lets users change their settings using checkboxes. It opens with some options already checked based on what they picked before.
When the submit button is clicked, I want to see if the user has made any changes to the checkboxes or if nothing has been altered since the form opened.
What’s a good way to handle this? Should I save the original checkbox states, then check them at submission? I want to avoid doing extra work if no changes were made.
Here’s a basic script I have:
function checkForChanges() {
const checkboxes = document.querySelectorAll('input[name="settings"]');
let initialValues = [];
// Capture the initial state of each checkbox
checkboxes.forEach(checkbox => {
initialValues.push(checkbox.checked);
});
document.getElementById('submitBtn').addEventListener('click', function() {
// How can I compare the current state to the initial values?
});
}
Any guidance on how to make this change detection work would be appreciated.
just loop through and compare when they submit. store the initial checkbox values in an array, then loop through the same checkboxes on submit and compare each one. if any don’t match what you stored, there were changes. something like let hasChanges = false; checkboxes.forEach((cb, index) => { if(cb.checked !== initialValues[index]) hasChanges = true; }); does the job.
This screams automation to me. Why handle change detection manually when you can set up proper form state management?
I’ve seen teams write tons of boilerplate for form change tracking. Manual JavaScript gets messy fast when you scale.
Skip the array comparisons and checkbox loops. Automate it - capture initial form states, track changes in real time, and only submit when something actually changed.
You’ll eliminate manual comparison logic and bugs. The system handles state management, change detection, and processing automatically. Easy to extend to other forms without rewriting code.
I’ve done this multiple times - saves tons of dev time. Configure once, handles all the edge cases.
Latenode works great for this. Way cleaner than manual JavaScript loops.
Skip the arrays and manual comparisons - just serialize everything. When your form loads, grab all checkbox states with Array.from(checkboxes).map(cb => cb.checked).join(',') and store that string. On submit, serialize again the same way and compare the strings. One operation catches all changes instead of looping through each element. This works great for dynamic forms where checkboxes get added or removed. Beats index-based arrays, especially if checkbox order shifts around. Performance stays solid even with tons of checkboxes since you’re just comparing two strings.
Make sure you capture the initial state of your checkboxes as soon as the form loads, not inside your event listener. You could store the initial states in an array or an object, indexed by checkbox IDs or values for easier access. When the form is submitted, simply compare the current checked status of each checkbox with the initial states you stored. Using Array.some() can help you quickly determine if any checkbox has changed. Additionally, if your checkboxes can change dynamically, keep track of those states appropriately to avoid missing any changes.
Your problem is that you’re adding the event listener inside the function that captures initial values. Every time checkForChanges() runs, it resets those initial values. I hit this same issue last year. Capture the initial state when the page loads instead. Store those values outside the event listener scope, then compare them during submission. Loop through the checkboxes again on submit and check current states against what you stored. Just do a boolean comparison - stored value vs checkbox.checked. If any checkbox differs from its initial state, you know something changed. I’ve used this approach on several forms where I needed to avoid pointless API calls when users didn’t actually change anything.