Prototype.js event observe click intercept and stop propagation

Question

I have a page that is built around a wrapper with some very defined logic. There is a Save button on the bottom of the wrapped form that looks like this:

<form>
... my page goes here...
<input id="submitBtnSaveId" type="button" onclick="submitPage('save', 'auto', event)" value="Save">
</form>

This cannot change...

Now, I'm writing some javascript into the page that gets loaded in "...my page goes here...". The code loads great and runs as expected. It does some work around the form elements and I've even injected some on-page validation. This is where I'm stuck. I'm trying to "intercept" the onclick and stop the page from calling "submitPage()" if the validation fails. I'm using prototype.js, so I've tried all variations and combinations like this:

document.observe("dom:loaded", function() {
    Element.observe('submitBtnSaveId', 'click', function (e) {
        console.log('Noticed a submit taking place... please make it stop!');
        //validateForm(e);
        Event.stop(e);
        e.stopPropagation();
        e.cancelBubble = true;
        console.log(e);
        alert('Stop the default submit!');
        return false;
    }, false);
});

Nothing stops the "submitPage()" from being called! The observe actually works and triggers the console message and shows the alert for a second. Then the "submitPage()" kicks in and everything goes bye-bye. I've removed the onclick attached to the button in Firebug, and my validation and alert all work as intended, so it leads me to think that the propagation isn't really being stopped for the onclick?

What am I missing?

Answer 1

I took the idea presented by Geek Num 88 and extended it to fully meet my need. I didn't know about the ability to overwrite the attribute, which was great! The problem continued to be that I needed to run submitPage() if all is good, and that method's parameters and call could be different per page. That ended up being trickier than just a simple call on success. Here's my final code:

document.observe("dom:loaded", function() {
    var allButtons = $$('input[type=button]');
    allButtons.each(function (oneButton) {
        if (oneButton.value === 'Save') {
            var originalSubmit = oneButton.readAttribute('onclick');
            var originalMethod = getMethodName(originalSubmit);
            var originalParameters = getMethodParameters(originalSubmit);
            oneButton.writeAttribute('onclick', null);
            Element.observe(oneButton, 'click', function (e) {
                if (validateForm(e)) {
                    return window[originalMethod].apply(this, originalParameters || []);
                }
            }, false);
        }
    });
});

function getMethodName(theMethod) {
    return theMethod.substring(0, theMethod.indexOf('('))
}

function getMethodParameters(theMethod) {
    var parameterCommaDelimited = theMethod.substring(theMethod.indexOf('(') + 1, theMethod.indexOf(')'));
    var parameterArray = parameterCommaDelimited.split(",");
    var finalParamArray = [];
    parameterArray.forEach(function(oneParam) {
        finalParamArray.push(oneParam.trim().replace("'","", 'g'));
    });
    return finalParamArray;
}

Answer 2

So based on the fact that you can't change the HTML - here's an idea.

leave your current javascript as is to catch the click event - but add this to the dom:loaded event

$('submitBtnSaveId').writeAttribute('onclick',null);

this will remove the onclick attribute so hopefully the event wont be called

so your javascript will look like this

document.observe("dom:loaded", function() {
    $('submitBtnSaveId').writeAttribute('onclick',null);
    Element.observe('submitBtnSaveId', 'click', function (e) {
        console.log('Noticed a submit taking place... please make it stop!');
        //validateForm(e);
        Event.stop(e);
        e.stopPropagation();
        e.cancelBubble = true;
        console.log(e);
        alert('Stop the default submit!');
        return false;

        submitPage('save', 'auto', e);
        //run submitPage() if all is good
    }, false);
});