0

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

Luke Willis
  • 8,429
  • 4
  • 46
  • 79
LiamRyan
  • 1,892
  • 4
  • 32
  • 61
  • What about using `element.onclick = function() {alert('test');};` instead of setting the attribute? – MaxArt Jul 05 '13 at 10:48
  • The best answer here is simply to drop support for IE7 entirely - hardly anyone is still using it' its user-base has dropped to below IE6 now. I appreciate that this may not be an option for you, depending on your situation, but if it is your decision to make, I'd recommend it because it's a lot of hassle to support IE7, and you'll get virtually zero gain from it. – Spudley Jul 05 '13 at 11:05

2 Answers2

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

Community
  • 1
  • 1
  • 1
    IE7 *does* support `setAttribute`. It can't be used to register an event listener though. – MaxArt Jul 05 '13 at 10:55
  • Wellll almost. In IE7 `setAttribute` sets the `onclick` attribute alright, but that's just it: it remains an attribute and it's not parsed and registered as an event listener. Which, semantically, is actually *good*, because you should rely on other methods to add event listeners. Like setting the `onclick` *property* (or better using `attachEvent` in IE6-8). – MaxArt Jul 05 '13 at 15:04
1

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.

Spudley
  • 166,037
  • 39
  • 233
  • 307
  • I was trying to avoid using JQuery, however it seems the best method after all – LiamRyan Jul 08 '13 at 09:10
  • jQuery isn't the only library you could use, but if you want to support old browsers like IE7 that have poor standards support, you do need something like it to normalise some of the compatibility issues. As I said elsewhere, your only other sensible option is to drop support for IE7; that will free you from a large percentage of the nasty compatibility quirks like this, and would make it easier to justify not using jquery. (you'd still have issues with IE8, but they're much fewer than IE7) – Spudley Jul 08 '13 at 10:25
  • I'd love to but dropping IE7 support just isn't an option at the moment. Thanks again – LiamRyan Jul 08 '13 at 11:38