input.setAttribute('type', 'checkbox'); IE bug

Question

This problem shows only in ie.all other browser namely ff,chrome,safari,opera works well. It doesn't show chcekbox instead shows a value box...

code:

<html>
<head>
  <title></title>
 <style>
 *{margin:0;padding:0;}
 ul {
    padding:10px 10px 0 35px;
    list-style:none;
    }

 li{
 display:inline;
 text-weight:bold;
 color:#475D7F;
 }
 li img{margin-bottom:-2%;}
 </style>
<script language="JavaScript" type="text/javascript">
<!--

function DOM(obj,id){
var total=10;
var coll=3;
var row=total/coll;

var tar=document.getElementById(id);
var table=document.createElement('TABLE');
  table.border='0';
  tar.appendChild(table);
var tbdy=document.createElement('TBODY');
  table.appendChild(tbdy);

  for (var zx1=0;zx1<=row;zx1++){
   var tr=document.createElement('TR');
   tbdy.appendChild(tr);
   for (var zx2=0;zx2<coll;zx2++){
    var td=document.createElement('TD');
    var ul=document.createElement('UL');    
    var input=document.createElement('INPUT');
    var img=document.createElement('IMG');

    tr.appendChild(td);
    td.width='200';
    td.appendChild(ul);
    var li1=document.createElement('LI');
    li1.appendChild(input);
    ul.appendChild(li1);
    input.setAttribute("name", "friend");
    ***input.setAttribute('Type', 'checkbox');***
    input.setAttribute("value", "yap frnd");
    input.setAttribute("id", "xyz");


    var li2=document.createElement('LI');
    ul.appendChild(li2);
    li2.appendChild(img);
    img.setAttribute("src", "x.jpg");
    img.setAttribute("title", "x");
    img.setAttribute("alt", "x");
    img.setAttribute("style", "padding-bottom:-2%;");

    var li3=document.createElement('LI');
    ul.appendChild(li3);      
    li3.appendChild(document.createTextNode('Ataus Samad Rubel'));

   }
  } 

}
//-->
</script>
</head>

<body>
<select onchange="DOM(this,'target');" >
<option >DOM Method</option>
<option >do</option>
</select>
</body>
</html>

wish someone look into it..thanks for your appreciation.

score 12 · Accepted Answer · answered Sep 25 '10 at 11:29

12

You can't change the type attribute of an <input> or <button> after adding it to the DOM in IE, so change it before appending it, like this:

input.setAttribute("name", "friend");
input.setAttribute("type", "checkbox");
input.setAttribute("value", "yap frnd");
input.setAttribute("id", "xyz");
li1.appendChild(input);                 //this needs to happen after

answered Sep 25 '10 at 11:29

Nick Craver

623,446
136
1,297
1,155

perfect...thanks Nick & Darin.►li1.appendChild(input);◄►input.setAttribute("type", "checkbox");◄[lower case 't'] are what make it perfect.Thanks again. – neonant Sep 25 '10 at 11:37

score 1 · Answer 2 · answered Sep 25 '10 at 11:24

1

try:

input.setAttribute('type', 'checkbox');
                    ^

Notice the lowercase t.

answered Sep 25 '10 at 11:24

Darin Dimitrov

1,023,142
271
3,287
2,928

score 1 · Answer 3 · edited May 23 '17 at 10:33

1

Since IE doesn't support a change in an input type once it has been assigned, you should assign the type before adding it to the DOM.

edited May 23 '17 at 10:33

Community

1
1

answered Sep 25 '10 at 11:27

letronje

9,002
9
45
53

input.setAttribute('type', 'checkbox'); IE bug

3 Answers3

Linked