Thymeleaf的拿取其他input框中的value值

    <div class="num_name fl">数 量：</div>
<div class="num_add fl">
    <input id="quantity" name="quantity" type="text" class="num_show fl" th:value="1">
    <a type="button"  class="add fr" onclick="valueAdd()">+</a>
    <a type="button"  class="minus fr" onclick="valueSub()">-</a>
</div>

总价：16.80元

在Thymeleaf中我要如何砸“总价”里的th：text中拿到数量的value值相乘，最后得到总价

【以下回答由 GPT 生成】

在Thymeleaf中获取其他输入框中的值进行计算可以通过添加JavaScript代码来实现。首先，我们需要为数量输入框添加一个唯一的id属性，以便在JavaScript中可以通过id获取这个输入框的值。然后，我们可以通过JavaScript中的getElementById()方法获取输入框的值，并进行计算。最后，将计算结果赋给总价元素的innerHTML属性即可。

以下是实现这个功能的示例代码：

<div class="num_name fl">数量：</div>
<div class="num_add fl">
    <input id="quantity" name="quantity" type="text" class="num_show fl" th:value="1">
    <a type="button" class="add fr" onclick="valueAdd()">+</a>
    <a type="button" class="minus fr" onclick="valueSub()">-</a>
</div>
<div class="total">总价：<em id="totalPrice" name="totalPrice">16.80元</em></div>

<p>在Thymeleaf中，我要如何通过获取数量输入框的值，进行计算并得到总价的值？</p>

<script>
    function valueAdd() {
        var quantity = parseInt(document.getElementById("quantity").value);
        quantity++;
        document.getElementById("quantity").value = quantity;
        calculateTotalPrice();
    }

    function valueSub() {
        var quantity = parseInt(document.getElementById("quantity").value);
        if (quantity > 1) {
            quantity--;
            document.getElementById("quantity").value = quantity;
            calculateTotalPrice();
        }
    }

    function calculateTotalPrice() {
        var quantity = parseInt(document.getElementById("quantity").value);
        var unitPrice = 10.80;  // 这里假设单价是10.80元
        var totalPrice = quantity * unitPrice;
        document.getElementById("totalPrice").innerHTML = totalPrice.toFixed(2) + "元";
    }
</script>

在上述代码中，valueAdd()函数负责增加数量输入框的值并调用calculateTotalPrice()函数进行计算，而valueSub()函数则负责减少数量输入框的值并调用calculateTotalPrice()函数进行计算。calculateTotalPrice()函数根据数量输入框的值和假设的单价进行计算，并将结果赋给总价元素的innerHTML属性。值得注意的是，由于Thymeleaf是在服务器端渲染的，所以在浏览器中执行JavaScript代码时，无法直接使用Thymeleaf的表达式语法，需要在服务器端使用Thymeleaf来渲染页面后，再在浏览器中执行JavaScript代码。

【相关推荐】

建议你看下这篇博客👉 ：thymeleaf 实现 input输入框有默认值
除此之外, 这篇博客: 关于Thymeleaf在form表单中使用th:value失效（无值）问题中的 出现问题 部分也许能够解决你的问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

引用皆我百晓生小程序回复内容作答：
可以通过Thymeleaf的表达式语法来获取其他input框中的value值，并进行运算得到总价。在Thymeleaf中，可以使用${}语法来引用变量。

首先，给总价的th:text属性绑定一个变量，如下所示：

总价：<span th:text="${totalPrice}"></span>元

然后，你可以在控制器中通过Model将数量的value值传递给Thymeleaf模板：

@GetMapping("/")
public String index(Model model) {
    model.addAttribute("quantity", 1);
    return "index";
}

接下来，在控制器中获取数量的值，并进行计算得到总价：

@PostMapping("/calculateTotalPrice")
public String calculateTotalPrice(@RequestParam("quantity") int quantity, Model model) {
    double totalPrice = quantity * 16.80;
    model.addAttribute("totalPrice", totalPrice);
    return "index";
}

最后，你需要在JavaScript函数中调用后端的接口，获取数量的值，并将结果更新到界面上：

function valueAdd() {
    // 获取数量的值
    var quantity = document.getElementById("quantity").value;
    
    // 向后端接口发送POST请求
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/calculateTotalPrice", true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            // 更新总价
            var response = JSON.parse(xhr.responseText);
            document.getElementById("totalPrice").textContent = response.totalPrice;
        }
    };
    xhr.send("quantity=" + quantity);
}

function valueSub() {
    // 获取数量的值
    var quantity = document.getElementById("quantity").value;
    
    // 向后端接口发送POST请求
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/calculateTotalPrice", true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            // 更新总价
            var response = JSON.parse(xhr.responseText);
            document.getElementById("totalPrice").textContent = response.totalPrice;
        }
    };
    xhr.send("quantity=" + quantity);
}

以上代码的逻辑是，在JavaScript函数中获取数量的值，并通过POST请求将数量的值发送到后端接口。后端接口对数量进行计算得到总价，并将总价作为响应的数据返回到前端。前端在接收到响应后，再将总价更新到界面上。

请注意，在JavaScript函数中需要将数量的值通过POST请求发送到后端接口，你可以根据自己的需求来修改后端接口的路径和POST请求的参数。