Internet Explorer 7 onclick event on submit button does not fire

Question

I have a form which submits via ajax to the back-end and I'm writing a general disable function in javascript that I can use to set the onclick of an element. Typing this into the browser so ignore any syntax errors in the following.

function(elementID , processingText) {
    var element = document.getElementById(elementID);
    if (element) {
        element.setAttribute("onClick", "alert('test')");
    }
}

So basically the element should have an onclick event to set an alert. I can confirm that the onclick attribute is being set correctly and it fires in IE8+, Chrome and Firefox. It will not fire in IE7.

The element I'm testing on is a submit button in a form (one form on the page). It has many fields and one submit button.

EDIT The code dispatches with an action so it should submit anyway but not until after the alert has been acknowledged /EDIT

I've trawled the net for the past two hours and the following solutions do not work or are not an option-

Add a hidden input field to form. Wrap submit button in tag and set the onclick in this tag. Changing case of onclick to onClick

Any solutions which involve altering the html without using javascript are not an option, I'm trying to create a general disableElement function. I can target the script at IE7 so it does not have to work in all browsers, just IE7.

Any help would be greatly appreciated

Answer 1

IE 7 does support setAttribute method but it seems that it is not possible to change an onclick attribute with it. For more info about this issue check this: Why does an onclick property set with setAttribute fail to work in IE?

Cheers

Answer 2

IE7 has a lot of compatibility issues, of which this is just one. If you're writing javascript that needs to be compatible with IE7, you will end up writing a lot of redundant code that does the same thing in two different ways to cater for different browsers you're supporting.

Issues like this in old browsers are precicely the reason why libraries like jQuery exist. jQuery does a lot of things, but one thing it does very well is iron out many of these nasty little quirks that crop up when writing cross-browser javascript.

The cross-browser issues have become less important in recent years, as modern browsers (including IE) have much better standards support, but if you're supporting old browsers , and old IE versions in particular, my recommendation is to use jQuery (or a similar library), because they have already solved this problem, and plenty of others that will catch you out.

If you do use jQuery, your code will become:

$(element).click(function() {alert('test');});

Before anyone points it out, yes I know the OP didn't specify jQuery in the question, and may not want a jQuery answer, but in this case I would say it is the best answer available, because if you don't use it, you will end up having to write much of the same compatibility code yourself that is already in jQuery.