How to return balance automatically with AJAX without post

Question

How to return balance automatically with AJAX without post

Navigation

#1 by (0 votes)

-1

I'm trying to do a function that returns the result of an expression. Example:

I want to distribute a value informed by the months of a year. Example:

120,000 = Jan / 10,000 Feb / 10,000 etc.

However, if the user changes any month more or less, the result of the reported amount (120,000) subtracted from the sum of the months should appear in the month of December.

With the help of friend Darlei, I was able to start this code

function saldo()
{
	var total = document.getElementById("total");
	var jan = document.getElementById("jan");
	var fev = document.getElementById("fev");
	var mar = document.getElementById("mar");
	var abr = document.getElementById("abr");
	var mai = document.getElementById("mai");
	var jun = document.getElementById("jun");
	var jul = document.getElementById("jul");
	var ago = document.getElementById("ago");
	var set = document.getElementById("set");
	var out = document.getElementById("out");
	var nov = document.getElementById("nov");
	var dez = document.getElementById("dez");

	dez.value = total.value - jan.value - fev.value - mar.value - abr.value - mai.value - jun.value - jul.value - ago.value - set.value - out.value - nov.value;

}

<form id="form1" name="form1" method="post" action="">
  <p>&nbsp;</p>
  <p>
    <label for="total">Total</label>
    <input type="text" name="total" id="total" value="120.000" />

    <label for="jan">Jan</label>
    <input type="text" name="jan" id="jan" />
	    <label for="textfield">Fev</label>
    <input type="text" name="fev" id="fev" />
	    <label for="textfield">Mar</label>
    <input type="text" name="mar" id="mar" />
	    <label for="textfield">Abr</label>
    <input type="text" name="abr" id="abr" />
	    <label for="textfield">Mai</label>
    <input type="text" name="mai" id="mai" />
	    <label for="textfield">Jun</label>
    <input type="text" name="jun" id="jun" />
	    <label for="textfield">Jul</label>
    <input type="text" name="jul" id="jul" />
	    <label for="textfield">Ago</label>
    <input type="text" name="ago" id="ago" />
	    <label for="textfield">Set</label>
    <input type="text" name="set" id="set" />
	    <label for="textfield">Out</label>
    <input type="text" name="out" id="out" />
	    <label for="textfield">Nov</label>
    <input type="text" name="nov" id="nov" />
	    <label for="textfield">Dez</label>
    <input type="text" name="dez" id="dez" />
  </p>
</form>

But I still do not know how to return this value to INPUT

javascript ajax

asked by anonymous 12.12.2017 / 14:50

1 answer

GridPanel CheckboxSelectionModel - Add selection (ext.net) reuse jquery clones in another div

score 0 · Accepted Answer

The best way to work with fields is to add class to each one, as this makes it easier and leaves the code leaner. I've added class="meses" in each field of months.

See if the result is expected:

window.onload = function(){
   var meses = document.getElementsByClassName("meses");  
   var valor = parseFloat(document.getElementById("total").value.replace('.',''));
   
   function reCalc(){
      var soma = 0;
      for(var x=0; x<meses.length-1; x++){
         soma += parseFloat(meses[x].value);
      }
      meses[meses.length-1].value= valor-soma;
   }
   
   function divisao(i){
      var divisao = valor / 12;

      for(var x=0; x<meses.length; x++){
         meses[x].value = divisao;
         
         if(!i){
            meses[x].addEventListener("input", reCalc );
         }
      }
   }
   
   divisao();
}

<form id="form1" name="form1" method="post" action="">
  <p>&nbsp;</p>
  <p>
    <label for="total">Total</label>
    <input type="text" name="total" id="total" value="120.000" />

    <label for="jan">Jan</label>
    <input class="meses" type="text" name="jan" id="jan" />
	    <label for="textfield">Fev</label>
    <input class="meses" type="text" name="fev" id="fev" />
	    <label for="textfield">Mar</label>
    <input class="meses" type="text" name="mar" id="mar" />
	    <label for="textfield">Abr</label>
    <input class="meses" type="text" name="abr" id="abr" />
	    <label for="textfield">Mai</label>
    <input class="meses" type="text" name="mai" id="mai" />
	    <label for="textfield">Jun</label>
    <input class="meses" type="text" name="jun" id="jun" />
	    <label for="textfield">Jul</label>
    <input class="meses" type="text" name="jul" id="jul" />
	    <label for="textfield">Ago</label>
    <input class="meses" type="text" name="ago" id="ago" />
	    <label for="textfield">Set</label>
    <input class="meses" type="text" name="set" id="set" />
	    <label for="textfield">Out</label>
    <input class="meses" type="text" name="out" id="out" />
	    <label for="textfield">Nov</label>
    <input class="meses" type="text" name="nov" id="nov" />
	    <label for="textfield">Dez</label>
    <input class="meses" type="text" name="dez" id="dez" />
  </p>
</form>