Styjun

I am creating a Spring Boot e-commerce website, and I have a span tag containing the total price so far in cart, and update with JavaScript behind the scenes:

<form method="POST" th:object="$chargeRequest">
 <span class="total">
 Total: <span class="total-price">$0</span>
 </span>
</form>

and I pass a model attribute model.addAttribute("chargeRequest", new ChargeRequest()); to this page, and ChargeRequest class is defined as:

public class ChargeRequest 
 private int amount;

 // constructor, setter/getter
 // ...

The question is: how can update amount in chargeRequest, and pass it back to the controller using Thymeleaf?

th:field is only valid for <input>, <select>, <textarea>, I cannot directly put it to <span> tag

I have tried to pass 2 attributes:

model.addAttribute("amount", new String("$0"));
model.addAttribute("chargeRequest", new ChargeRequest());

<span class="total">
 Total: <span class="total-price" th:text="$amount">$0</span>
 <input type="hidden" th:value="$amount, id="amount", name="amount">
</span>

But I don't know how to update $amount such that amount in chargeReqeust can be updated automatically?

Well unfortunately for you, you won't be able to do that with a simple controller. You will need a @ControllerAdvice that will serve as a global controller to be able to update the cart whenever someone adds a product into their cart or remove products from their cart.

In other word, you need a GLOBAL CONTROLLER. This global controller should check the SESSION attribute to allow you to change the amount of total cart and update it every time a change occurs. For example, check this out below.

@ControllerAdvice
public class GlobalCartController{
 @Autowired
 private HttpSession session;
 @ModelAttribute("cartModel")
 public CartModel getCartTotal()
 if(session.getAttribute("cart")==null)
 //Here you create cart attribute for the session 
 // then
 session.setAttribute("cartModel", cartObjectWithUpdatedTotal);
 
 return (CartObjectWithUpdatedTotal) session.getAttribute("cartModel");

Note that global controller will be always checked at every time at all routes and don't require a routing, this allows you to use the HttpSession autowired class which allows you to

identify a user across more than one-page request or visit a Web site and to store information about that user.

Cheers