2

Meu primeiro problema é que tenho um select id "t4" que é multiplicado pelo input disc4a até ai tudo bem funciona mais tenho que limitar o resultado de acordo com o valor do select por exemplo se eu selecionar 0.50 e digitar no input qualquer número esse resultado não pode ultrapassar 2.00 assim como 0.25 não pode ultrapassar 1.00 e 0.20 ultrapassar 0.80.

Meu segundo problema é fazer aparecer no input id "total1a" o resultado da soma entre os campos disc1a até disc7a conforme forem aparecendo.

Segue abaixo meu código:

    <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>

fiz uma amostra para melhor vizualização do problema

https://jsfiddle.net/opeta/38av49L9/8/

2 Respostas 2

2

Você pode resumir bastante esse seu código tornando-o mais genérico, dessa forma:

<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>

observe que adicioneis dois atributos data-operator e data-result dessa forma dá para indicar qual o elemento que é a quantidade (operando) e qual é o elemento do resultado. Seguindo nessa mesma idéia dá para fazer o seguinte:

$('.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();
});

Na sua função de totalizar eu apenas adicionaria um teste a mais:

function calcula(){
  var valor = 0; 

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

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

Espero ter ajudado.

2
  • muito obrigado amigo mais acho que o código não ajuda pq o problema é no select que é multiplicado pelo input que coloca o valor, ele tem três valores 0.50 que não pode ultrapassar 2.00, 0.25 que não pode ultrapassar 1.00 e 0.20 que não pode ultrapassar 0.80 e a função de totalizar que vc modificou não esta funcionando. O problema da minha é que ela só dá o resultado se eu entrar e sair do input e eu queria que fosse automático, mais alguma idéia?
    – opeta
    Commented 22/02/2015 às 22:44
  • @opeta eu ainda acho que a resposta para a questão esta ai, com algumas edições no código. vou editá-la para demonstrar
    – kabstergo
    Commented 22/02/2015 às 23:24
1

Aqui fica uma sugestão de simplificação de código.

jsFiddle: http://jsfiddle.net/xaqfb1dx/

A ideia é remover um event handler para cada elemento e usar um genérico $("input[id^=disc]").

Fazendo um loop com o each a esses elementos pode usar-se o index para associar o input da coluna do lado e assim não ser preciso ir buscar o elemento ao DOM a cada cálculo.

A verificação que o select precisa, se compreendi bem máx 4 vezes superior, pode ser feita com if (i== 3 && soma > 4 * valor) soma = 4 * valor;, que atribui o valor máximo caso o valor exceda as 4x.

Assim o código que coloquei no jsFiddle é:

$(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));
}
5
  • perfeito amigo muito obrigado nunca conseguiria fazer sem ajuda só o resultado do select quando atinge o valor está vindo um número inteiro ao invés de decimal, sem querer abusar vou ter que fazer outros selects como este me explicar como posso limitar esses valores pois não entendi a lógica.
    – opeta
    Commented 23/02/2015 às 1:37
  • agora entendi a lógica mais como aplicar ela por exemplo ao input disc3a onde o limite dos pontos era 1.50 e agora ta sem esse limite, te agradeço de novo sua ajuda me livrou de uma dor de cabeça.
    – opeta
    Commented 23/02/2015 às 2:20
  • @opeta vi agora os teus comentários. Se quiseres podes colocar aqui um jsFiddle com o resto do HTML e posso adaptar o código a mais selects. Lembra-te de marcar como aceite uma das respostas.
    – Sergio
    Commented 23/02/2015 às 9:37
  • 1
    meu amigo quero lhe agradecer, estudei bastante seu script e consegui fazer funcionar com todas as restrições que o documento pedia, sua lógica foi simplesmente perfeita só com muito estudo e dedicação eu conseguiria fazer. eu programo um pouco no php e quero expandir meus horizontes, você me sugere algum curso ou livro em php ou javascript?
    – opeta
    Commented 23/02/2015 às 19:18
  • @opeta vai colocando problemas que tenhas aqui no SOpt e estudando as respostas que já há por aqui. Vais aprender muito e talvez brevemente ajudar outros também :)
    – Sergio
    Commented 23/02/2015 às 20:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .