Does not change value when I change a date

Question

This system calculates the days between two dates. That number of days is multiplied by a value. But when the client wants to change the departure date, the total value does not change.

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

<script>
function data(valor) {
let ingreso = document.getElementById("ingreso").value;
let retiro = document.getElementById("retiro").value;
let fechaInicio = new Date(ingreso).getTime();
let fechaFin    = new Date(retiro).getTime();
let diff = fechaFin - fechaInicio; //Diferencia en milisegundos
let dias = diff/(1000*60*60*24); //Diferencia en dias
document.getElementById("totaldias").value = dias;
document.getElementById("valor").value = dias*valor;
document.getElementById("dolares").value = valor*tasa_cambio;
}

Form

<h2>Sistema</h2>
<form action="" method="post">
<input type="date" name="ingreso" id="ingreso" autocomplete="off"><br>
<input type="date" name="salida" id="retiro" autocomplete="off"><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>

Answer 1

Make sure you perform the recalculation when any input changes, not only the radio buttons. A good way to do this: in the JavaScript code, listen to all "change" events that happen in the HTML document. If you do it like that, you should remove the onChange attributes that are currently in the HTML.

The data function has a parameter with the price per day, but it would be better if the function would not have that parameter, but would itself look at the radio button that is selected, and conclude from that selection which price to use.

Some other issues to fix:

• The HTML part is missing a (read-only) input element for "dolares" (which you reference in the JS code).

• The calculation of the price in dollars would need to also use valor in its formula.

• The variable tasa_cambio is not defined.

• When some dates are not yet filled in, it should not output something like "NaN", but maybe just leave the result empty.

So here is how the code would look -- check the comments:

<?php
date_default_timezone_set('America/Argentina/Buenos_Aires');
$tarjeta = 200;
$efectivo = $tarjeta*0.5;
$tasa_cambio = 1.13; // Need to define this variable
?>

<script>
const tasa_cambio = <?=$tasa_cambio?>; // Need to define this variable

function data(valor) {
    let ingreso = document.getElementById("ingreso").value;
    let retiro = document.getElementById("retiro").value;
    let fechaInicio = new Date(ingreso).getTime();
    let fechaFin    = new Date(retiro).getTime();
    let diff = fechaFin - fechaInicio;
    let dias = diff/(1000*60*60*24);
    // Clear the output when not all values available, so add: || ""
    document.getElementById("totaldias").value = dias || ""; 
    document.getElementById("valor").value = dias*valor || "";
    // Must multiply with number of days also:
    document.getElementById("dolares").value = valor*dias*tasa_cambio || ""; 
}

// Use this listener instead of onChange attributes.
document.addEventListener("change", function () {
    // Inject the two PHP values in this expression:
    data(document.getElementById("tarjeta").checked ? <?=$tarjeta?> : <?= $efectivo?>);
});

Form:

<h2>Sistema</h2>
<form action="" method="post">
    <input type="date" name="ingreso" id="ingreso" autocomplete="off"><br>
    <input type="date" name="salida" id="retiro" autocomplete="off"><br>
    <input type="radio" id="efectivo" name="pago" value="efectivo">
    <label for="efectivo">Tarjeta 100%</label><br>
    <input type="radio" id="tarjeta" name="pago" value="tarjeta">
    <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>
    <!-- Add the follow element -->
    <label for="dolares">Dolares</label>
    <input type="text" id="dolares" readonly="readonly"><br>
</form>