A few days back I saw that one of my jQuery selector wasn't working in IE. We were using "Name" attribute to make the selection.
Example: $('input[name="someName"]').val();
But, hold on!! We had been using "Name" attribute for selecting DOM element for such a long time and how come we never saw this issue!!
I then tried to select few other elements in the same DOM having "Name" attribute using Developer tools console window (Pressing F12 in IE should take you to Developer tools). Ah, it works like a charm. So the issue is with just that INPUT element.
After closely inspecting the element and it's attribute, I found that there is no "Name" attribute to it and, we have an attribute called "SubmitName" (ever heard of this :) ?? )
Also after inspecting the jQuery code, I found that we were creating this INPUT element dynamically and appending it to the form.
$("< input/>", {
type: "hidden",
name: name,
value: "somevalue"}).appendTo($form);
Except for IE, in all other browsers we have the attribute as "Name" and not "SubmitName". As always no wonder if IE does things differently (read it as "IE has issues").
Wondered, would it be worth to create the dynamic INPUT element in a different way maybe something like:
var input = $('< input type="hidden" ' + 'name="' + name + '" value="someValue"/>');
$(input).appendTo($form);
Bingo!! We have the "Name" attribute now, and the selector works like a charm.
Summary:
If you are dynamically creating an element using jQuery and setting its "Name" attribute, Internet Explorer will render it as submitName and not Name.
Hope this helps someone!!
