Adding a Dynamic calculated field in SharePoint Edit Form View

Question

I am looking to add a dynamic field in my Edit Form since calculated fields do not show on the Edit View mode. Using the Hillbilly format, I created a table...

HTML

        <tr>
            <td width="15%"><span class="fieldToMove" id="quantity_r1_efc62aad-dd1e-4ce9-8b63-c67e87335eba_$NumberField"
                    data-displayName="quantity_r1"></span></td>
            <td width="15%"><span class="fieldToMove" data-displayName="description_r1"></span></td>
            <td width="45%"><span class="fieldToMove" id="unitPrice_r1_24ece0d3-2dc0-44e3-aa29-abc8015cb7d8_$NumberField"
                    data-displayName="unitPrice_r1"></td>
            <td width="25%">
                <p id="totalCharge"></p>
            </td>
            <td width="25%"><span class="fieldToMove" data-displayName="discount_r1" readonly></td>
            <td width="25%"><span class="fieldToMove" data-displayName="tax_r1" readonly></td>
            <td width="25%"><span class="fieldToMove" data-displayName="shipping_r1" readonly></td>
            <td width="25%"><span class="fieldToMove" data-displayName="totalCharges_r1" readonly></td>
        </tr>

JS

var first = $( "input[title='unitPrice_r1']" ).val();
var second = $( "input[title='quantity_r1']" ).val();
var result = document.getElementById( 'totalCharge' );

first.addEventListener( "input", sum );
second.addEventListener( "input", sum );

function sum() {

    var one = parseFloat( first.value ) || 0;
    var two = parseFloat( second.value ) || 0;

    var add = one + two;

    result.innerHTML = "Your Sum is : " + add;

}

I changed the ID to what was displayed when I inspected the page but I was aiming for the Title...

It's a simple math issue, multiply Unit Price * Quantity and display the calculated result on the table.

My Result: This at least showed the "Your Sum is: 0" when I used

        var first = document.getElementById( 'quantity_r1_efc62aad-dd1e-4ce9-8b63-c67e87335eba_$NumberField' );
    var second = document.getElementById( 'unitPrice_r1_24ece0d3-2dc0-44e3-aa29-abc8015cb7d8_$NumberField' );

Answer 1

The following JavaScript code for your reference.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    var $quantity=$("input[title='quantity_r1']");
    var $price=$("input[title='unitPrice_r1']");
    $quantity.on("keyup", function() {
       sum($(this).val(),$price.val());  
    });
    $price.on("keyup", function() {
       sum($quantity.val(), $(this).val());
    });
});
function sum(quantity,price) {
    var quantityCount = parseFloat(quantity) || 0;
    var priceVal = parseFloat(price)|| 0;
    var total = quantityCount*priceVal;
    $("#totalCharge").html("Your Sum is : " + total);
}
</script>