[SOLVED] Event Chain detection

[StanLevin]

There is an onchange event handler attached to the INPUT element on the FORM. There are also two buttons Submit and Cancel that process form data.

I would like to detect if the onchange event handler for the form INPUT element occured as a result of user clicking on the Cancel button. In this case validation logic in the onchange event handler should not be activated.

Is there a way to detect this in JavaScript?

Thank you,
Stan.

[Rakuli]

I didn't think the reset button triggered the onchange event but if it does, it would be easy to avoid...

Just set a global variable.. and then set it to true when the cancel button is clicked... In your onchange function, just add some logic to aviod going any further in the function...

Code: Select all

var cancelClicked = false;

// this is the onchange function for the input element

function onchangeInput()
{
     if (cancelClicked)
     {
         cancelClicked = false;
         return;
     }
      // rest of the logic here
}

Then your reset button just has to look like this

HTML: Select all

<input type="reset" value="cancel" onclick="cancelClicked = true;" />

Cheers

[StanLevin]

This is exactly the issue itself:
the onclick handler is called only after the onchage handler completes.

the flag will be set after onchange and have no use in this case.

Is there such thing as an event queue in JS? I am puzzeled how to solve this one.

Regards,
Stan.

[Rakuli]

Instead of using onclick for the cancel button use onmousedown instead. Then when the mouse button is pressed down the variable is set. The actual reset functionality won't happen until a full click is completed

[StanLevin]

Rakuli, Great idea!

Really solves a lot of my application design problems.

The sequence of events noted:
onmousedown
onchange
onclick

Thank you,
Stan.