how to automatically fill in an input?

4

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>
    
asked by anonymous 03.06.2018 / 01:27

2 answers

3

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.

    
03.06.2018 / 02:16
4
  

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>
        
    03.06.2018 / 03:02