0

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.

enter image description here

enter image description here

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' );

enter image description here

  • 1
    No errors shown? I see that you're attaching the event listener to what val method returns, which is incorrect. – Salah Jan 11 at 16:14
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>

Your Answer

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.