英文:
Setting model attribute var from inside javascript function spring boot thymeleaf js
问题
我有一个使用 JavaScript 和 HTML 制作的数量增加器 HTML。我无法从 Thymeleaf HTML 页面中设置数量模型属性的值。
以下是 HTML 代码:
<div class="product_quantity clearfix">
<span>Qty</span>
<input id="quantity_input" type="text" pattern="[0-9]*" th:value="${quantity}">
<div class="quantity_buttons">
<div id="quantity_inc_button" class="quantity_inc quantity_control">
<i class="fa fa-chevron-up" aria-hidden="true"></i>
</div>
<div id="quantity_dec_button" class="quantity_dec quantity_control">
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
</div>
</div>
以下是递增值的 JavaScript 代码:
function initQuantity() {
// 处理产品数量输入
if ($('.product_quantity').length) {
var input = $('#quantity_input');
var incButton = $('#quantity_inc_button');
var decButton = $('#quantity_dec_button');
var originalVal;
var endVal;
incButton.on('click', function () {
originalVal = input.val();
endVal = parseFloat(originalVal) + 1;
input.val(endVal);
});
decButton.on('click', function () {
originalVal = input.val();
if (originalVal > 0) {
endVal = parseFloat(originalVal) - 1;
input.val(endVal);
}
});
}
}
模型属性通过${quantity}
访问,但随着值的递增,它不会改变。
英文:
I have a quantity incrementor html that was made with javascript and html. I can't set the value of the quantity model attribute from within the thymeleaf html page.
This is the code of the html
<div class="product_quantity clearfix">
<span>Qty</span>
<input id="quantity_input" type="text" pattern="[0-9]*" th:value="${quantity}">
<div class="quantity_buttons">
<div id="quantity_inc_button" class="quantity_inc quantity_control"><i class="fa fa-chevron-up" aria-hidden="true"></i></div>
<div id="quantity_dec_button" class="quantity_dec quantity_control"><i class="fa fa-chevron-down" aria-hidden="true"></i></div>
</div>
</div>
This is the code of the javascript that increments the values
function initQuantity()
{
// Handle product quantity input
if($('.product_quantity').length)
{
var input = $('#quantity_input');
var incButton = $('#quantity_inc_button');
var decButton = $('#quantity_dec_button');
var originalVal;
var endVal;
incButton.on('click', function()
{
originalVal = input.val();
endVal = parseFloat(originalVal) + 1;
input.val(endVal);
});
decButton.on('click', function()
{
originalVal = input.val();
if(originalVal > 0)
{
endVal = parseFloat(originalVal) - 1;
input.val(endVal);
}
});
}
}
The model attribute is accessed from ${quantity} but it doesn't change as the values are incremented.
专注分享java语言的经验与见解,让所有开发者获益!
评论