最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

html - Change radio button name javascript not working in IE - Stack Overflow

programmeradmin8浏览0评论

I have a few radiobuttons in a jsp page. I run a javascript method once the page is loaded that seeks for certain radio buttons and change its name so they work like a radio group.

I'm doing it this way because the radio buttons are inside jsf table and I have no access to the name property when coding and I want all of the radio buttons work like a radio group.

Anyways the script run without problems and the radio buttons' names are changed properly.

But while this works in FF 3 (the work like a radio group) it doesn't work in IE 6 or IE7 though they have the same 'name' property. Does anyone know how can I solve this?

function setRadioGroup (nombreRadio){
    var listaRadios = document.getElementsByTagName('input');
    var tam = listaRadios.length;
    for (i = 0; i < tam; i++){
        if (listaRadios[i].type == 'radio' && listaRadios[i].title == 'Seleccionar'){
        listaRadios[i].name = nombreRadio;
       }
    }
}

EDIT: Added the code output of the webpage:

<form id="formulario" name="formulario" method="post"
    action="/serequp/faces/administracion/articulosPv.jspx"><input
    type="hidden" id="formulario:hidRegTablaArticulos"
    name="formulario:hidRegTablaArticulos" value="">
<div class="dr-pnl rich-panel " id="formulario:ContFormularios">
<div class="dr-pnl-h rich-panel-header cabeceraFormulario"
    id="formulario:ContFormularios_header">LISTADO DE GRUPOS DE
EQUIPAMIENTOS</div>
<div class="dr-pnl-b rich-panel-body cuerpoFormularios"
    id="formulario:ContFormularios_body">
<table id="formulario:botones">
    <tbody>
        <tr>
            <td class="estiloColumnas"><input id="formulario:j_id66"
                name="formulario:j_id66"
                onclick="A4J.AJAX.Submit('_viewRoot','formulario',event,{'parameters':{'formulario:j_id66':'formulario:j_id66'} ,'actionUrl':'/serequp/faces/administracion/articulosPv.jspx','similarityGroupingId':'formulario:j_id66'} );return false;"
                value="Crear" type="button"></td>
            <td class="estiloColumnas"><input id="formulario:j_id67"
                name="formulario:j_id67"
                onclick="A4J.AJAX.Submit('_viewRoot','formulario',event,{'parameters':{'formulario:j_id67':'formulario:j_id67'} ,'actionUrl':'/serequp/faces/administracion/articulosPv.jspx','similarityGroupingId':'formulario:j_id67'} );return false;"
                value="Modificar" type="button"></td>
            <td class="estiloColumnas"><input id="formulario:j_id68"
                name="formulario:j_id68"
                onclick="A4J.AJAX.Submit('_viewRoot','formulario',event,{'parameters':{'formulario:j_id68':'formulario:j_id68'} ,'actionUrl':'/serequp/faces/administracion/articulosPv.jspx','similarityGroupingId':'formulario:j_id68'} );return false;"
                value="Borrar" type="button"></td>
            <td></td>
        </tr>
    </tbody>
</table>
<table class="dr-table rich-table " id="formulario:tablaArticulos"
    border="0" cellpadding="0" cellspacing="0">
    <colgroup span="3"></colgroup>
    <thead class="dr-table-thead">
        <tr class="dr-table-subheader rich-table-subheader ">
            <th class="dr-table-subheadercell rich-table-subheadercell  "
                scope="col" id="formulario:tablaArticulos:j_id69header">
            <div id="formulario:tablaArticulos:j_id69header:sortDiv">Nombre</div>
            </th>
            <th class="dr-table-subheadercell rich-table-subheadercell  "
                scope="col" id="formulario:tablaArticulos:j_id71header">
            <div id="formulario:tablaArticulos:j_id71header:sortDiv">Nombre</div>
            </th>
            <th class="dr-table-subheadercell rich-table-subheadercell  "
                scope="col" id="formulario:tablaArticulos:j_id75header">
            <div id="formulario:tablaArticulos:j_id75header:sortDiv">Descripci&oacute;n</div>
            </th>
        </tr>
    </thead>
    <tbody id="formulario:tablaArticulos:tb">
        <tr class="dr-table-firstrow rich-table-firstrow ">
            <td class="dr-table-cell rich-table-cell center "
                id="formulario:tablaArticulos:0:j_id69">
            <table id="formulario:tablaArticulos:0:radioGroup1">
                <tr>
                    <td><input id="formulario:tablaArticulos:0:radioGroup1:0"
                        type="radio" name="formulario:tablaArticulos:0:radioGroup1"
                        value="1" onclick="updateSelected('hidRegTablaArticulos', '1');"
                        title="Seleccionar"><label
                        for="formulario:tablaArticulos:0:radioGroup1:0"></label></td>
                </tr>
            </table>
            </td>
            <td class="dr-table-cell rich-table-cell center "
                id="formulario:tablaArticulos:0:j_id71">fff</td>
            <td class="dr-table-cell rich-table-cell center "
                id="formulario:tablaArticulos:0:j_id75">PRUEBA SDS</td>
        </tr>
        <tr class="dr-table-firstrow rich-table-firstrow ">
            <td class="dr-table-cell rich-table-cell center "
                id="formulario:tablaArticulos:1:j_id69">
            <table id="formulario:tablaArticulos:1:radioGroup1">
                <tr>
                    <td><input id="formulario:tablaArticulos:1:radioGroup1:0"
                        type="radio" name="formulario:tablaArticulos:1:radioGroup1"
                        value="1" onclick="updateSelected('hidRegTablaArticulos', '2');"
                        title="Seleccionar"><label
                        for="formulario:tablaArticulos:1:radioGroup1:0"></label></td>
                </tr>
            </table>
            </td>
            <td class="dr-table-cell rich-table-cell center "
                id="formulario:tablaArticulos:1:j_id71">dd</td>
            <td class="dr-table-cell rich-table-cell center "
                id="formulario:tablaArticulos:1:j_id75">PRUEBA SDS</td>
        </tr>
    </tbody>
</table>
<script>
                            setRadioGroup('radioGroup1');
                        </script></div>
</div>
<table id="formulario:botonera">
    <tbody>
        <tr>
            <td><input id="formulario:j_id80" name="formulario:j_id80"
                onclick="A4J.AJAX.Submit('_viewRoot','formulario',event,{'parameters':{'formulario:j_id80':'formulario:j_id80'} ,'actionUrl':'/serequp/faces/administracion/articulosPv.jspx','similarityGroupingId':'formulario:j_id80'} );return false;"
                value="Grabar" type="button"></td>
        </tr>

    </tbody>
</table>
<input type="hidden" name="formulario" value="formulario"><input
    type="hidden" name="autoScroll" value=""><input type="hidden"
    name="formulario:j_idcl" value=""><input type="hidden"
    name="formulario:_link_hidden_" value=""><script
    type="text/javascript">function clear_formulario() {
_clearJSFFormParameters('formulario','',['formulario:j_idcl','formulario:_link_hidden_']);
}
function clearFormHiddenParams_formulario(){clear_formulario();}
function clearFormHiddenParams_formulario(){clear_formulario();}
clear_formulario();</script><input type="hidden" name="javax.faces.ViewState"
    value="!40dc077b"></form>*

I have a few radiobuttons in a jsp page. I run a javascript method once the page is loaded that seeks for certain radio buttons and change its name so they work like a radio group.

I'm doing it this way because the radio buttons are inside jsf table and I have no access to the name property when coding and I want all of the radio buttons work like a radio group.

Anyways the script run without problems and the radio buttons' names are changed properly.

But while this works in FF 3 (the work like a radio group) it doesn't work in IE 6 or IE7 though they have the same 'name' property. Does anyone know how can I solve this?

function setRadioGroup (nombreRadio){
    var listaRadios = document.getElementsByTagName('input');
    var tam = listaRadios.length;
    for (i = 0; i < tam; i++){
        if (listaRadios[i].type == 'radio' && listaRadios[i].title == 'Seleccionar'){
        listaRadios[i].name = nombreRadio;
       }
    }
}

EDIT: Added the code output of the webpage:

<form id="formulario" name="formulario" method="post"
    action="/serequp/faces/administracion/articulosPv.jspx"><input
    type="hidden" id="formulario:hidRegTablaArticulos"
    name="formulario:hidRegTablaArticulos" value="">
<div class="dr-pnl rich-panel " id="formulario:ContFormularios">
<div class="dr-pnl-h rich-panel-header cabeceraFormulario"
    id="formulario:ContFormularios_header">LISTADO DE GRUPOS DE
EQUIPAMIENTOS</div>
<div class="dr-pnl-b rich-panel-body cuerpoFormularios"
    id="formulario:ContFormularios_body">
<table id="formulario:botones">
    <tbody>
        <tr>
            <td class="estiloColumnas"><input id="formulario:j_id66"
                name="formulario:j_id66"
                onclick="A4J.AJAX.Submit('_viewRoot','formulario',event,{'parameters':{'formulario:j_id66':'formulario:j_id66'} ,'actionUrl':'/serequp/faces/administracion/articulosPv.jspx','similarityGroupingId':'formulario:j_id66'} );return false;"
                value="Crear" type="button"></td>
            <td class="estiloColumnas"><input id="formulario:j_id67"
                name="formulario:j_id67"
                onclick="A4J.AJAX.Submit('_viewRoot','formulario',event,{'parameters':{'formulario:j_id67':'formulario:j_id67'} ,'actionUrl':'/serequp/faces/administracion/articulosPv.jspx','similarityGroupingId':'formulario:j_id67'} );return false;"
                value="Modificar" type="button"></td>
            <td class="estiloColumnas"><input id="formulario:j_id68"
                name="formulario:j_id68"
                onclick="A4J.AJAX.Submit('_viewRoot','formulario',event,{'parameters':{'formulario:j_id68':'formulario:j_id68'} ,'actionUrl':'/serequp/faces/administracion/articulosPv.jspx','similarityGroupingId':'formulario:j_id68'} );return false;"
                value="Borrar" type="button"></td>
            <td></td>
        </tr>
    </tbody>
</table>
<table class="dr-table rich-table " id="formulario:tablaArticulos"
    border="0" cellpadding="0" cellspacing="0">
    <colgroup span="3"></colgroup>
    <thead class="dr-table-thead">
        <tr class="dr-table-subheader rich-table-subheader ">
            <th class="dr-table-subheadercell rich-table-subheadercell  "
                scope="col" id="formulario:tablaArticulos:j_id69header">
            <div id="formulario:tablaArticulos:j_id69header:sortDiv">Nombre</div>
            </th>
            <th class="dr-table-subheadercell rich-table-subheadercell  "
                scope="col" id="formulario:tablaArticulos:j_id71header">
            <div id="formulario:tablaArticulos:j_id71header:sortDiv">Nombre</div>
            </th>
            <th class="dr-table-subheadercell rich-table-subheadercell  "
                scope="col" id="formulario:tablaArticulos:j_id75header">
            <div id="formulario:tablaArticulos:j_id75header:sortDiv">Descripci&oacute;n</div>
            </th>
        </tr>
    </thead>
    <tbody id="formulario:tablaArticulos:tb">
        <tr class="dr-table-firstrow rich-table-firstrow ">
            <td class="dr-table-cell rich-table-cell center "
                id="formulario:tablaArticulos:0:j_id69">
            <table id="formulario:tablaArticulos:0:radioGroup1">
                <tr>
                    <td><input id="formulario:tablaArticulos:0:radioGroup1:0"
                        type="radio" name="formulario:tablaArticulos:0:radioGroup1"
                        value="1" onclick="updateSelected('hidRegTablaArticulos', '1');"
                        title="Seleccionar"><label
                        for="formulario:tablaArticulos:0:radioGroup1:0"></label></td>
                </tr>
            </table>
            </td>
            <td class="dr-table-cell rich-table-cell center "
                id="formulario:tablaArticulos:0:j_id71">fff</td>
            <td class="dr-table-cell rich-table-cell center "
                id="formulario:tablaArticulos:0:j_id75">PRUEBA SDS</td>
        </tr>
        <tr class="dr-table-firstrow rich-table-firstrow ">
            <td class="dr-table-cell rich-table-cell center "
                id="formulario:tablaArticulos:1:j_id69">
            <table id="formulario:tablaArticulos:1:radioGroup1">
                <tr>
                    <td><input id="formulario:tablaArticulos:1:radioGroup1:0"
                        type="radio" name="formulario:tablaArticulos:1:radioGroup1"
                        value="1" onclick="updateSelected('hidRegTablaArticulos', '2');"
                        title="Seleccionar"><label
                        for="formulario:tablaArticulos:1:radioGroup1:0"></label></td>
                </tr>
            </table>
            </td>
            <td class="dr-table-cell rich-table-cell center "
                id="formulario:tablaArticulos:1:j_id71">dd</td>
            <td class="dr-table-cell rich-table-cell center "
                id="formulario:tablaArticulos:1:j_id75">PRUEBA SDS</td>
        </tr>
    </tbody>
</table>
<script>
                            setRadioGroup('radioGroup1');
                        </script></div>
</div>
<table id="formulario:botonera">
    <tbody>
        <tr>
            <td><input id="formulario:j_id80" name="formulario:j_id80"
                onclick="A4J.AJAX.Submit('_viewRoot','formulario',event,{'parameters':{'formulario:j_id80':'formulario:j_id80'} ,'actionUrl':'/serequp/faces/administracion/articulosPv.jspx','similarityGroupingId':'formulario:j_id80'} );return false;"
                value="Grabar" type="button"></td>
        </tr>

    </tbody>
</table>
<input type="hidden" name="formulario" value="formulario"><input
    type="hidden" name="autoScroll" value=""><input type="hidden"
    name="formulario:j_idcl" value=""><input type="hidden"
    name="formulario:_link_hidden_" value=""><script
    type="text/javascript">function clear_formulario() {
_clearJSFFormParameters('formulario','',['formulario:j_idcl','formulario:_link_hidden_']);
}
function clearFormHiddenParams_formulario(){clear_formulario();}
function clearFormHiddenParams_formulario(){clear_formulario();}
clear_formulario();</script><input type="hidden" name="javax.faces.ViewState"
    value="!40dc077b"></form>*
Share Improve this question edited Apr 24, 2009 at 10:22 Averroes asked Apr 24, 2009 at 8:43 AverroesAverroes 4,2286 gold badges52 silver badges64 bronze badges 1
  • Could you please provide some more context (your HTML page)? – Manrico Corazzi Commented Apr 24, 2009 at 9:49
Add a ment  | 

1 Answer 1

Reset to default 6

I finally got the answer!

The solution e from this blog, but with some modification (the blog, as many others, solve the problem for create a new element, not to modify an existant one).

The problem is that Internet Explorer does not allow some attributes modification during the run time. One of these is the attribute name. As it can not be modified, the behaviour is not what you're expecting. The solution is to create a new element, remove the old one and replace it by the new one.

Here the solution (work with Firefox 3 and IE 7):

<script>
function setRadioGroup (name){
  var listaRadios = document.getElementsByTagName('input');
  var tam = listaRadios.length;
  for (i = 0; i < tam; i++){
    cur = listaRadios[i];
    if (cur.type == 'radio' ){
      try {
      // if not IE, raise an error and go to catch.            
          element = document.createElement('<input onclick="alert(this.name + this.value);" type="radio" name="' + name + '" value="' + cur.value + '">');
          parentNode = cur.parentNode;
          parentNode.insertBefore(element, cur);
          parentNode.removeChild(cur);
        } catch (err ) {
          cur.setAttribute('name', name);
          cur.setAttribute('onclick', 'alert(this.name + this.value);');
        }
     }
  }
}
</script>

<html>
  <head>
    <title>My Page</title>
  </head>
  <body onload="setRadioGroup('test')">
    <form name="myform" action="http://www.mydomain./myformhandler.cgi" method="POST">
      <div align="center"><br>
        <input type="radio" value="Milk"> Milk<br>
        <input type="radio" value="Butter" > Butter<br>
        <input type="radio" value="Cheese"> Cheese
        <hr>
        <input type="radio" value="Water"> Water<br>
        <input type="radio" value="Beer"> Beer<br>
        <input type="radio" value="Wine" > Wine<br>
      </div>
    </form>
  </body>
</html>
发布评论

评论列表(0)

  1. 暂无评论