Add in real time

Question

Add in real time

Navigation

#1 by (2 votes)
#2 by (1 votes)

2

I'm trying to make an invoice that adds me the input in real time, and basically "I have it", but what I need is that it is not "mandatory" to fill an input to show me the results, which as that is adding values are shown, not at the end when they are all full.

I leave the Js function that I have so far, I hope you can help me

function cal() {
   try {
var a = parseInt(document.frmFactura.Cuota.value),
    b = parseInt(document.frmFactura.Saldo.value),
    c = parseInt(document.frmFactura.Areas.value),
    d = parseInt(document.frmFactura.CuotaExtra.value);


document.frmFactura.nuevoSaldo.value = a + b + c + d ;
    } catch (e) {
   }
}

this is the html file

<input type="text" class="form-control" id="Cuota" name="Cuota" value="95000" onchange="cal()" onkeypress="cal()" >
<input type="text" class="form-control" id="Saldo" name="Saldo" onchange="cal()" onkeypress="cal()" >
<input type="text" class="form-control" id="Areas" name="Areas" placeholder="Vehiculo, Moto, Salon Comunal" onchange="cal()" onkeypress="cal()" >
<input type="text" class="form-control" id="CuotaExtra" name="CuotaExtra" onchange="cal()">

javascript html

asked by Santiago Rodriguez 19.04.2018 в 01:17

source

2 answers

1

You had almost done it, really all you have to do is add a || 0 to the value assignment. In this way, what you are doing is assigning the value and, if there is none or it is invalid, the 0 is assigned as the default value. For example:

var a = parseInt(document.frmFactura.Cuota.value) || 0;

what you will do is assign the numerical value in Cuota to variable a , and if the value of Cuota does not exist or is empty, it is assigned 0.

Apart from that I've made some other changes in the code (although if what you had before worked for you more or less, you really do not need them):

I've changed the selector for getElementById (so it works for me in the demo below).
I have changed the events by onchange and onkeypressed by one only: oninput that will be executed each time the field changes (to save some space, although ideally you should separate controller and view and associate the events with addEventListener ).

With those three changes the code looks like this:

function cal() {
  try {
    var a = parseInt(document.getElementById("Cuota").value) || 0,
      b = parseInt(document.getElementById("Saldo").value) || 0,
      c = parseInt(document.getElementById("Areas").value) || 0,
      d = parseInt(document.getElementById("CuotaExtra").value) || 0;

    document.getElementById("nuevoSaldo").value = a + b + c + d;
  } catch (e) {}
}

<input type="text" class="form-control" id="Cuota" name="Cuota" value="95000" oninput="cal()">
<input type="text" class="form-control" id="Saldo" name="Saldo" oninput="cal()">
<input type="text" class="form-control" id="Areas" name="Areas" placeholder="Vehiculo, Moto, Salon Comunal" oninput="cal()">
<input type="text" class="form-control" id="CuotaExtra" name="CuotaExtra" oninput="cal()">
<input id="nuevoSaldo" placeholder="Total" />

answered by 19.04.2018 в 01:56

Ajax does not bring me the data Automatic whatsapp message posting ..!

score 2 · Accepted Answer

With the event onchange you can determine when an input has changed, at that moment you update the general total . You can group the input by class in this way you assign a addEventListener to each item, I'll give you an example how to do it.

Example:

items = document.getElementsByClassName("itemTotalNeto")
for (var i = 0; i < items.length; i++) {
 items[i].addEventListener('change', function() {
  n = document.getElementById("totalGeneral");
  n.value = parseInt("0"+n.value) + parseInt("0"+this.value) - parseInt("0"+this.defaultValue);
 this.defaultValue = this.value;
 });
};

<input class="itemTotalNeto"><br>
<input class="itemTotalNeto"><br>
<input class="itemTotalNeto"><br>
<input class="itemTotalNeto"><br>
<input class="itemTotalNeto"><br>
Total General<br>
<input id="totalGeneral"><br>