0

estoy trabajando con un formulario (de actualización) con radio inputs utilizando HTML y JavaScript, y me ha surgido un problema a la hora de mostrar el valor recuperado (desde la base de datos) en dicho radio input. Es decir, si por ejemplo en el formulario de registro puse un radio input con opción (si, no), y lo rellené con un si (el valor que contendría ahora ate), al abrir el formulario de actualización me debería de salir marcado si, que es el valor de ate.

function mostrarActualizarAlumno(nick,curso,ate){
  var cadena='<div id="formActualizarAlumno" >';
  cadena=cadena+'<h3 style="color:green"><b>Actualizar alumno </b></h3>';
  cadena=cadena+'<div class="form-group"><label for="nick">Nick Alumno: </label><input id="nick" type="text" class="form-control" name="nick" value="'+nick+'" disabled></div>';

  //select curso
  cadena=cadena+'<div class="form-group"><div class="col-sm-6"><label for="curso" class="control-label">Curso</label><select class="form-control" id="curso" name="curso">';
  cadena=cadena+'<option value="" selected="selected"></option><option value="1º">1º Primaria</option><option value="2º">2º Primaria</option><option value="3º">3º Primaria</option><option value="4º">4º Primaria</option><option value="5º">5º Primaria</option><option value="6º">6º Primaria</option></select></div>';

  // Radio input 
  cadena=cadena+'<div class="col-sm-6"><label for="edad">ATE: </label><div class="radio" id="radioAte1"><label><input type="radio" name="radioAte" value="No">No</label></div>';
  cadena=cadena+'<div class="radio" id="radioAte2"><label><input type="radio" name="radioAte" value="Si">Si</label></div></div></div>';
  cadena=cadena+'<button type="button" id="registroBtn" class="btn btn-primary btn-md">Actualizar Alumno</button>';
  cadena=cadena+'</div>';

  $('#registro').append(cadena);
  $('#curso').val(curso);

  //He probado esto
  $('#radioAte1').val(ate);
  //Click button
  $('#registroBtn').on('click',function(){
    var nick=$('#nick').val();
    var ate= $('input:radio[name=radioAte]:checked').val();
    var centro=$("#centro").val()
    if(nick!="" && curso!=""){
      rest.actualizar(nick,centro,ate);
    }
  });

}

introducir la descripción de la imagen aquí

Actualmente me lo muestra así, sin seleccionar ninguno

3 respuestas 3

1

Los radio button cuentan con una propiedad checked el cual te perimte definir cual sera el que esta marcado.

<input type="radio" name="sample-name" checked>

Podrias usar el valor de ate y anadir la propiedad checked para el radio correcto.

function mostrarActualizarAlumno(nick,curso,ate, default){
   // ...
      if (ate=="Si"){ 
         cadena=cadena+ '<input type="radio" value="No" name="radioAte">';
         cadena=cadena+ '<input type="radio" value="Si" name="radioAte" checked>';
      } else {
         cadena=cadena+ '<input type="radio" value="No" name="radioAte" checked>';
         cadena=cadena+ '<input type="radio" value="Si" name="radioAte">';
      } 
   // ...
}
4
  • 1
    Puede ser que no me haya explicado de forma adecuada, pero lo que me gustaría es que si "ate" tiene valor "Si" aparezca como checked esa opción, y si tiene valor "No" la opción no. Tal vez sea con el if que me indicas, pero poniendo como condición que sea una de las dos el 14 abr. 2019 a las 14:20
  • He probado con la opción if (ate="Si"){ cadena...}else{cadena...} pero me muestra siempre como checked la primera opción del if el 14 abr. 2019 a las 14:26
  • @VíctorRubénGómezGarcía en este caso solo cambiarias el if para validar el valor de ate, ahi actualice la respuesta el 14 abr. 2019 a las 14:34
  • Exacto, así es, había puesto mal la condición. Muchas gracias. el 14 abr. 2019 a las 14:39
0

Prueba a reemplazar

$('#radioAte1').val(ate);

por esto

$('#radioAte1 :input').prop('checked',true);

Esto seleccionará el radio button contenido en #radioAte1, que en tu caso contiene la opción No.

Si quieres seleccionar la opción de , invierte el texto de las opciones, es decir, pon arriba y No abajo sin modificar los tags HTML, o dale un id al div que contiene la opción .

2
  • No sé si me he explicado lo suficiente, pero lo que me gustaría sería que la propiedad checked se marque en función del valor ate que paso como parámetro. el 14 abr. 2019 a las 14:23
  • En ese caso, suponiendo que ate es booleano puedes hacer algo así: if (ate) $('#radioAte2 :input').prop('checked',true); else $('#radioAte1 :input').prop('checked',true); En este caso dando el id radioAte2 al div que contiene el otro radiobutton
    – Juan_m_2
    el 14 abr. 2019 a las 14:35
0

Prueba a llamar al elemento con el valor ate y activar la propiedad checked:

var ate = 'Si';

var radio = $('input[value="'+ate+'"]').prop('checked', true);

Eso sí, siempre que cargues contenido después de que se inicie el documento deberías añadir body a las consultas: $('body input[value="'+ate+'"]), evitará que no encuentre el elemento.

Espero que te funcione!!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.