Average only in typed fields

Asked

Viewed 538 times

5

Hello, I’m programming a system where you average some fields. The point is that not always all values will be informed and the average should calculate the fields in which there are values, that is, the calculation of the average will vary according to the fields yesterday has value.

HTML

<form name="formMediasETEs" method="post" action="AdicionarVazao.php">
    <tr class="tabela_dados">
        <td>
            <input name="data" style="text-align:center; width:150px" style="font-size:10px" type="date" id="data" value="" />
        </td>
        <td>
            <input name="oito" type="text" id="oito" onblur="ver()" style="text-align:center; width: 60px" value="" />
        </td>
        <td>
            <input name="nove" type="text" id="nove" style="text-align:center; width: 60px" value="" />
        </td>
        <td>
            <input name="dez" type="text" id="dez" style="text-align:center; width: 60px" value="" />
        </td>
        <td>
            <input name="onze" type="text" id="onze" style="text-align:center; width: 60px" value="" />
        </td>
        <td>
            <input name="doze" type="text" id="doze" style="text-align:center; width: 60px" value="" />
        </td>
        <td>
            <input name="treze" type="text" id="treze" style="text-align:center; width: 60px" value="" />
        </td>
        <td>
            <input name="quatorze" type="text" id="quatorze" style="text-align:center; width: 60px" value="" />
        </td>
        <td>
            <input name="quinze" type="text" id="quinze" style="text-align:center; width: 60px" value="" />
        </td>
        <td>
            <input name="d_seis" type="text" id="d_seis" style="text-align:center; width: 60px" value="" />
        </td>
        <td>
            <input name="d_sete" type="text" id="d_sete" style="text-align:center; width: 60px" value="" />
        </td>
        <td>
            <input name="d_oito" type="text" onblur="calcularMediaQLSETES()" id="d_oito" style="text-align:center; width: 60px" value="" />
        </td>
    </tr>

Javascript

function calcularMediaQLSETES() {
    var q2 = document.forms['formMediasETEs']['oito'].value;
    var q3 = document.forms['formMediasETEs']['nove'].value;
    var q4 = document.forms['formMediasETEs']['dez'].value;
    var q5 = document.forms['formMediasETEs']['onze'].value;
    var q23 = document.forms['formMediasETEs']['doze'].value;
    var q6 = document.forms['formMediasETEs']['treze'].value;
    var q7 = document.forms['formMediasETEs']['quatorze'].value;
    var q8 = document.forms['formMediasETEs']['quinze'].value;
    var q9 = document.forms['formMediasETEs']['d_seis'].value;
    var q10 = document.forms['formMediasETEs']['d_sete'].value;
    var q11 = document.forms['formMediasETEs']['d_oito'].value;

    var mqls = (parseFloat(q2) + parseFloat(q3) + parseFloat(q4) +
        parseFloat(q5) + parseFloat(q23) + parseFloat(q6) + parseFloat(q7) +
        parseFloat(q8) + parseFloat(q9) + parseFloat(q10) + parseFloat(q11)) / 11;

    document.forms['formMediasETEs']['mediaQ_ls'].value = mqls.toFixed(2);
}

Thank you!

javascript jquery
  • 1

    It’s okay if the solution is with jQuery and not just with Javascript?

  • Yes, it can be! Thank you

  • If you can, ask the question also how the HTML is mounted, it can be only the part of the form. This will help people to put together more elaborate solutions, sometimes the "problem" is not only in JS. I see that this can be improved with a looping, removing this lot of variables, but I need to know how HTML is being created.

3 answers

5

Using only you would only need to get the values of inputs and check if they have value. If you have, simply add normally and increase the amount to be calculated.

Would look this way:

<script>
  function calcularMedia(){
    //Você pode alterar o elemento de acordo com a sua necessidade
    inputs = document.querySelectorAll("input[type=text]");
    var quantidade = 0;
    var total = 0;
    for (i = 0; i < inputs.length; ++i) {
      var valor = parseInt(inputs[i].value);
      if(valor){
            total = total + valor;
            quantidade ++;
      }
  	}
    var media = total / quantidade;
    
    document.getElementById('resultado').innerHTML  = "Media: " + media;
  }
</script>

<input type="text"/><br/>
<input type="text"/><br/>
<input type="text"/><br/>
<input type="text"/><br/>
<input type="text"/><br/>
<input type="text"/><br/>
<input type="text"/><br/>

<button  onclick="calcularMedia()">Calcular</button>

<p id="resultado"></p>

4


Follow a POC with jQuery, I believe should help:

HTML:

Nota 1: <input class="nota" /><br/>
Nota 2: <input class="nota" /><br/>
Nota 3: <input class="nota" /><br/><br/>
Media: <input id="media" readonly/>

JQUERY:

$(function(){
    $('.nota').change(function(){
      var total = 0;
      var notas = 0;
      $('.nota').each(function(){
          var nota = new Number(this.value);          
          if(nota === 0) return;          
          total = total + nota;
          notas++;
      })
      $('#media').val(total/notas);
  });
})

See working on jsFiddle.

  • 1

    There is a problem, my friend. Because of the new number, the equality comparison will never be true. . ;)

  • Perfect, solved! That’s what I needed. Thank you all!

1

I don’t advise using jQuery just to do this kind of simple calculation, except if you already use it for other more complex functions.

function calcularMediaQLSETES()  
{  
  var formMedia = document.forms['formMediasETEs'];
  var total = 12; //numero total de campos
  values = 0;
  for (var i = 1; i <= 12; i++ ){ //começo em 1 porque 0 é a data
     let actual = parseInt(formMedia[i].value);
     if(!actual){
        total--;
        continue;
     }
     values += actual;
  }
  return !alert(values/total);
}
<form name="formMediasETEs" method="post" action="AdicionarVazao.php">
<tr>
    <td><input name="data" style="text-align:center; width:150px" style="font-size:10px" type="date" id="data" value=""/></td>
    <td><input name="oito" type="text" id="oito" onblur="ver()" style="text-align:center; width: 60px" value=""/></td>
    <td><input name="nove" type="text" id="nove" style="text-align:center; width: 60px" value=""/></td>
    <td><input name="dez" type="text" id="dez" style="text-align:center; width: 60px" value=""/></td>
    <td><input name="onze" type="text" id="onze" style="text-align:center; width: 60px" value=""/></td>
    <td><input name="doze" type="text" id="doze" style="text-align:center; width: 60px" value=""/></td>
    <td><input name="treze" type="text" id="treze" style="text-align:center; width: 60px" value=""/></td>
    <td><input name="quatorze" type="text" id="quatorze" style="text-align:center; width: 60px" value=""/></td>
    <td><input name="quinze" type="text" id="quinze" style="text-align:center; width: 60px" value=""/></td>
    <td><input name="d_seis" type="text" id="d_seis" style="text-align:center; width: 60px" value=""/></td>
    <td><input name="d_sete" type="text" id="d_sete" style="text-align:center; width: 60px" value=""/></td>
    <td><input name="d_oito" type="text" onblur="calcularMediaQLSETES()" id="d_oito" style="text-align:center; width: 60px" value=""/></td>
</tr>
<br><br>
<input onClick="calcularMediaQLSETES()" type="button" value="Calcular Media" />
</form>

Browser other questions tagged javascript jquery

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