javascript – how to automatically fill an input?

Question:

As the code shows with several textfields, I want to make visible only DataEntrada, DataExit and KM and from these 3 fill in the others that will be invisible, the amount to be paid will be displayed in an alert when you click on simulate. The account is working, but I need to keep clicking on the textfield fields to be able to fill it out, so that the calculation leaves blank.

function funcao1()
{

var form3 = document.getElementById('simulador');
var valorreal = document.getElementById('valorreal');

form3.addEventListener('submit', function(e) {
    // alerta o valor do campo
    alert("O valor total a ser pago será de: "  + "R$" + valorreal.value);

    // impede o envio do form
    e.preventDefault();
});
    
}
 function calcula_valor(){
  document.form3.valortotal.value = document.form3.KM.value * document.form3.valorKM.value;
     //document.form3.valortotal.value = ((document.form3.dataSaida.value - document.form3.dataEntrada.value) * document.form3.diaria.value) + (document.form3.KM.value * document.form3.ValorKM.value);
  }
  
 function difDias(){
    var dataSaida = new Date(document.getElementById("dataSaida").value);
    var dataEntrada = new Date(document.getElementById("dataEntrada").value);
    return parseInt((dataSaida - dataEntrada) / (24 * 3600 * 1000));
}

function chamar(){
          
     document.getElementById("ndias").value = isNaN(difDias()) ? "" : difDias(); 
   

   
}


 function calcula_aluguel(){
  document.form3.valoraluguel.value = document.form3.ndias.value * document.form3.diaria.value;
     
  }
  
  
  function calculo_total(){
  document.form3.valorreal.value = (document.form3.valoraluguel.value*1) + (document.form3.valortotal.value*1);
     
  }

<section class="bloco3">
            <div id="title3">
                <p id="title3">Simulador</p>
            </div>

            <div id="simulador">
                <div id="form3">
                     <form class="bloco3" name="form3" action="" method="post">
                            <input type="date" id="dataEntrada" name="dataEntrada" placeholder="dataEntrada" onchange="chamar()">
                            <input type="date" id="dataSaida" name="dataSaida" placeholder="dataSaida" onchange="chamar()">
                            <input type="text" id="ndias" name="ndias" value=""  placeholder="nº dias">
                            <input type="hidden" id="diaria" name="diaria" value="50" required=""  placeholder="Diaria">
                            <input type="text" id="valoraluguel" name="valoraluguel"  value="" onclick="calcula_aluguel()"  onkeyup="calcula_aluguel()" placeholder="valor da diaria">
                            <input type="hidden" id="valorKM" name="valorKM" value="2" placeholder="valorKM">
                            <input type="text" id="KM" name="KM" value="" onclick="calcula_valor()"  onkeyup="calcula_valor()" placeholder="digite o KM percorrido">
                            <input type="text" id="valortotal" name="valortotal"  value=""  placeholder="valor total do KM percorrido">
                            <input type="text" id="valorreal" name="valorreal"  value="" onclick="calculo_total()"  onkeyup="calculo_total()" placeholder="valor total a ser pago">

                            <input type="submit" onclick="return funcao1()" onkeyup="funcao1()" value="Simular" />
                    </form>
                </div>
            </div>

       
        </section>

Answer:

As I understand it, only dataEntrada , dataSaida and KM are the inputs that must be set by the user, so the code can and should be improved.

Code improvements:

In the function function1 funcao1() if the total value is null, it triggers an alert, otherwise, it triggers another alert informing the total value.
The functions calcula_aluguel() and calculo_total() been removed. These calculations are done in other functions that already exist.
It is not necessary to have so many events in so many inputs, the input type="date"
Some inputs received the readonly attribute as they shouldn't be set by the user.
I believe that the way I did the readability got better.

 var simulador = document.getElementById('simulador'), valortotal = document.getElementById("valortotal"), KM = document.getElementById("KM"), valorKM = document.getElementById("valorKM"), valoraluguel = document.getElementById("valoraluguel"), ndias = document.getElementById("ndias"), diaria = document.getElementById("diaria"), valorreal = document.getElementById("valorreal"), dataSaida = document.getElementById("dataSaida"), dataEntrada = document.getElementById("dataEntrada"); function funcao1(){ simulador.addEventListener('submit', function(e) { // alerta o valor do campo if(valortotal.value==""){ alert("É tudo 0800! dvd paga a conta : )"); }else{ alert("O valor total a ser pago será de: " + "R$" + valorreal.value); } // impede o envio do form e.preventDefault(); }); } function calcula_valor(){ valortotal.value = KM.value * valorKM.value; if(valortotal.value){ valorreal.value = (valoraluguel.value*1) + (valortotal.value*1); } } function difDias(){ if ((dataEntrada.value)&&(dataSaida.value)){ return parseInt((new Date(dataSaida.value) - new Date(dataEntrada.value)) / (24 * 3600 * 1000)); } } function chamar(){ var dias = ndias.value = isNaN(difDias()) ? "" : difDias(); if(dias!=""){ valoraluguel.value = ndias.value * diaria.value; calcula_valor(); }else{ valortotal.value = ""; valorreal.value = ""; valoraluguel.value = ""; } } //colinha do código do dvd, afinal está sem aviso de direitos autorais rs. KM.oninput = function(){ var valor = this.value; if(isNaN(valor)){ this.value = ""; valortotal.value = ""; valorreal.value = ""; }else{ calcula_valor(); } }

 <section class="bloco3"> <div id="title3"> <p id="title3">Simulador</p> </div> <div id="simulador"> <div id="form3"> <form class="bloco3" name="form3" action="" method="post"> <input type="date" id="dataEntrada" name="dataEntrada" placeholder="dataEntrada" onchange="chamar()"> <input type="date" id="dataSaida" name="dataSaida" placeholder="dataSaida" onchange="chamar()"> <input type="text" id="ndias" name="ndias" value="" placeholder="nº dias" readonly> <input type="hidden" id="diaria" name="diaria" value="50" required="" placeholder="Diaria"> <input type="text" id="valoraluguel" name="valoraluguel" value="" placeholder="valor da diaria" readonly> <input type="hidden" id="valorKM" name="valorKM" value="2" placeholder="valorKM"> <input type="text" id="KM" name="KM" value="" placeholder="digite o KM percorrido"> <input type="text" id="valortotal" name="valortotal" value="" placeholder="valor total do KM percorrido" readonly> <input type="text" id="valorreal" name="valorreal" value="" onkeyup="calculo_total()" placeholder="valor total a ser pago" readonly> <input type="submit" onclick="return funcao1()" onkeyup="funcao1()" value="Simular" /> </form> </div> </div> </section>

Post Views: 0