SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with attribute 'checked' in IE using the DOM

    I have a function to create a radio input element, using the DOM. I passed to it four parameters: parent_node, name, array ([[value0, display0], [value0, display0], [value0, display0], ...]), defaultValue. It works OK with FF and almost with IE 6. The problem is that it is not taken the 'checked' attribute for the default value in IE; I changed the line to the commented one and did not work either. Even I thought that when no default value is given, the explorer will take the first one, but IE is not taken it.


    preparaRadio: function (nodoPadre, nombreEntrada, arregloRadio, valPredeterminado)
    {
    for (var i=0, len=arregloRadio.length; i < len; i++)
    {
    var radio = ...
    ...
    if (valPredeterminado == arregloRadio[i][0]) radio.setAttribute('checked', true);
    // if (valPredeterminado == arregloRadio[i][0]) radio.checked = true;
    ...
    }
    }

    Is there anyone with any help, please?

  2. #2
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Location
    Manchester, UK
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with attribute 'checked' in IE using the DOM

    Hi,

    Try using the value attribute like in the following snippet:

    Code:
    if(form.elements[i].type == 'radio') {
        			if(form.elements[i].checked) {
        				str += form.elements[i].name + "=" + form.elements[i].value + "&";
        			}
        		}
    hope it helps

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem is that I do not have the radio element, I do not have a form. I am creating the radio element with the DOM and I want to put the checked attribute on the right element.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Location
    Manchester, UK
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with attribute 'checked' in IE using the DOM

    Hi,

    Are u using IE6 because I dont think it supports DOM insertion of radio buttons.
    I found this workaround:

    Code:
    function DynamicallyCreate2RadioButtons()
    {
    var LabelFirstInput = document.createElement("label");
    var LabelSecondInput = document.createElement("label");
    if(document.all && !window.opera && document.createElement)
    /*
    MSIE 6 for windows does not support DOM-insertion of radio buttons. The following code works around that lack of support.
    */
    	{
    	var FirstInput = document.createElement("<input type='radio' name='radiotest' id='idFirstInputRadio' value='first choice'>");
    	var SecondInput = document.createElement("<input type='radio' name='radiotest' id='idSecondInputRadio' value='second choice'>");
    	}
    else if(document.createElement && document.createTextNode)
    	{
    	var FirstInput = document.createElement("input");
    	var SecondInput = document.createElement("input");
    	FirstInput.type = SecondInput.type = "radio";
    	FirstInput.name = SecondInput.name = "radiotest";
    	FirstInput.id = "idFirstInputRadio";
    	SecondInput.id = "idSecondInputRadio";
    	FirstInput.value = "first choice";
    	SecondInput.value = "second choice";
    	}
    else {return};
    
    LabelFirstInput.appendChild(FirstInput);
    LabelFirstInput.htmlFor = "idFirstInputRadio";
    LabelFirstInput.appendChild(document.createTextNode("First option"));
    document.forms[0].childNodes[0].appendChild(LabelFirstInput);
    
    document.forms[0].childNodes[0].appendChild(document.createElement("br"));
    
    LabelSecondInput.appendChild(SecondInput);
    LabelSecondInput.htmlFor = "idSecondInputRadio";
    LabelSecondInput.appendChild(document.createTextNode("Second option"));
    document.forms[0].childNodes[0].appendChild(LabelSecondInput);
    }
    source :

    http://gtalbot.org/DHTMLSection/Dyna...ioButtons.html

    then view source

    hope it helps

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, the IE, I am using, is supporting it. As I said before, in IE it is almost OK, the only problem is with the 'checked' attribute.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Location
    Manchester, UK
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with attribute 'checked' in IE using the DOM

    Hi,

    Ok, I am aware that the order of statements is important, IE doesnt care what you do to a checbox/radio before it is inserted, so if you set the checked attribute before it was inserted it will appear unchecked even though a debug statement might say "checked/true", Also the type must be specified, before append. Try and set the checked attribute after it has been inserted.

    Code:
    var obj = getObjectRefByID(someID); 
    var cbx = document.createElement("input"); 
    cbx.type = "checkbox"; 
    cbx.id = "myCBX"; 
    obj.appendChild(cbx); 
    cbx.setAttribute("checked","checked");
    more:
    http://cf-bill.blogspot.com/2006/02/dom-gotchas.html

    hope it helps, (this time)

  7. #7
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I read the reference article. I put the 'radio.setAttribute("checked", "checked");' as the last command of the function, but still did not work. I put an alert after that and I got:

    <input checked="checked" id="tx_tipo0" value="Interna" name="tx_tipo" type="radio">Interna<input id="tx_tipo1" value="Externa" name="tx_tipo" type="radio">Externa

    But still, I do not get the the first radio (Interna) checked in IE.

  8. #8
    do righteous deeds
    Join Date
    Aug 2006
    Location
    Türkiye Turkey تركيى
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
     
    <body>
    <script type="text/javascript">
    
    function radyo() {
    var arr = ["interna", "externa"]
    for(var i = 0; i<2; i++){
    var lab = document.createElement('label');
    
    var r = document.createElement('input');
    r.type="radio";
    r.id="r"+i;
    r.name = "tx_tipo";
    r.value = arr[i];
    lab.appendChild(r);
    var txt = document.createTextNode(arr[i]);
    lab.appendChild(txt);
    document.body.appendChild(lab);
    }
    var el = document.getElementById('r0');
    el.setAttribute("checked",true); //  or el.setAttribute("checked","checked");
    alert(document.body.innerHTML);
    //alert(el.name);
    }
    </script>
    <input type="button" onclick="radyo()" value="add radio">

  9. #9
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks to muazzez, but still

    Thanks muazzez, I run your script and I got what I supposed. I tried it in my code, now I know what is the problem, but I do not know how to solve, maybe you or somebody could help

    The problem is that I am trying to append the input (type 'radio') elements to a cell. When I append those elements to a div element, no problem. This code does not work, but it works if I change the parent node (nodoPadre) from 'celdaVal' to 'mostrarRadio' at the end of the function crearRadio() getting the new line:

    preparaRadio(mostrarRadio, 'tx_lenguaje', arreglo, arreglo[1][0]);

    It always work in FF < 1.5, but IE.

    <html>
    <head><TITLE>Prueba de radio para IE</TITLE>
    <script type="text/javascript">

    function preparaRadio(nodoPadre, nombreEntrada, arregloRadio, valPredeterminado)
    {
    var el = null;
    for (var i=0, largo=arregloRadio.length; i < largo; i++)
    {
    var etiq = document.createElement('label');
    var tipoRadio = document.createElement('input');
    tipoRadio.type = 'radio';
    tipoRadio.id = nombreEntrada + i;
    tipoRadio.name = nombreEntrada;
    tipoRadio.value = arregloRadio[i][0];
    etiq.appendChild(tipoRadio);
    var txt = document.createTextNode(arregloRadio[i][1]);
    etiq.appendChild(txt);
    nodoPadre.appendChild(etiq);
    if (valPredeterminado == arregloRadio[i][0]) el = tipoRadio;
    }
    if (el) el.setAttribute("checked", true);
    alert (nodoPadre.innerHTML);
    }

    function crearRadio()
    {
    var mostrarRadio = document.getElementById('mostrarRadio');
    var arreglo = [['JavaScript', 'JavaScript'], ['PHP', 'PHP']];
    var laTabla = document.createElement("table");
    var fila = laTabla.insertRow(-1);
    var celdaTit = fila.insertCell(-1);
    var txt = document.createTextNode('LENGUAJE:');
    celdaTit.appendChild(txt);
    var celdaVal = fila.insertCell(-1);
    preparaRadio(celdaVal, 'tx_lenguaje', arreglo, arreglo[1][0]);
    mostrarRadio.appendChild(laTabla);
    }
    </script>
    </head>
    <body>
    <input type="button" onclick="crearRadio()" value="add radio">
    <div id='mostrarRadio'></div>
    </body>
    </html>

  10. #10
    do righteous deeds
    Join Date
    Aug 2006
    Location
    Türkiye Turkey تركيى
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
      
    <html>
    <body onload="start()">
    </body>
    <script type="text/javascript">
    function start() {
    var body =document.getElementsByTagName("body")[0];
    var table = document.createElement("table");
    var tbody = document.createElement("tbody");
    var tr = document.createElement("tr");
    var td = document.createElement("td");
    var txt = document.createTextNode("cell :"  );
        td.appendChild(txt);
    var myname = ["interna","externa"];
    var n, inp;
    for(var i = 0; i < 2; i++) {
           
    try
    {
    inp = document.createElement('<input type="radio" name='+myname[i]+' >');
    }
    catch(e)
    {
    inp = document.createElement("input");
    inp.type="radio";
    inp.name= myname[i];
    }
    
    td.appendChild(inp);  
    // n = (i&#37;2 ==0)? null : "checked"; // ie, ff, opera
    // n = (i%2 ==0)? false : true;  // ie, ff, opera
    n = (i%2 ==0)? false : true;
                   
    tr.appendChild(td);
    tbody.appendChild(tr);
    table.appendChild(tbody);
    body.appendChild(table);
    inp.checked = n;
    //alert(document.body.innerHTML);
    } 
    alert(document.body.innerHTML);
    }  
    </script>
    </html>
    Last edited by muazzez; Jun 29, 2007 at 12:40.

  11. #11
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sorry, but i am insertRow & insertCell

    Finally, I got it. I have to show the whole table & after that set the default value for the radio elements. Thanks.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •