Sois una referencia para mí y para mucha gente a la hora de solucionar problemas y aprender de la experiencia de la comunidad que aquí escribe. Por eso, en mi primer post deseo daros las gracias por toda la ayuda recibida de Forosdelweb.com para llevar a buen puerto mis proyectos a traves de vuestras F.A.Q's y posts!!
Dicho esto, el asunto que me trae es un problema relacionado con los input radio de un formulario al añadirlo de forma dinámica con JavaScript. Me explico:
1º - La función que realiza esto: por un lado se crea cada nuevo contendio html siempre dentro del formulario claro, formado por varios tipos de input. Por otro lado se aplica un efecto visual con un fade de color en un campo. El contador para cada nuevo contenido generado que aplica a cada input y finalmente la función que borra dicho contenido.
Código:
2º- Parte del formulario html. Dentro del formulario en una etiqueta div (divTxt) se genera el código html resuelto por addFormField(); creando varios input de diferentes tipos. <script type="text/javascript">
function addFormField() {
var id = document.getElementById("id").value;
$("#divTxt").append("<p id='canciones" + id + "'><label for='cancion" + id + "'>Canción " + id + "<font color='#FF0000'>*</font></label> <input type='text' size='20' name='cancion[]' id='cancion" + id + "' /> <label for='duracioncancion" + id + "'>Duración</label> <input type='text' size='5' name='duracioncancion[]' id='duracioncancion" + id + "' /> <label for='active_cancion" + id + "'> Activo<font color='#FF0000'>*</font></label> <input type='radio' name='active_cancion[]' id='active_cancion_si" + id + "' value='1' checked='checked' /> Sí <input type='radio' name='active_cancion[]' id='active_cancion_no" + id + "' value='2' /> No <input type='file' name='archivo[]' id='archivo" + id + "' /><a href='#' onClick='removeFormField(\"#canciones" + id + "\"); return false;'>Borrar</a></p>");
$('#cancion' + id).highlightFade({
speed:1000
});
id = (id - 1) + 2;
document.getElementById("id").value = id;
}
function removeFormField(id) {
$(id).remove();
}
Código HTML:
<form class="form" action="<?=$_SERVER['PHP_SELF']?> " method="post" enctype="multipart/form-data" accept-charset="UTF-8"> <input type="hidden" name="_submit_check2" value="2"/> <input type="hidden" id="id" value="1"/> <p><a href="#" onclick="addFormField(); return false;">Añadir</a></p> <div id="divTxt"> </div> <input type="image" name="register" value="register" class="submit-btn" src="" alt="submit" title="submit" /> </form>
Pues bien, todo esto funciona perfectamente excepto los input radio, los cuales al añadir dos o mas grupos de contenido html generado dentro de la div, de cada uno sólo me deja seleccionar una opción de los input radio pero de todos los grupos existentes. Vamos que es como si todos los radio pertenecieran al mismo input!!
Es algo que no logro entender..... los datos se envían perfectamente y recoge el valor del radio también haciendo la prueba creando un solo grupo html generado. Con dos o mas también se envía bien, pero sólo recoge un valor de todos los radios existentes siendo el mismo para todos los grupos. El comportamiento de esto es que me tendría que dejar seleccionar uno de los dos radio que hay en cada grupo html generado y no comportarse como si todos fueran uno.
A mi me da la impresión de que este comportamiento se debe a un error de sintaxis (etiquetas mal cerradas, comillas mal puestas, etc...), sin embargo por mas que repaso y miro no veo el fallo!!!
De verdad espero me haya explicado bien, que me perdonéis por escribir algo mas parecido a un libro que a un post para explicar mi problema y que por supuesto, me podáis ayudar!!
Gracias!!!
