Correct way to use event listener to be able to add many radio buttons?

Question

Correct way to use event listener to be able to add many radio buttons?

Navigation

#1 by (2 votes)

2

I wanted to know if there would be any way that my script can handle the amount of radio buttons that I put to it and not have to refactor my code js. Could someone give me a hand? I have an idea to put an event listener to all the radio buttons. Thank you very much

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <form  action="" name="formulario" method="get">
      <input type="text" name="nombre" id="nombre" maxlength="30" onfocus="fondoColor(this)" placeholder="Tu nombre">
      <br>

      <input type="radio" name="sexo" id="Hombre"value="Hombre"> Hombre
      <input type="radio" name="sexo" id="Mujer"value="Mujer"> Mujer
      <br>

      <input type="checkbox" name="terminos" id="terminos" > Terminos y condiciones
      <br>

      <input type="submit" name="btn" value="Enviar" id="btn">

    </form>
<script>
function fondoColor(nombrefield){
  nombrefield.style.background ="yellow";
};



(function(){

  var formulario = document.getElementsByName('formulario')[0],
   elementos = formulario.elements,
   boton = document.getElementById('btn');

  var validarNombre = function(e){
    if(formulario.nombre.value == 0){
      alert('Completa el campo nombre');
      e.preventDefault();
    }
  };

  var validarRadio = function (e){
    if(formulario.sexo[0].checked == true || formulario.sexo[1].checked == true){
    }else{
      alert('Completa el campo sexo');
      e.preventDefault();
    }
  };

  var validarCheckbox = function(e){
    if(formulario.terminos.checked == false){
      alert('Acepta los terminos y condiciones');
      e.preventDefault();
    }
  };
  var validar = function (e){
    validarNombre(e);
    validarRadio(e);
    validarCheckbox(e);
  };

  formulario.addEventListener("submit", validar);
}());
</script>

javascript html eventos

asked by Infraganti 12.09.2016 в 16:01

source

1 answer

Passing parameters to a URL through POST Next and previous function with js

score 2 · Accepted Answer

A quick solution: instead of checking radio by radio if they are checked, check the value of the field in general. Since all radios have a different value (and different from the empty string), if the value of the field is the empty string ( "" ), then you will know that none is marked and you will have to check each radio as before:

var validarRadio = function (e){
  if(formulario.sexo.value == "") {
    alert('Completa el campo sexo');
    e.preventDefault();
  }
};

The code would look like this:

function fondoColor(nombrefield){
  nombrefield.style.background ="yellow";
};



(function(){

  var formulario = document.getElementsByName('formulario')[0],
      elementos = formulario.elements,
      boton = document.getElementById('btn');

  var validarNombre = function(e){
    if(formulario.nombre.value == 0){
      alert('Completa el campo nombre');
      e.preventDefault();
    }
  };

  var validarRadio = function (e){
    if(formulario.sexo.value == "") {
      alert('Completa el campo sexo');
      e.preventDefault();
    }
  };

  var validarCheckbox = function(e){
    if(formulario.terminos.checked == false){
      alert('Acepta los terminos y condiciones');
      e.preventDefault();
    }
  };
  var validar = function (e){
    validarNombre(e);
    validarRadio(e);
    validarCheckbox(e);
  };

  formulario.addEventListener("submit", validar);
}());

<form  action="" name="formulario" method="get">
  <input type="text" name="nombre" id="nombre" maxlength="30" onfocus="fondoColor(this)" placeholder="Tu nombre">
  <br>

  <input type="radio" name="sexo" id="Hombre" value="Hombre"> Hombre
  <input type="radio" name="sexo" id="Mujer" value="Mujer"> Mujer
    <input type="radio" name="sexo" id="Alien" value="Alien"> Alien
    <input type="radio" name="sexo" id="Indefinido" value="Indefinido"> Indefinido
    <input type="radio" name="sexo" id="Pulpo" value="Pulpo"> Pulpo
    <input type="radio" name="sexo" id="NA" value="na"> N/A
  <br>

  <input type="checkbox" name="terminos" id="terminos" > Terminos y condiciones
  <br>

  <input type="submit" name="btn" value="Enviar" id="btn">

</form>