Custom field calculation submission not reflecting calculated values

1

I’m working on an automatically calculated custom field where I input the number of pieces per box and the box count, and it calculates the total quantity by piece. I’ve implemented the following script in the Extensions, targeting the sales-order-form page:

document.addEventListener('DOMContentLoaded', function () {
    const form = document.querySelector('#v-model-form');

    function updateBoxCount() {
        const piecesInBox = document.querySelectorAll('#v-model-form table tbody tr td:nth-child(5) input');
        const boxCount = document.querySelectorAll('#v-model-form table tbody tr td:nth-child(6) input');
        const orderQty = document.querySelectorAll('#v-model-form table tbody tr td:nth-child(9) input');
 
        orderQty.forEach((input, index) => {
            if (piecesInBox[index] && boxCount[index]) {
                const piecesInBoxValue = parseFloat(piecesInBox[index].value) || 0;
                const boxCountValue = parseFloat(boxCount[index].value) || 0;

                if (!isNaN(piecesInBoxValue) && piecesInBoxValue !== 0 && !isNaN(boxCountValue)) {
                    input.value = (boxCountValue * piecesInBoxValue).toFixed(2);
                } else {
                    input.value = '';
                }
            }
        });
    }

    form.addEventListener('input', function (e) {
        const target = e.target;
        if (target.closest('td:nth-child(5) input') || target.closest('td:nth-child(6) input')) {
            updateBoxCount();
        }
    });

    updateBoxCount();
});

The calculation works perfectly on the sales-order-form page, and it correctly multiplies the “piecesInBox” and “boxCount” fields to populate the “orderQty” field.

Here is how it look like in the form page

image
image1016×336 8.58 KB

However, when I submit the form to create a Sales Order, the posted data doesn’t reflect the updated “orderQty” values, as shown below.

image
image735×178 4.99 KB

Could someone review my code and tell me what I am doing wrong

2

I really dislike use of extensions for this. Extensions rely on DOM manipulation and DOM is subject to change without notice. There needs to be new type of custom field which would achieve the same without coding. I have something in mind already.

3 Likes
3

This is related to inventory and it is requested many times
Any possibility to have it as feature would be appreciated
To enable multiple units under inventory items