Forum Moderators: open
here's an example:
<input type="submit" onclick="thankyou();validation();confirmation();" />
in my hypothetical example, let's say that "thankyou()" pops up an alert that says "thanks for pressing my button", "validation()" looks at the data and returns true or false, and "confirmation()" pops up a confirm (yes/no) box and also returns true or false.
"thankyou()" is just an alert, so it has no effect on whether the submission happens.
"validation()" does have an effect - if it returns true, the submission goes through, if it returns false, it does not.
"confirmation()", because it happens after validate(), has no effect at all. The previous event already returned a result, and that's the result that happened. confirmation() doesn't even fire. the word "return" takes care of that, dunnit.
The following simple examples illustrate:
<a href="404.php" onclick="return true;return false;" >true false</a>
<a href="404.php" onclick="return false;return true;" >false true</a>
<a href="404.php" onclick="return true;return true;" >true true</a>
<a href="404.php" onclick="return false;return false;" >false false</a>
That's an illustration where the events are put inline in the HTML. that's not really what I'm doing, but it illustrates the point.
This has come up because I've got a complex AJAX application that changes onsubmit and onclick events via user interaction in the app. Sometimes a field needs to be validated, sometimes it needs a confirmation. Sometimes neither. And often there are other fancy interactions going on that have been brought into play asynchronously of which my application may only become dimly aware by checking.
Before lunch today, the events were attached and detached from forms and links and buttons like so:
myform.onsubmit = function(){
return confirm('are you sure?');
}
...
myform.onsubmit = function(){
return isvalid();
}
But then came drama. Some elements need more than one event attached. As in the hypothetical example above, a form that needs to pass two tests: validate() and confirmation().
In the code above, I was basically overwriting the onsubmit event, not adding to it - so the "confirm" didn't happen.
I thought I could get away with adding events like so:
mything.addEvent('submit',function(){
return validation();
});
mything.addEvent('submit',function(){
return confirmation();
});
In the DOM in my brain (don't we all have one?), I imagined what I was creating with code was equivalent to this:
<a href="404.php" onclick="validation();confirmation();"
wonderful, it works... if you're just saying "thank you" and moving on. I can add event after event and they all happen, one after another.
that is... unless an event wants to return anything. the return happens... then it's all over.
try it:
<a href="404.php" onclick="alert('a');alert('b');alert('c');return true;alert('d');alert('e');return false;alert('f');" >try it</a>
today's struggle
how do I:
1) attach one event to a submit, an event which returns true/false.
2) then attach another event to the same submit, which also returns true/false
3) implicitly booleanize it all with "AND" - force both to return true before anything will react.
Due to the asynchronous manner in which I'm adding and removing these events, it's not good enough to just attach a confirmation() event and hope for the best. There might already be a validation() event attached. Or maybe even a pre-existing confirmation() event. or not. egads.
As I type this, I think that somehow each of my validation() and confirmation() functions need to get more sophisticated; checking if any other events in the same element have already returned something...
I only hope I explained the situation clearly; this is a sticky little logic knot disrupting my day. Any help is appreciated. Maybe I need to find a whole new approach.
Is there a "design pattern" for this situation?
mything.addEvent('submit',function(e){
e = new Event(e);
if (!validation()) {
e.stop();
return;
}
confirmation();
});
for case 3
as well returning a value, "return" terminates function.
