how to automatically fill in an input?

By Posted on

Question :

As the code with several textfields shows, I want to make visible just dataEntrada, dataSaida 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 be clicking on the textfield fields to be able to fill in, so the calculation goes out 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 :

A simple way is to add two if s to functions where values are calculated by calling other functions that depend on the elements you want to hide (see comments // ADICIONADO in code).

And add a new event to the KM field to prevent non-numeric characters from being typed: 

document.getElementById("KM").oninput = function(){
   var valor = this.value;
   if(isNaN(valor)){
      this.value = "";
      document.getElementById("valortotal").value = "";
      document.getElementById("valorreal").value = "";
   }else{
      calcula_valor();
   }
}


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;
   if(document.form3.valortotal.value){ // ADICIONADO
      calculo_total();
   }
   //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(); 
   if(!isNaN(document.getElementById("ndias").value)){ // ADICIONADO
      calcula_aluguel();
   }
}

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);
}

// ADICIONADO EVENTO ABAIXO
document.getElementById("KM").oninput = function(){
   var valor = this.value;
   if(isNaN(valor)){
      this.value = "";
      document.getElementById("valortotal").value = "";
      document.getElementById("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">
                   <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="" 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>

  

Then you can remove the elements that will be hidden the events
  as onclick etc.

    

  

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 function funcao1() if the total value is null it triggers an alert, otherwise it triggers another alert indicating the total value.
  • The calcula_aluguel() and calculo_total() functions have been removed. These calculations are done in other existing functions.
  • You do not need so many events on so many inputs, just%
  • Some inputs were given the input type="date" attribute as they should not be set by the user.
  • I believe the way I did 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>

        

    Leave a Reply

    Your email address will not be published. Required fields are marked *