Formula for Calculation in jQuery with return

Question

I have this listing... I need that, when filling the real value, I do: (real value) - (purchase value) = purchase-versus-real, and profit is (buy-versus-real) - (sale value), and fill in profit.

But wanted to in real time, fill in, do the operation and return the result.

HTML structure:

<table class="table table-bordered table-striped">
    <thead>
        <tr>
            <th width="50" class="text-center">#</th>
            <th>Item do Pacote</th>
            <th>Compra</th>
            <th>Venda</th>
            <th>Real</th>
            <th>Compra <i>versus</i> Venda</th>
            <th>Compra <i>versus</i> Real</th>
            <th>Lucro</th>
        </tr>
    </thead>
    <?php 
    if(count($detalhes_evento->detalhes_pacote_ativo)>0){
        $total_compra = 0;
        $total_venda = 0;
        $total_compra_versus_venda = 0;
        $compra_versus_venda = 0;
        foreach($detalhes_evento->detalhes_pacote_ativo as $valor){ 


            $compra_versus_venda = ($valor->valor_venda - $valor->valor_compra);        

            $total_compra += $valor->valor_compra;
            $total_venda += $valor->valor_venda;
            $total_compra_versus_venda += $compra_versus_venda;


    ?>
        <tr>
            <td width="50" class="text-center"><?php echo $valor->id; ?></td>
            <td><?php echo $valor->nome; ?></td>
            <td class="valor_compra">R$ <?php echo number_format($valor->valor_compra, "2", ",", "."); ?></td>
            <td class="valor_venda">R$ <?php echo number_format($valor->valor_venda, "2", ",", "."); ?></td>
            <td width="110px"><input type="text" id="valor_real" name="valor_real[]" class="form-control valor_real" placeholder="0,00"></td>
            <td><?php echo number_format($compra_versus_venda, "2", ".", "."); ?></td>
            <td class="resultado">0,00</td>
            <td>0,00</td>
        </tr>
    <?php 
        }
    ?>
    <thead>
        <tr>
            <th width="50" class="text-center"></th>
            <th></th>
            <th>R$ <?php echo number_format($total_compra, "2", ",", "."); ?></th>
            <th>R$ <?php echo number_format($total_venda, "2", ",", "."); ?></th>
            <th>R$ 0,00</th>
            <th>R$ <?php echo number_format($total_compra_versus_venda, "2", ",", "."); ?></th>
            <th>0,00</th>
            <th>0,00</th>
        </tr>
    </thead>    
    <?php
    } else {
    ?>
        <tr>
            <td colspan="4" class="text-center">Nenhum item foi adicionado a este pacote.</td>
        </tr>
    <?php } ?>
</table>

I tried to do it this way:

$(".valor_real").on('keyup', function(){
    var valor_compra = parseFloat( ( $(this).parent().parent().find(".valor_compra").text() ).replace("R$ ", "").replace(".", "").replace(",", ".") );
    var valor_venda = parseFloat( ( $(this).parent().parent().find(".valor_venda").text() ).replace("R$ ", "").replace(".", "").replace(",", ".") );
    var valor_real = $(".valor_real").val();
    var lucro_base = (valor_compra - valor_real);
    $(this).parent().parent().find(".resultado").html( "R$ "+lucro_base );
})

But unfortunately, the first line gives right.. but the other ones, no, the values are not returned correctly.

What’s wrong with it?

Answer 1

You can assign to your field real the function .change() jQuery

$( "#campo_real" ).change(function() {
  // faça o calculo e atualize o valor no proximo campo
  ...
  $( "#meu_outro_campo").val(meu_valor_calculado);
});

This function can be linked when your page loads, in the famous .ready() jQuery:

$( document ).ready(function() {
  // minha função começa abaixo
});