CODEWITHSUNDEEP
javascripthtmlinternet-explorer
Allende
Allende

Reputation: 1482

Create input type=radio with pure Javascript and retrieve them by name (ie7 standards on ie9)

This script works on IE9:

var newAnswer = document.createElement("input");
newAnswer.setAttribute("type","radio");
newAnswer.setAttribute("id","1");
newAnswer.setAttribute("name","answers");

And generate this html:

<input name="answers" id="1" type="radio" value="1"/>

And I can create several input type=radio and retrieve them by name.

But if I set the document mode to ie7 standard each generated input looks like:

<input submitName="answers" id="1" type="radio" value="1"/>

(notice the name attribute appears as submitName)

And then I can't use something like:

var answers = document.getElementByName("answers");

Then the getElementsByName doesnt' work and also why is IE (document mode ie7 standard) creating this attribute "submitName" ? is this the expected behavior ? Can I make the code works in document mode ie7 as it works on ie9 mode ?

I've read a couple of answers question but I can't get it.

Upvotes: 3

Views: 356

Answers (1)

epascarello
epascarello

Reputation: 207511

Okay starting over from the last one, this one I just tested and it is working in IE7

var testName = null;
function createElementWithName (type, attrs) {
    if(testName ===null) {
        try{
            var x = document.createElement("<input />");
            testName = false;
        } catch(e) {
            testName = true;
        }
    }
    var htmlStr = testName || !attrs.name ? type : '<' + type + ' name="' + attrs.name + '">';
    var elem = document.createElement(htmlStr);    
    for (var prop in attrs) {
         elem.setAttribute(prop, attrs[prop]);   
    }    
    return elem;
}


var attrs = { type: "radio", name: "answers" };

attrs.id="foo1";
var newAnswer1 = createElementWithName("input", attrs);

attrs.id="foo2";
var newAnswer2 = createElementWithName("input", attrs);

attrs.id="foo3";
var newAnswer3 = createElementWithName("input", attrs);

document.getElementById("xxx").appendChild(newAnswer1);
document.getElementById("xxx").appendChild(newAnswer2);
document.getElementById("xxx").appendChild(newAnswer3);

JSFiddle: http://jsfiddle.net/cfC5r/1/show/

Upvotes: 3

Related Questions