how to automatically fill in an input?

Asked

Viewed 555 times

4

As the code shows with several textfield, I want to make visible only date, date and KM and from these 3 fill in the others that will be invisible, the amount to be paid will be displayed on 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 in, so that the calculation is 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>

javascript html input

  • @dvd , that competitive! I will run behind and improve this code!!

  • 1

    @Leocaracciolo turned dispute that here hahahaha

  • Boy, we’ll study the code, we’ll understand more and more and then we’ll improve it.

  • I like what’s perfect!!

  • 1

    @Leocaracciolo oloco, I look forward to perfection then hahahaha. Thank you for all the help you have given me and are giving me

  • but I think I’ve reached the goal, test my answer and tell me if something isn’t right.

  • 1

    @Leocaracciolo all right tmb, now I have two code options to use hahahaha

Show 2 more comments

2 answers

4

From what I understand, just dataEntrada, dataSaida and KM are the inputs that should be set by the user, so the code can and should be improved.

Code improvements:

  1. In function funcao1() if the total value is null triggers an alert, otherwise triggers another alert stating the total value.
  2. The functions calcula_aluguel() and calculo_total() were removed. These calculations are done in other existing functions.
  3. Not so many events are needed in so many inputs, just the input type="date"
  4. Some inputs received the attribute readonly since they should not be set by the user.
  5. I believe the way I made it legible was 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>

  • Thank you very much, it’s much better.

  • Half-baked this function to accept only numbers.

  • With regex or isNaN it’s much easier to do that than check which key was pressed. What if the guy copies and paste a letter into the field?

  • @dvd tell how to do!

  • @dvd noticed this tmb, but if change the type to number the problem is solved

  • @Bookmark Type number I think mt bad. But if you want to use, use.

  • @dvd found the solution, he had put the onkeypress="Return Somentenumero(Event);" in the input number days and left the <input type="text" id="KM" name="KM" value="" onkeyup="calculo_total()" placeholder="enter the KM traveled"without

  • @Marcoaurélio I updated my answer with a much simpler solution.

  • @Leocaracciolo updated my reply. Try to paste or add anything other than a number in the field there. rss

  • @dvd mitou kkkkkkkk

Show 5 more comments

3


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

And add a new event to the field KM 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 from the elements that will remain hidden the events as onclick etc..

  • Thank you very much man, it was such a simple thing so hahahaha, vlw even.

  • See if something doesn’t work in my answer! If you find it will win a bottle dvd rs

  • @Leocaracciolo seems to work normal.

  • already in the best beverage houses in Brazil https://i.stack.Imgur.com/axVOb.png

  • @Leocaracciolo who lacks dirty! created a drink with my name?!

Browser other questions tagged javascript html input

You are not signed in. Login or sign up in order to post.