0

Tenho o seguinte código Java:

<script type='text/javascript'>
    function Calc(){
        var qnt = document.getElementById('qnt_saida').value;
        var vlr = document.getElementById('vl_unt_org').value;
        var tl = (qnt*1) * (vlr*1);
        document.getElementById('vl_fob').value = tl;
    }
</script>

Ele ta funcionado, meu problema se dá no loop FOR do php, a função Calc() só é chamada uma única vez. Para este caso abaixo a mesma deveria rodar duas vezes:

<?php
    for($i = 0; $i < $tl_detalhe; $i++){
        print "
          <tr>
            <td> <input class='input' id='qnt_saida' name='qnt_saida' type='text' value='".number_format($_SESSION['detalhe'][$i]->QUANTIDADE,5,",",".")."' onBlur='Calc()' /></td>
            <td> <input class='input' id='vl_unt_org' name='vl_unt_org' value='".number_format($_SESSION['detalhe'][$i]->VL_UNT_ORG,7,",",".")."' readonly /> </td>
            <td> <input class='input' id='vl_fob' name='vl_fob' readonly /> </td>
          </tr>
        ";
    }
?>

Alguém poderia me ajudar com essa questão? Teria como eu passar essa função dentro do loop para a mesma ser chamada quantas vezes fosse preciso?

1
  • 1
    Você não pode usar o mesmo id para mais de um elemento no HTML.
    – bfavaretto
    Commented 9/04/2018 às 21:25

2 Respostas 2

3

Eu recomendaria aprender a usar querySelector e querySelectorAll. Além de serem mais flexíveis, são compatíveis com todos os navegadores modernos e pré-modernos.

Usando estes seletores, em muitos casos, você pode até dispensar o uso de ids, passando apenas o this como parâmetro na função, economizando código HTML e em alguns casos até JavaScript.

No exemplo abaixo, eu reproduzo seu código sem o uso de id:

function Calc(i){
   var linha = i.parentNode.parentNode; // seleciono a linha TR
   var qnt = i.value; // quantidade
   var vlr = linha.querySelector('[name="vl_unt_org"]').value; // valor
   var tl = qnt*vlr;
   linha.querySelector('[name="vl_fob"]').value = tl;
}
<table>
   <tr>
      <td> <input class='input' name='qnt_saida' type='text' value='2' onBlur='Calc(this)' /></td>
      <td> <input class='input' name='vl_unt_org' value='100.00' readonly /> </td>
      <td> <input class='input' name='vl_fob' readonly /> </td>
   </tr>
   <tr>
      <td> <input class='input' name='qnt_saida' type='text' value='3' onBlur='Calc(this)' /></td>
      <td> <input class='input' name='vl_unt_org' value='50.00' readonly /> </td>
      <td> <input class='input' name='vl_fob' readonly /> </td>
   </tr>
</table>

Obs.: não entendi o uso dessa operação: (qnt*1) * (vlr*1)! Um número multiplicado por 1 é igual a ele mesmo, portanto não faz muito sentido usar dessa forma. No exemplo eu deixei apenas qnt*vlr.

1

Tem alguns erros semânticos no seu código. Você está definindo em cada iteração do loop em PHP um novo conjunto de elementos com o mesmo id do anterior. Quando você rodar a função javascript, ela vai procurar o elemento com o id, encontrar o primeiro no DOM e retornar este, já que o getElementByID retorna apenas um elemento. Uma solução rápida é incrementar cada id com o contador do loop e colocar o contador como parâmetro no Calc():

<?
for ($i = 0; i < $tl_detalhe; $i++){
print "
          <tr>
            <td> <input class='input' id='qnt_saida_$i' name='qnt_saida_$i' type='text' value='".number_format($_SESSION['detalhe'][$i]->QUANTIDADE,5,",",".")."' onBlur='Calc($i)' /></td>
            <td> <input class='input' id='vl_unt_org_$i' name='vl_unt_org_$i' value='".number_format($_SESSION['detalhe'][$i]->VL_UNT_ORG,7,",",".")."' readonly /> </td>
            <td> <input class='input' id='vl_fob_$i' name='vl_fob_$i' readonly /> </td>
          </tr>
        ";
}
?>

A função Calc() ficaria assim:

<script type='text/javascript'>
    function Calc(indice){
        var qnt = document.getElementById('qnt_saida_'+indice).value;
        var vlr = document.getElementById('vl_unt_org'+indice).value;
        var tl = (qnt*1) * (vlr*1);
        document.getElementById('vl_fob_'+indice).value = tl;
    }
</script>

Não é a solução mais elegante, mas vai resolver seu problema com um mínimo de alterações. Eu recomendo usar jQuery para uma solução mais limpa.

Outra coisa, estou supondo que $tl_detalhes tenha a quantidade de registros em $SESSION['detalhes']. De qualquer modo, eu salvaria o valor de sessão em uma variável local e usaria esta ao invés de acessar a sessão em cada chamada.

1
  • 1
    Fiz as correções sugeridas, funcionou perfeitamente. Fico muito grato pela ajuda, @BetoRaposa. Commented 9/04/2018 às 21:28

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 .