JavaScript: Change Events

Question

Hi, I tried to use the following event to catch all the changes in the text fields, select list in oracle apex application.
addEvent(document.getElementById('myinput'), 'change', function(event) {
     alert('The text has changed');
If user makes changes in text fields or select list, and if users wants to leave the page by button or tab, I want to warn the users the changes have been made. If users leave, then all the changes will be lost.
If users don't care if the data is lost or not, he should be able to other page.
If users care, then he should stay in the current page.
Question 1: where should I put this function?
Question 2: Where should I call this function for button click and tab click?
Thank you.
David

Answer 1

I don't have the full solution but I think you could use the event window.onbeforeunload to trigger the checkpoint function.
My idea is to create an array in javascript of the form items to check and then on page load get their values in another array. Then your onbeforeunload event function could go get the same set of values as they exist on the page.
So you would need 2 arrays eg itemsArr and valuesArr
itemsArr[0] = 'P1_ITEM1';
itemsArr[1] = 'P2_ITEM2';
and so on with your form fields to checkonload you populate the valuesArr
for (var i=0; i <= itemsArr.length; i++)
valuesArr[i] = $v(itemsArr);
onbeforeunload you do the same thing to get the values but this time compare them to the valuesArr values but this time you need a boolean switchvar isDirty = false;
for (var i=0; i <= itemsArr.length; i++)
if (valuesArr[i] != $v(itemsArr[i]))
{ isDirty = true;}
then just check if isDirty is true and if so display your message.
You could also wire up event handlers to each of these page items to set the dirty boolean but I think this is less obtrusive. Plus the onchange event would register a false positive if the user changed the field and then changed it back. This way you are just comparing intial state with end state.
Greg
Edited by: Greg Jarmiolowski on Sep 8, 2009 12:02 PM