Multiply two numbers and show result (JQUERY/JAVASCRIPT + PHP)

Question

I have 3 fields in my form FIELD 1: which already has a value that I pulled into my database which is the product price Field 2: where I will insert a whole number indicating the amount of product I want to add Field 3: the total of the multiplication that sera Field 1(product price) X Field 2 (product quantity)

Only that doing this, the return of value in my code is giving me "Nan" and not why? I need help to understand what I did wrong. I’ve been through this for three hours and I can’t understand.DISREGARD THE FIELD WRITTEN "SALE VALUE IN R$" ON THE IMAGE

SAMPLE IMAGE

Here is my HTML condigo:

                 <div class="container">
                      <div class="row">
                        <div class="col-sm-3 calculate">
                           <label>Valor Tabelado</label>
                           <input type="text" class="form-control" name="valor_tabela" id="valor_tabela" value="R$<?=$put['valor_tabela']?>" readonly>
                        </div>

                        <div class="col-sm-3 calculate">
                          <label>Quantidade</label>
                            <input type="number" class="form-control" id="qty"   name="quantidade" value="0">
                        </div>
                        <div class="col-sm-3 calculate">
                          <label>Sub Total</label>
                            <input type="number" class="form-control"  id="result" name="sub_total"   readonly>
                        </div>
                      </div>
                </div>

JAVASCRIPT

<script>

    $(".calculate").click(function () {
    var value = '<?=$put['valor_tabela']?>';
    var primaryincome = $("#qty").val();
    var otherincome = $("#valor_tabela").val(value);
    var totalincome = parseInt(primaryincome) + parseFloat(otherincome);
    alert(totalincome);
    $("#result").val(totalincome);
})
    </script>

Answer 1

This happens because the return of the variable otherincome is an object and is trying to accomplish a sum with an object, you must set a value to the input[id="valor_tabela"] and then reclaim its value. For example:

var otherincome = $("#valor_tabela").val(value).val()

A value is assigned to the input and then recovered that amount.

Getting something like that:

$("#calcular").click(function () {
    var value = 1467.73;
    var primaryincome = $("#qty").val();
    var otherincome = $("#valor_tabela").val(value).val();
    // Alterado o sinal de '+', para  '*'
    var totalincome = parseInt(primaryincome) * parseFloat(otherincome);
    alert(totalincome);
    $("#result").val(totalincome);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-sm-3 calculate">
            <label>Valor Tabelado</label>
            <input type="text" class="form-control" name="valor_tabela" id="valor_tabela" value="1467.73" readonly>
        </div>

        <div class="col-sm-3 calculate">
            <label>Quantidade</label>
            <input type="number" class="form-control" id="qty"   name="quantidade" value="0">
        </div>
        <div class="col-sm-3 calculate">
            <label>Sub Total</labe>
            <input type="number" class="form-control"  id="result" name="sub_total"   readonly>
        </div>
        <button id="calcular">Calcular</button>
    </div>
</div>