设置模型属性var从JavaScript函数内部Spring Boot Thymeleaf JS。

huangapple 未分类评论43阅读模式
英文:

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

&lt;div class=&quot;product_quantity clearfix&quot;&gt;
                            &lt;span&gt;Qty&lt;/span&gt;
                            &lt;input id=&quot;quantity_input&quot; type=&quot;text&quot; pattern=&quot;[0-9]*&quot; th:value=&quot;${quantity}&quot;&gt;
                            &lt;div class=&quot;quantity_buttons&quot;&gt;
                                &lt;div id=&quot;quantity_inc_button&quot; class=&quot;quantity_inc quantity_control&quot;&gt;&lt;i class=&quot;fa fa-chevron-up&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;&lt;/div&gt;
                                &lt;div id=&quot;quantity_dec_button&quot; class=&quot;quantity_dec quantity_control&quot;&gt;&lt;i class=&quot;fa fa-chevron-down&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;&lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;

This is the code of the javascript that increments the values

	function initQuantity()
{
	// Handle product quantity input
	if($(&#39;.product_quantity&#39;).length)
	{
		var input = $(&#39;#quantity_input&#39;);
		var incButton = $(&#39;#quantity_inc_button&#39;);
		var decButton = $(&#39;#quantity_dec_button&#39;);

		var originalVal;
		var endVal;

		incButton.on(&#39;click&#39;, function()
		{
			originalVal = input.val();

			endVal = parseFloat(originalVal) + 1;
			input.val(endVal);

		});

		decButton.on(&#39;click&#39;, function()
		{
			originalVal = input.val();


			if(originalVal &gt; 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.

huangapple
  • 本文由 发表于 2020年4月4日 04:29:57
  • 转载请务必保留本文链接:https://java.coder-hub.com/61019937.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定