How to return balance automatically with AJAX without post

Asked

Viewed 52 times

-1

I am trying to make a function that returns the result of an expression. Example:

I want to make the distribution of 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 to more or less, the result of the reported value (120,000) subtracted from the sum of the months must appear in the month of December.

With the help of my friend Darlei,

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 don’t know how to return this value to INPUT

javascript ajax

  • Do you have all values in inputs? How are they loaded/inserted into the page? If you are only going to do/show the calculation, you could do a simpler js, ajax only if you need to save the values in the database or return some value from there, that would be the case?

  • Do not need to save these values no. They come from a form and will be displayed after inserting in the database. How can I do this?

  • If the user increases the value of a month, the subtraction will be negative because the sum of the months will be greater than 120,000

  • That’s exactly what, I’d like to point out. Hypo-sufficiency and hyper-sufficiency

1 answer

0


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

See if the result is as 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>

Browser other questions tagged javascript ajax

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