0

Estoy trabajando en un sistema de reservas en el cual cuando un cliente da click en tipo de pago sin elegir la fecha, en el input que define día y valor se completa solo con NaN. No se como hacer para quede en blanco y haga un recuadro rojo o un simple texto que diga "elija una fecha".

<?php
date_default_timezone_set('America/Argentina/Buenos_Aires');
$tarjeta = 200;
$efectivo = $tarjeta*0.5;
?>

script.js

function data(valor){
var ingreso = document.getElementById("ingreso").value;
if(ingreso == '' || ingreso == null){
alert('Seleccione la Fecha de Ingreso');
document.getElementById("ingreso").value=null;
return false;
}

var retiro = document.getElementById("retiro").value;
if(retiro == '' || retiro == null){
alert('Seleccione la Fecha de retiro');
document.getElementById("ingreso").value=null;
return false;
}

//aqui hace el calculo de dias y lo multiplica por el valor para obtener un resultado
let fechaInicio = new Date(ingreso).getTime();
let fechaFin    = new Date(retiro).getTime();
let diff = fechaFin - fechaInicio + (24*60*60*1000); //Diferencia en milisegundos
let dias = diff/(1000*60*60*24); //Diferencia en dias

var totaldias = document.getElementById("totaldias").value = dia;
if(totaldias == '' || totaldias == null){
alert('Seleccione la Fecha de Ingreso');
document.getElementById("totaldias").value=null;
return false;
}

var valor = document.getElementById("valor").value = dias*valor;
if(valor == '' || valor == null){
alert('Seleccione la Fecha de retiro');
document.getElementById("valor").value=null;
return false;
}
//enviar formulario submit
//document.getElementById("formulario").submit();
}

formulario

<form action="" method="post">
<input type="date" name="ingreso" id="ingreso" autocomplete="off"><br>
<input type="date" name="salida" id="retiro" autocomplete="off" onChange="data(<?php echo $tarjeta;?>)"><br>
<input type="radio" id="efectivo" name="pago" value="efectivo" onChange="data(<?php echo $tarjeta;?>)">
<label for="efectivo">Tarjeta 100%</label><br>
<input type="radio" id="tarjeta" name="pago" value="tarjeta" onChange="data(<?php echo $efectivo;?>)">
<label for="tarjeta">Tarjeta 50%</label><br>
<label for="totaldias">Total dias</label>
<input type="text" name="dias" id="totaldias" readonly="readonly"><br>
<label for="valor">A pagar</label>
<input type="text" name="valor" id="valor" readonly="readonly">
</form>

introducir la descripción de la imagen aquí

4
  • revisa que estas repitiendo codigo luego de esta linea....let dias = diff/(1000*60*60*24); //Diferencia en dias el 19 dic. 2018 a las 16:14
  • ademas.. la variable dias...let dias ...no estas asignando donde deberias el 19 dic. 2018 a las 16:14
  • es por eso que no muestra el total dias.. el 19 dic. 2018 a las 16:15
  • ahí lo modifique, pero me sigue dando igual
    – user101604
    el 19 dic. 2018 a las 16:53

2 respuestas 2

1

Yo lo que haría sería comprobar si te llega NaN:

document.getElementById("valor").value = dias.isNan() ? null : dias * valor;

Si dias no es un número, le asignas null al valor. Si es un número, entonces haces el cálculo. Lo mismo para el otro valor.

3
  • Si, el NaN llega, creo.... pero el cliente dice que no lo gusta que diga NaN y que tenga un elija una fecha
    – user101604
    el 19 dic. 2018 a las 14:28
  • Por eso mismo, primero compruebas si es NaN y si lo es, le seteas un valor como "" o null o 0, lo que te sea más conveniente, para que el cliente no vea NaN.
    – user108089
    el 19 dic. 2018 a las 14:47
  • aaaaaah.... entendí.... le puse valor 0 y funciono bien.... gracias
    – user101604
    el 19 dic. 2018 a las 14:53
1

Saludos deberias validar algo como esto:

<form action="" method="post" id="formulario">
<label for="">FEc. ingreso</label>
<input type="date" name="ingreso" id="ingreso" autocomplete="off"><br>
<label for="">Fec. salida</label>
<input type="date" name="salida" id="retiro" autocomplete="off" onChange="data(<?php echo $tarjeta;?>)"><br>
<input type="radio" id="efectivo" name="pago" value="efectivo" onChange="data(<?php echo $tarjeta;?>)">
<label for="efectivo">Tarjeta 100%</label><br>
<input type="radio" id="tarjeta" name="pago" value="tarjeta" onChange="data(<?php echo $efectivo;?>)">
<label for="tarjeta">Tarjeta 50%</label><br>
<label for="totaldias">Total dias</label>
<input type="text" name="dias" id="totaldias" readonly="readonly"><br>
<label for="valor">A pagar</label>
<input type="text" name="valor" id="valor" readonly="readonly"><br>
<input type="button" onclick="grabar_datos();" value="Grabar Datos">
</form>
<script>
function grabar_datos(){

  var ingreso = document.getElementById("ingreso").value;
  if(ingreso == '' || ingreso == null){
  alert('Seleccione la Fecha de Ingrese');
  document.getElementById("ingreso").value=null;
  return false;
  }

  var retiro = document.getElementById("retiro").value;
  if(retiro == '' || retiro == null){
  alert('Seleccione la Fecha de retiro');
  document.getElementById("ingreso").value=null;
  return false;
  }
  //enviar formulario submit
  document.getElementById("formulario").submit();
}
</script>

Si te fijas he agregado un boton y tiene el evento onclick el cual llama a la funcion grabar_datos esta es la encargada de recibir, validar y posteriormente enviar los datos a donde desees.

Solo me baso en condiciones simples donde valido si el valor de un input es vacio o nulo si es asi muestro una alerta y establesco a null el input para que pueda ingresar un nuevo valor el usuario, tambien esta

return false;

lo que hace es que ya no avance o continue la funcion si encuentra algun error. Espero te sirva de guia y suerte..!!

9
  • Gracias, pero sigue apareciendo ese NaN, ahí subí la imagen
    – user101604
    el 19 dic. 2018 a las 15:03
  • en efecto es xq debes validar todos los campos yo solo valide ingreso y salida.!! el 19 dic. 2018 a las 15:06
  • y debes de agregar algo como esto para que aparezcan vacios los input de Total de Dias y Apagar...document.getElementById("totaldias").value=null; el 19 dic. 2018 a las 15:08
  • entiendo, tome tu codigo y valide el resto, function grabar_datos(){ var ingreso = document.getElementById("totaldias").value = dia; if(ingreso == '' || ingreso == null){ alert('Seleccione la Fecha de Ingreso'); document.getElementById("totaldias").value=null; return false; } ... } pero ese NaN sigue apareciendo...
    – user101604
    el 19 dic. 2018 a las 15:17
  • el problema que tienes es xq tienes un evento onchange... alli debes de validar...x ello te genera el error el 19 dic. 2018 a las 15:18

Tu Respuesta

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