help with form calculation

Navigation
2

My first problem is that I have a select id "t4" that is multiplied by the input disc4a so everything works fine but I have to limit the result according to the value of select eg if I select 0.50 and type in any input number this result can not exceed 2.00 as 0.25 can not exceed 1.00 and 0.20 exceeds 0.80.

My second problem is to make the result of the sum between the fields disc1a to disc7a as they appear in the input id "total1a".

Below is my code: 

    <script src="js/jquery-1.7.1.js"></script>
<script language="javascript">




$(window).load(function(){
            // Somente numeros
        $('.nr').keyup(function() {
    var valor = $(this).val().replace(/[^0-9]+/g,'');
            $(this).val(valor);
        });

$("#disc1a").keyup(function(){

    var quantidade = $(this).val();
    var valor      = $("#t1").val();
    var soma = "";
            if ((quantidade != "") && (valor != "")){

            soma = (parseFloat(valor) * parseInt(quantidade));

            if(isNaN(soma)){    
                soma = "";    
            }else{

                soma = soma.toFixed(2);    
            }    
        }       
    $("#promo1a").val(soma);
});
$("#disc2a").keyup(function(){

    var quantidade = $(this).val();
    var valor      = $("#t2").val();
    var soma = "";
            if ((quantidade != "") && (valor != "")){

            soma = (parseFloat(valor) * parseInt(quantidade));

            if(isNaN(soma)){    
                soma = "";    
            }else{    
                soma = soma.toFixed(2);    
            }    
        } 
    $("#promo2a").val(soma);
});

$("#disc3a").keyup(function(){

    var quantidade = $(this).val();
    var valor      = $("#t3").val();
    var soma = "";
            if ((quantidade != "") && (valor != "")){

            soma = (parseFloat(valor) * parseInt(quantidade));

            if(isNaN(soma)){

                soma = "";

            } if ((soma < "1.50")){

            soma = soma.toFixed(2); 

            }else{

            soma = "1.50";  

            }

        }


    $("#promo3a").val(soma);
});


$("#t4").change(function(){

    var quantidade = $(this).val();
    var valor      = $("#disc4a").val();
    var soma = "";

            if ((quantidade != "") && (valor != "")){

            soma = (parseFloat(quantidade) * parseInt(valor));

            if(isNaN(soma)){

                soma = "";

            }else{

                soma = soma.toFixed(2);

            }

        }


    $("#promo4a").val(soma);
});


});  

function calcula(){
        var valor = 0; 

        $('.soma').each(function(i){ 

            valor = parseFloat($(this).val()) + valor ;
            });


        valor = valor.toFixed(2);

        $('#total1a').val( valor );

    }
</script>

<link href="tema/css/info.css" rel="stylesheet" type="text/css">


<table class='wrapper' width="800" cellspacing='1' cellpadding='2' >

    <tr>
      <td width="205" colspan="4" rowspan="2" align="center" class="row1">DADOS APURADOS</td>
      <td width="56" rowspan="2" align="center" class="row1">VALOR</td>
      <td rowspan="2" class="row1" align="center">DISCRIMINAÇÃO</td>
      <td colspan="2" class="row1" align="center">SEM/PROM</td>
    </tr>
    <tr>
      <td width="29" class="row2"><input name="sem1" type="text" id="sem1" size="1"></td>
      <td width="53" class="row2"><input name="semdt1" type="text" id="semdt1" value="<?php echo date('Y') ?>" size="3"></td>
    </tr>
    <tr>
      <td width="205" rowspan="7" class="row1" align="center">P<br /> O <br />N <br />T <br />O <br />S <br /><br /><br />
        P<br />
        O<br />
        S<br />
        I<br />
        T<br />
        I<br />
        V <br />
        O<br />
      S</td>
      <td width="205" rowspan="4" align="center" class="row1">TEMPO<br />DE<br />SERVIÇO</td>
      <td colspan="2" class="row3">FUNÇÃO </td>
      <td class="row3">
      <input name="t1" type="text" disabled="disabled" id="t1" value="0.10" size="5"></td>
      <td width="45" class="row3"><input name="disc1a" type="text" id="disc1a" class="nr" size="9"></td>
      <td colspan="2" class="row3"><input name="promo1a" type="text" id="promo1a" class="soma" size="12"></td>
    </tr>
    <tr>
      <td colspan="2" class="row2">PERMANÊNCIA </td>
      <td class="row2">
      <input name="t2" type="text" disabled="disabled" id="t2" value="0.20" size="5"></td>
      <td class="row2"><input name="disc2a" type="text" id="disc2a" class="nr" size="9"></td>
      <td colspan="2" class="row2"><input name="promo2a" type="text" id="promo2a" class="soma" size="12"></td>
    </tr>
    <tr>
      <td colspan="2" class="row3">INSTRUTOR</td>
      <td class="row3"><input name="t3" type="text" disabled="disabled" id="t3" value="0.25" size="5"></td>
      <td class="row3"><input name="disc3a" type="text" id="disc3a" class="nr" size="9"></td>
      <td colspan="2" class="row3"><span class="row2">
        <input name="promo3a" type="text" id="promo3a" class="soma" size="12">
      </span></td>
    </tr>
    <tr>
      <td colspan="2" class="row2">FUNÇÃO</td>
      <td class="row2"><select name="t4" id="t4">
        <option selected="selected">SELECIONE</option>
        <option value="0.50">EM 0.50</option>
        <option value="0.25">GCG 0.25</option>
        <option value="0.20">DIRETORIA 0.20</option>
      </select></td>
      <td class="row2">
        <input name="disc4a" type="text" id="disc4a" class="nr" size="9">
      </td>
      <td colspan="2" class="row2"><input name="promo4a" type="text" id="promo4a" size="12"></td>
    </tr>
    <tr>
      <td colspan="3" class="row3">APROVEITAMENTO</td>
      <td class="row3"><input name="fer" type="text" disabled="disabled" id="fer" value="0.15" size="5"></td>
      <td class="row3"><input name="disc5a" type="text" id="disc5a" size="9"></td>
      <td colspan="2" class="row3"><span class="row2">
        <input name="promo5a" type="text" id="promo5a" size="12">
      </span></td>
    </tr>
    <tr>
      <td rowspan="2" class="row1">TRABALHOS</td>
      <td colspan="2" class="row2">CATEGORIA &quot;A&quot;</td>
      <td class="row2"><input name="tab1" type="text" disabled="disabled" id="tab1" value="0.50" size="5"></td>
      <td class="row2"><span class="row3">
        <input name="disc6a" type="text" id="disc6a" size="9">
      </span></td>
      <td colspan="2" class="row2"><input name="promo6a" type="text" id="promo6a" size="12"></td>
    </tr>
    <tr>
      <td colspan="2" class="row3">CATEGORIA &quot;B&quot;</td>
      <td class="row3"><input name="tab2" type="text" disabled="disabled" id="tab2" value="0.10" size="5"></td>
      <td class="row3"><input name="disc7a" type="text" id="disc7a" size="9"></td>
      <td colspan="2" class="row3"><span class="row2">
        <input name="promo7a" type="text" id="promo7a" size="12">
      </span></td>
    </tr>
    <tr>
      <td colspan="6" class="row3" align="right">(1) SOMA DOS PONTOS POSITIVOS</td>
      <td colspan="2" class="row3"><span class="row2">
        <input name="total1a" type="text" id="total1a" onkeyup="up(this)" onblur="calcula();" size="12">
      </span></td>
    </tr>
</table>

I made a sample for better visualization of the problem

link

    
asked by anonymous 22.02.2015 / 17:30

2 answers

1

Here is a suggestion of code simplification.

jsFiddle: link

The idea is to remove an event handler for each element and use a generic $("input[id^=disc]") .

By looping each to these elements you can use index to associate the input of the column on the side so you do not have to fetch the element from the DOM every calculation.

The check that select needs, if I understand it at most 4 times, can be done with if (i== 3 && soma > 4 * valor) soma = 4 * valor; , which assigns the maximum value if the value exceeds 4x.

So the code I put in jsFiddle is: 

$(window).load(function () {
    // Somente numeros
    $('.nr').keyup(function () {
        var valor = this.value;
        if (valor) this.value = valor.replace(/[^0-9]+/g, '');
    });
    $("input[id^=disc]").each(function (i) {
        var index = i + 1;
        var $tValor = $("#t" + index);
        var $promo = $("#promo" + index + "a")
        $(this).on('keyup', function () {
            var quantidade = this.value;
            var valor = $tValor.val();
            var soma = 0;
            if (quantidade && valor) {
                soma = parseFloat(valor) * parseInt(quantidade);
                if (isNaN(soma)) soma = 0;
                else soma = soma.toFixed(2);
            }
            if (i== 3 && soma > 4 * valor) soma = 4 * valor;
            $promo.val(soma);
            calcula();
        });
    });
    $('#t4').change(function () {
        $('#disc4a').keyup();
    });
});

function calcula() {
    var valor = 0;
    $('.soma').each(function () {
        valor = parseFloat(this.value || 0) + valor;
    });
    $('#total1a').val(valor.toFixed(2));
}
    
23.02.2015 / 01:51
2

You can summarize your code a lot by making it more generic, like this: 

<td class="row3">
  <input name="t1" type="text" disabled="disabled" id="t1" value="0.10" size="5">
</td>
<td width="45" class="row3">
  <input data-operator="#t1" data-result="#promo1a" name="disc1a" type="text" id="disc1a" class="nr" size="9">
</td>
<td colspan="2" class="row3">
  <input name="promo1a" type="text" id="promo1a" class="soma" size="12">
</td>

Note that adding two attributes data-operator and data-result in this way can indicate which element is the quantity (operand) and what is the result element. Following this same idea you can do the following: 

$('.nr').keyup(function() {
  var valor = $(this).val().replace(/[^0-9]+/g,'');
  $(this).val(valor);

  var quantidade = $($(this).data("operator")).val(); //pega a quantidade o elemento indicado
  valor = (parseFloat(valor) * parseFloat(quantidade));

  if(!isNaN(valor)){
    //teste específico para o elemento #t4
    if($($(this).data("operator")).attr("id") == "t4"){
      if((quantidade == 0.5) && (valor <= 2)){
        $($(this).data("result")).val(valor.toFixed(2));
      }
      else if((quantidade == 0.25) && (valor <= 1)){
        $($(this).data("result")).val(valor.toFixed(2));
      }
      else if((quantidade == 0.2) && (valor <= 0.8)){
        $($(this).data("result")).val(valor.toFixed(2));
      }
      else $($(this).data("result")).val(0.00); //extrapolou
    }
    //outros elementos
    else $($(this).data("result")).val(valor.toFixed(2)); 
  }
  else $($(this).data("result")).val(0.00); //coloquei zero caso não seja um número

  //calcula o total
  calcula();
});

In its totalising function I would just add one more test: 

function calcula(){
  var valor = 0; 

  $('.soma').each(function(){ 
    var testar = parseFloat($(this).val()); 
    if(!isNAN(testar)) valor += testar;
  });

  $('#total1a').val(valor.toFixed(2));  
}

I hope I have helped.

    
22.02.2015 / 18:23
Concatenate address in Excel VBA Range Object Layout of images dynamically after photo is captured