Using Javascript to intercept an onClick

BillLeeLee

[H]F Junkie
Joined
Jul 2, 2003
Messages
13,486
It's been a while since I have done any real Javascript, and I have a fun one here.

I'm using a widget toolkit to build a multi-step web application. On each page of this webapp the user can decide to cancel the application (using a Cancel button), and they'll get redirected to the front page. However, I would like to pop up a window to the user asking them to confirm the Cancel press, just in case their hand slipped or something.

The problem is, I have no control over the Cancel button. It is generated by the widget toolkit (and I can't modify the source if I wanted to) and it already has a Javascript onClick action associated with it. I need to be able to intercept when the user clicks on the 'Cancel' button, present the confirmation window, get the confirmation, and then pass on the button's actual onClick function call if the user really wants to cancel.

Is this even possible?

If I'm missing some details, let me know. I am working with JSP if that is relevant.

Thanks!
 
I gather this is what you want more or less.

Code:
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            window.onload = function() {
                var b = document.body.getElementsByTagName("button")[0];
                var old = b.getAttribute("onclick");
                if (typeof old == "function") { // IE stuff
                    old = old.toString();
                    old = old.substring(old.indexOf("{") + 1, old.lastIndexOf("}"));
                }
                b.onclick = function() {
                    var ok = confirm("You want to?");
                    if (ok) {
                        eval(old);
                    }
                };
            };
        </script>
    </head>
    <body>
        <p><button onclick="alert('original stuff');">Cancel</button></p>
    </body>
</html>

Is 'this' used inside the onclick attribute anywhere?
 
I gather this is what you want more or less.

Code:
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            window.onload = function() {
                var b = document.body.getElementsByTagName("button")[0];
                var old = b.getAttribute("onclick");
                if (typeof old == "function") { // IE stuff
                    old = old.toString();
                    old = old.substring(old.indexOf("{") + 1, old.lastIndexOf("}"));
                }
                b.onclick = function() {
                    var ok = confirm("You want to?");
                    if (ok) {
                        eval(old);
                    }
                };
            };
        </script>
    </head>
    <body>
        <p><button onclick="alert('original stuff');">Cancel</button></p>
    </body>
</html>

Is 'this' used inside the onclick attribute anywhere?

Wow, thanks Shadow! I'll take a close look and test it out.
'this' is not used in the onClick, does it make a difference?
 
'this' is not used in the onClick, does it make a difference?

Since the eval() is done inside the function attached to the button, 'this' from the attribute value will end up pointing to the button element like it would if the onclick attribute value was executed normally. However, always check to make sure, especially for IE.
 
Since the eval() is done inside the function attached to the button, 'this' from the attribute value will end up pointing to the button element like it would if the onclick attribute value was executed normally. However, always check to make sure, especially for IE.

Ah, okay, thanks for the explanation.

I didn't really expect code, just a nudge in the right direction. However, your example is great and I'll do a lot more reading about the Javascript stuff in your code.

Thanks again Shadow! :)
 
The following way might be better as it avoids using eval and works as-is in IE.

Code:
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            window.onload = function() {
                var b = document.body.getElementsByTagName("button")[0];
                var old = b.onclick;
                b.onclick = function() {
                    var ok = confirm("You want to?");
                    if (ok) {
                        old.call(b);
                    }
                };
            };
        </script>
    </head>
    <body>
        <p><button onclick="alert('original stuff');">Cancel</button></p>
    </body>
</html>
 
Back
Top