2

Necesito que el valor del <input> según la edad del usuario, seria así: cuando se ponga la fecha de nacimiento validar si cumple con la edad y le asigna si es Juvenil o Prejuvenil.

<div class="form-group"> 
    <label for="birth_date" class="form-control-label">
        FECHA DE NACIMIENTO DEL PARTICIPANTE
    </label>                                                                                             
        <input type="date" id="birth_date" name="birth_date" required class="form-control">
</div> 

y acá se debe colocar el resultado

<div class="col-4" id="group_etary">
<div class="form-group">
    <label for="age_group" class="form-control-label">
        GRUPO ETARIO
    </label>
    <input type="text" name="age_group" id="age_group" class="form-control">
</div>
</div>

Éste es mi código, pero no sé si está bien escrito. He buscado en varias partes y no lo logro aún.

<script language="javascript">
    function comprobar()
    {
       var birth_date= document.birth_date.value;

       if (birth_date>= 5 && birth_date <= 12)
       {
            $('#age_group').val('PREJUVENIL');
          // alert("Si tienes entre 5 y 12 años, perteneces a el grupo prejuvenil.");
          return false;
       }

       if (birth_date>= 13 && birth_date <= 17)
       {
            $('#age_group').val('JUVENIL');
          // alert("Si tienes entre 13 y 17 años, perteneces a el grupo juvenil.");
          return false;
       }

       return true;
    }
</script>
2
  • No veo la llamada a la función comprobar() ¿Cuando la llamas? Por otro lado, concretar más el comportamiento erróneo que te sucede facilitará las cosas a quien trate de ayudarte.
    – phpMyGuel
    Commented el 1 jul. 2019 a las 7:18
  • A primera vista no creo que debiera funcionar ese var birth_date= document.birth_date.value;. Quizá deberías usar var birth_date= document.getElementById('birth_date').value;. Además, al ser de tipo "fecha" (type="date") su valor será de la forma AAAA-MM-DD y no un número tal cual. Commented el 1 jul. 2019 a las 7:31

1 respuesta 1

2

El principal problema que veo es que document.birth_date.value puede no contener la información que estás buscando. Quizá deberías usar en su lugar
getElementById():

var birth_date = document.getElementById('birth_date').value;

Haciendo uso de jQuery se puede simplificar a:

var birth_date = $('#birth_date').val();

Además, el campo del formulario, al ser de tipo "fecha" (type="date"), su valor será de la forma AAAA-MM-DD y no un número tal cual, por lo que debes cambiar las comprobaciones numéricas a comprobaciones basadas en texto:

function comprobar()
{
   var birth_date = $('#birth_date').val();
   console.log('Fecha:', birth_date);

   /* Fechas en las que se cumplen 5, 12 y 17 años según fecha base */
   if (birth_date>= '2007-01-01' && birth_date <= '2014-12-31') {
      $('#age_group').val('PREJUVENIL');
      alert("Si tienes entre 5 y 12 años, perteneces a el grupo prejuvenil.");
      return false;
   } else if (birth_date>= '2002-01-01' && birth_date <= '2006-12-31') {
      $('#age_group').val('JUVENIL');
      alert("Si tienes entre 13 y 17 años, perteneces a el grupo juvenil.");
      return false;
   } else {
      $('#age_group').val('NINGUNO');
      alert("Fecha fuera de rango.");
   }

   return true;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div class="form-group">
    <label for="birth_date" class="form-control-label">
        FECHA DE NACIMIENTO DEL PARTICIPANTE
    </label>
        <input type="date" id="birth_date" name="birth_date" required class="form-control">
</div>

<div class="col-4" id="group_etary">
<div class="form-group">
    <label for="age_group" class="form-control-label">
        GRUPO ETARIO
    </label>
    <input type="text" name="age_group" id="age_group" class="form-control">
</div>

<button onclick="comprobar()">Pulsa aquí para comprobar la fecha</button>


Además, quizá sería mejor implementar una función que calcule la edad basado en una fecha base (a partir de la cual se cuenta la edad de inscripción) y la fecha de nacimiento del jugador:

/* Ésta es la fecha efectiva, por ejemplo, desde la que se calcula la edad */
let fecha_base = new Date('2019-08-01');

function comprobar()
{
   var birth_date = new Date($('#birth_date').val());

   /* Calculamos la edad restando los años: */
   let edad = fecha_base.getFullYear() - birth_date.getFullYear();
   /* Hacemos el corte de mes y día del año en curso */
   birth_date.setFullYear(fecha_base.getFullYear());
   if (fecha_base.getTime() < birth_date.getTime()) {
      /* Si aún no hemos llegado a la fecha de cumpleaños restamos un año */
      edad--;
   }
   console.log('Edad:', edad);

   /* Ahora podemos hacer la comparación con la edad calculada */
   if (edad >= 5 && edad <= 12) {
      $('#age_group').val('PREJUVENIL');
      alert("Si tienes entre 5 y 12 años, perteneces a el grupo prejuvenil.");
      return false;
   } else if (edad >= 13 && edad <= 17) {
      $('#age_group').val('JUVENIL');
      alert("Si tienes entre 13 y 17 años, perteneces a el grupo juvenil.");
      return false;
   } else {
      $('#age_group').val('NINGUNO');
      alert("Edad fuera de rango.");
   }

   return true;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div class="form-group">
    <label for="birth_date" class="form-control-label">
        FECHA DE NACIMIENTO DEL PARTICIPANTE
    </label>
        <input type="date" id="birth_date" name="birth_date" required class="form-control">
</div>

<div class="col-4" id="group_etary">
<div class="form-group">
    <label for="age_group" class="form-control-label">
        GRUPO ETARIO
    </label>
    <input type="text" name="age_group" id="age_group" class="form-control">
</div>

<button onclick="comprobar()">Pulsa aquí para comprobar la fecha</button>

1
  • 1
    Muchas gracias, si me funciono...
    – Jorge
    Commented el 1 jul. 2019 a las 20:18

Tu Respuesta

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

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