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

156
August 27, 2017, at 09:30 AM

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.

READ ALSO
parse cssRule.selectorText

parse cssRule.selectorText

I wrote code that iterates over all the css rules in a page:

294
Obtain the language Maps API

Obtain the language Maps API

I have something that must be real simple, but is agonizingly hard to find by searching, I tried at least 30 search termsAlso, I cannot figure this out by reading manuals

190
CSS selector for document

CSS selector for document

How to select the document with selectors (JQuery, plain JavaScript etc

264
Javascript - same numbers group to gether and store it in state.item

Javascript - same numbers group to gether and store it in state.item

I have to groups similar numbers into an arrayFor Example :

155