Check for changed form fields (scalable solution needed)

Hi!

I’m wondering if anyone here has a suggestion on checking for form fields that have changed.

I have a sample script which works but only for a specific number of fields and field names. Basically I need this script to work with any form name, any number of fields. E.g. Form A has 5 fields, and Form B has 10 fields

The script I’m working with is below. Any suggestions on a way to make this more flexible and scalable would be much appreciated.

var ids = new Array(‘name’, ‘gender’, ‘sendEmail’, ‘radVanilla’, ‘radChocolate’, ‘radStrawberry’);

var values = new Array(”, ”, ”, ”, ”, ”);

function populateArrays()
{
// assign the default values to the items in the values array
for (var i = 0; i < ids.length; i++)
{
var elem = document.getElementById(ids[i]);
if (elem)
if (elem.type == ‘checkbox’ || elem.type == ‘radio’)
values[i] = elem.checked;
else
values[i] = elem.value;
}

}

var needToConfirm = true;

window.onbeforeunload = confirmExit;
function confirmExit()
{
if (needToConfirm)
{
// check to see if any changes to the data entry fields have been made
for (var i = 0; i < values.length; i++)
{
var elem = document.getElementById(ids[i]);
if (elem)
if ((elem.type == ‘checkbox’ || elem.type == ‘radio’)
&& values[i] != elem.checked)
return “Your changes have not been saved. Are you sure you wish to leave this page?”;
else if (!(elem.type == ‘checkbox’ || elem.type == ‘radio’) &&
elem.value != values[i])
return “Your changes have not been saved. Are you sure you wish to leave this page?”;
}

// no changes – return nothing
}

}
</script>

Also in #JavaScript _↴