How to get the value of an input radio with 3 options in javascript?

Question

First of all: I'd like to clarify that I did look for this question here, but the solutions were not working for me.

I'm just working on a small project for college.

I need to register the information of a new user, but I'm stuck at the radio button to get the user's gender and what type of user he is.

Here's the HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Registro</title>
  </head>
  <body>
    <form>

       <label for="txtIdentificacion">Identifación</label>
       <input type="text" placeholder="Número de identificación" id="txtIdentificacion" required>

       <label for="txtPrimerNombre">Primer Nombre</label>
       <input type="text" placeholder="Primer Nombre" id="txtPrimerNombre"  required>

       <label for="txtSegundoNombre">Segundo Nombre</label>
       <input type="text" placeholder="Segundo Nombre" id="txtSegundoNombre">

       <label for="txtPrimerApellido">Primer Apellido</label>
       <input type="text" placeholder="Primer Apellido" id="txtPrimerApellido"  required>

       <label for="txtSegundoApellido">Segundo Apellido</label>
       <input type="text" placeholder="Segundo Apellido" id="txtSegundoApellido" >

       <label for="txtNacionalidad">Nacionalidad</label>
       <input type="text" placeholder="Nacionalidad" id="txtNacionalidad"  required>

       <label for="txtTipoIdentificacion">Tipo de Identificacion</label>
       <input type="text" placeholder="Tipo de Identificacion" id="txtTipoIdentificacion"  required>

       <label for="datFechaNacimiento">Fecha de nacimiento</label>
       <input type="date" id="datFechaNacimiento"  required>

       <label for="">Género:</label>

       <label for="rbtFemenino">Femenino</label>
       <input type="radio" name="rbtGenero" value="Femenino" id="rbtFemenino" required >

       <label for="rbtMasculino">Masculino</label>
       <input type="radio" name="rbtGenero" value="Masculino" id="rbtMasculino" required >

       <label for="rbtIndefinido">Indefinido</label>
       <input type="radio" name="rbtGenero" value="Indefinido" id="rbtIndefinido" required>

       <label for="numNumeroTelefonico">Número Telefonico </label>
       <input type="number" placeholder="Sin guiones" id="numNumeroTelefonico"  required>

       <label for="txtNombreUsuario">Nombre de usuario</label>
       <input type="text" placeholder="Nombre de usuario" id="txtNombreUsuario"  required>

       <label for="txtPassword">Contraseña</label>
       <input type="password" placeholder="Contraseña" id="txtPassword"  required>

       <label for="rbtTipoUsuario">Soy un instructor</label>
       <input type="radio" name="rbtTipoUsuario" value="Instructor" id="rbtInstructor">

       <label for="rbtTipoUsuario">Soy un cliente</label>
       <input type="radio" name="rbtTipoUsuario" value="Cliente" id="rbtCliente">

       <label for="numEmergencia">Número de emergencia</label>
       <input type="number" placeholder="Sin guiones" id="numEmergencia"  required>


       <button type="submit" class="btnRegistrar" id="btnRegistrar">Registrar</button>
   </div>
 </div>
</form>
<script src="js/logicaNegociosUsuarios.js"></script>
<script src="js/logicaInterfazUsuarios.js"></script>


  </body>
</html>

JS

document.querySelector('#btnRegistrar').addEventListener('click', registrarNuevoUsuario);

registrarNuevoUsuario()



function registrarNuevoUsuario() {
    var aNuevoUsuario = [];
    var sIdentificacion = '';
    var sPrimerNombre = '';
    var sSegundoNombre = '';
    var sPrimerApellido = '';
    var sSegundoApellido = ''
    var sNacionalidad ='';
    var sTipoIdentificacion = '';
    var sFechaNacimiento = '';
    var sGender = '';
    var nNumeroTelefonico = 0;
    var sNombreUsuario = '';
    var sPassword = '';
    var nEdad = 0;
    var sTipoUsuario = '';
    var nEmergencia = '';

    sIdentificacion = document.querySelector('#txtIdentificacion').value;
    sPrimerNombre = document.querySelector('#txtPrimerNombre').value;
    sSegundoNombre = document.querySelector('#txtSegundoNombre').value;
    sPrimerApellido = document.querySelector('#txtPrimerApellido').value;
    sSegundoApellido = document.querySelector('#txtSegundoApellido').value;
    sNacionalidad = document.querySelector('#txtNacionalidad').value;
    sTipoIdentificacion = document.querySelector('#txtTipoIdentificacion').value;
    sFechaNacimiento = document.querySelector('#datFechaNacimiento').value;
    sGenero = document.querySelector('input[name="rbtGenero"]:checked') ?  document.querySelector('input[name="rbtGenero"]:checked').value : '';
    nNumeroTelefonico = document.querySelector('#numNumeroTelefonico').value;
    sNombreUsuario = document.querySelector('#txtNombreUsuario').value;
    sPassword = document.querySelector('#txtPassword').value;
    nEdad = calcularEdad();
    sTipoUsuario = document.querySelector('input[name="rbtTipoUsuario"]:checked') ? document.querySelector('input[name="rbtUserTipoUsuario"]:checked').value: '';
    nEmergencia = document.querySelector('#numEmergencia').value;

    aNuevoUsuario.push(sIdentificacion, sPrimerNombre, sSegundoNombre, sPrimerApellido, sSegundoApellido, sNacionalidad, sTipoIdentificacion, sFechaNacimiento, sGenero, nNumeroTelefonico, sNombreUsuario, sPassword, nEdad, sTipoUsuario, nEmergencia );



}

llenarTablaUsuarios();


function llenarTablaUsuarios(){


  var listaUsuarios = obtenerUsuarios();
  var cuerpoTabla = document.querySelector('#tblUserInfo tbody' );

  cuerpoTabla.innerHTML = '';

  for (var i = 0; i < listaUsuarios.length; i++) {


    var fila = cuerpoTabla.insertRow(i);

    var celdaCedula = fila.insertCell();
    var celdaPrimerNombre = fila.insertCell();
    var celdaSegundoNombre = fila.insertCell();
    var celdaPrimerApellido = fila.insertCell();
    var celdaSegundoApellido = fila.insertCell();
    var celdaNacionalidad = fila.insertCell();
    var celdaTipoIdentificacion = fila.insertCell();
    var celdaFechaNacimiento = fila.insertCell();
    var celdaEdad = fila.insertCell();
    var celdaGenero = fila.insertCell();
    var celdaNumeroTelefonico = fila.insertCell();
    var celdaTipoUsuario = fila.insertCell();
    var celdaNumeroEmergencia = fila.insertCell();
    var celdaNombreUsuario = fila.insertCell();


    celdaCedula.innerHTML = listaUsuarios[i][0];
    celdaPrimerNombre.innerHTML = listaUsuarios[i][1];
    celdaSegundoNombre.innerHTML = listaUsuarios[i][2];
    celdaPrimerApellido.innerHTML = listaUsuarios[i][3];
    celdaSegundoApellido.innerHTML = listaUsuarios[i][4];
    celdaNacionalidad.innerHTML = listaUsuarios[i][5];
    celdaTipoIdentificacion.innerHTML = listaUsuarios[i][6];
    celdaFechaNacimiento.innerHTML = listaUsuarios[i][7];
    celdaNombreUsuario.innerHTML = listaUsuarios[i][10];
    celdaEdad.innerHTML = listaUsuarios[i][12];
    celdaGenero.innerHTML = listaUsuarios[i][8];
    celdaNumeroTelefonico.innerHTML = listaUsuarios[i][9];
    celdaTipoUsuario.innerHTML = listaUsuarios[i][13]
    celdaNumeroEmergencia.innerHTML = listaUsuarios[i][14]

  }

}

function calcularEdad() {

  var fechaHoy = new Date();
  var fechaNacimiento = new Date(document.querySelector("#datFechaNacimiento").value);
  var edad = fechaHoy.getFullYear() - fechaNacimiento.getFullYear();
  var meses = fechaHoy.getMonth() - fechaNacimiento.getMonth();
  if (meses < 0 || (meses === 0 && fechaHoy.getDate() < fechaNacimiento.getDate())){
    edad--;
  }

}

I had translated the names of the gender and user type related stuff for the original question. Gender would be "genero" and user type would be "tipoUsuario"

You can ignore the "llenartablausuario" function, it's for something else

Answer 1

Your problem is with the document.querySelector('input[name="rbtGender"]:checked') which is returning null when nothing is checked.

To avoid discrepancy you can do like -

sGender = document.querySelector('input[name="rbtGender"]:checked') ?  document.querySelector('input[name="rbtGender"]:checked').value : '';

sUserType = document.querySelector('input[name="rbtUserType"]:checked') ? document.querySelector('input[name="rbtUserType"]:checked').value: '';

Here I am checking if the checkbox contains any value if not assign '' to sGender or sUserType .

How to get the value of an input radio with 3 options in javascript?

Question

1 answers

solution1
0 ACCPTED 2017-08-26 23:19:56

How to get the value of an input radio with 3 options in javascript?

Question

1 answers

solution1 0 ACCPTED 2017-08-26 23:19:56

solution1
0 ACCPTED 2017-08-26 23:19:56