Вход |Получить новое значение, установленное функцией JavaScript, в публичную функцию Controller

Question

Я создал CRUD для редактирования существующих строк таблицы.

Один из его входных данных уже содержит значение = "19.00", сохраненное при создании строки:

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

Я заменяю значение в моем CRUD функцией javascript, когда пользователь изменяет значение списка выбора, например, если одно из свойств продукта изменяется и влияет на цену:

$('#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'); }
...

В этом случае пользователь видит новое значение (цену) на входе,

значение, которое я не вижу при проверке структуры элемента:

<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>

Если я смотрю на элемент с помощью инспектора, я вижу, что значение ввода все еще равно

value="19.00"

Мне нужно получить новое значение, установленное моей функцией JavaScript в моем контроллере, чтобы иметь возможность соответствующим образом обновить столбец строки моей таблицы с помощью публичной функции контроллера.

В первый раз, когда я сталкиваюсь с такой проблемой, я понятия не имею, как ее решить. Был бы признателен за ваш опыт. Спасибо, Марк

Answer 1

РЕШЕНИЕ AJAX CALL IN JS SCRIPT:

...
else if (d1 == 4 && d2 == 27 && d3 == '' && pl1 == 2 && pl2 == 2) { $('#productprice').val('59.00'); }
else if (d1 == 4 && d2 == 27 && d3 == '' && pl1 == 3 && pl2 == 3) { $('#productprice').val('69.00'); }
else if (d1 == 4 && d2 == 27 && d3 == '' && pl1 == 4 && pl2 == 4) { $('#productprice').val('79.00'); }
else if (d1 == 4 && d2 == 27 && d3 == '' && pl1 == 4 && pl2 == 5) { $('#productprice').val('89.00'); }

var rowID = rowid;
var orderID = $('#orderID').val();
var productprice_new = $('#productprice').val();
console.log(productprice_new,rowID,orderID);

$.ajax({
type: 'post',
url: '/assets/ajax/ajaxupdate.php',
data:  {
        'rowid' : rowid,
        'orderID' : orderID,
        'productprice_new' : productprice_new,
        },
            success: function (data) {
                console.log('worked!');
            },
            error: function (data) {
                console.log('Error:', data);
            }
})

Answer 2

Если у вас есть значение по умолчанию для поля input, его изменение с помощью val() не повлияет на него.

Вам нужно использовать attr(), поэтому вместо строк вроде:

$('#ordersdetailproductprice').val('0.00');

Использование:

$('#ordersdetailproductprice').attr('value', '0.00');

И тогда вы можете легко получить входное значение для отправки на ваш контроллер (через AJAX, я считаю) как:

let value = $('#ordersdetailproductprice').val();

Надеюсь, это поможет вам