Input | Get the new value set by a JavaScript function into a Controller public function

I have created a CRUD to edit existing table rows.

One of its input contain already a value="19.00" saved at the creation of the row :

<input type="number" step="1" title="Prix" class="form-control" name="productprice" id="productprice" value="19.00">

I'm overriding the value in my CRUD with a javascript function when the value of a select list is changed by the user, for example if one of the product property is changed and impact the price :

$('#form').on('change', function() {

var d1 = document.getElementById('ordersdetailproducttype_ID').value; // producttypeID
// console.log('producttype ID:', d1);
var d2 = document.getElementById('ordersdetailproductname').value; // productnameID
// console.log('product ID:', d2);
    var d3 = document.getElementById('ordersdetaildessertservingID').value; // dessertservingID
// console.log('Servings:', d3);
var pl1 = document.getElementById('ordersdetailID_portion').value; // partyloafportionID
// console.log('pl1:', pl1);
var pl2 = document.getElementById('ordersdetailpartyloafweightID').value; // partyloafweightID
// console.log('pl2:', pl2);

if (d1 == '' && d2 == '' && d3 == '' && pl1 == '' && pl2 == '') { $('#ordersdetailproductprice').val('0.00'); }
else if (d1 == 1 && d2 == 1 && d3 == 1 && pl1 == '' && pl2 == '') { $('#ordersdetailproductprice').val('19.00'); }
else if (d1 == 1 && d2 == 1 && d3 == 2 && pl1 == '' && pl2 == '') { $('#ordersdetailproductprice').val('24.00'); }
...

In this case the user sees the new value (price) into the input, value which I don't see by inspecting the element structure :

<div class="form-group header-group-0 " id="form-group-productprice" style="display: block;">
<label class="control-label col-sm-2">Prix
        </label>

<div class="col-sm-10">
    <input type="number" step="1" title="Prix" class="form-control" name="productprice" id="productprice" value="19.00">
    <div class="text-danger"></div>
    <p class="help-block"></p>
</div>

If I look at the element with the inspector, I can see that the value of the input is still

value="19.00"

I need to retrieve the new value set by my JavaScript function in my controller in order to be able to update accordingly my table row column with a controller public function.

First time I'm confronted with this kind of issue, I have no clue how to solve this. Would appreciate your expertise. Thanks, Marc

via Chebli Mohamed