onBlur (Javascript) inside a Loop For PHP

Question

I have the following Java code:

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

It’s worked, my problem is in the FOR loop of php, the Calc() function is only called once. For this case below it should rotate twice:

<?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>
        ";
    }
?>

Could someone help me with this question? Could I pass this function inside the loop to the same be called as many times as needed?

Answer 1

I would recommend learning to use querySelector and querySelectorAll. In addition to being more flexible, they are compatible with all modern and pre-modern browsers.

Using these selectors, in many cases you can even dispense with the use of ids, passing only the this as a parameter in the function, saving HTML code and in some cases even Javascript.

In the example below, I play your code without using 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.: I don’t understand the use of this operation: (qnt*1) * (vlr*1)! A number multiplied by 1 is equal to itself, so it doesn’t make much sense to use that way. In the example I just left qnt*vlr.

Answer 2

There are some semantic errors in your code. You are setting in each loop iteration in PHP a new set of elements with the same id as the previous one. When you run the javascript function, it will search for the element with the id, find the first one in the DOM and return it, since getElementByID returns only one element. A quick solution is to increment each id with the loop counter and put the counter as a parameter in 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>
        ";
}
?>

The Calc() function would look like this:

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

It is not the most elegant solution, but will solve your problem with a minimum of changes. I recommend using jQuery for a cleaner solution.

Another thing, I’m guessing $tl_details has the amount of records in $SESSION['details']. Anyway, I would save the session value to a local variable and use this instead of accessing the session on each call.