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
    – Sebastian
    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
    – Sebastian
    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
    – Sebastian
    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
    – Sebastian
    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...
    – Sebastian
    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 that you have read and understand our privacy policy and code of conduct.

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