Develop Reference

Creating ArrayList from thymelaf form input values

I have a form for adding products written in HTML and thymeleaf.
<form th:action="#{/products/get}" th:object="${form}" method="post">
<div id="fields">
<label for="name"></label><input type="text" id="name" name="name" autofocus="autofocus" placeholder="NAME" required/><br>
<label for="label"></label><input type="text" id="label" name="label" autofocus="autofocus" placeholder="LABEL" required/><br>
Below the form, there is a button that adds two input fields to the form every time it's pressed. New input fields are the same as those two input fields above. The idea is that the user can enter data for as many products as he wants using the same form. For example, after pressing the button once the form will look like that:
<form th:action="#{/products/get}" th:object="${form}" method="post">
<div id="fields">
<label for="name"></label><input type="text" id="name" name="name" autofocus="autofocus" placeholder="NAME" required/><br>
<label for="label"></label><input type="text" id="label" name="label" autofocus="autofocus" placeholder="LABEL" required/><br>
<label for="name"></label><input type="text" id="name" name="name" autofocus="autofocus" placeholder="NAME" required/><br>
<label for="label"></label><input type="text" id="label" name="label" autofocus="autofocus" placeholder="LABEL" required/><br>
The thing is I'd like to create ArrayList of class ProductForm using the values from input fields and then pass it to my controller using #ModelAttribute.
public class ProductForm{
private String name;
private String label;
//getters and setters
}
Then created a class that wraps ProductForm into ArrayList
public class ProductFormArray {
ArrayList<ProductForm> forms;
//getters and setters
}
And a Controller
#Controller
#RequestMapping(value = "/products")
public class CreateAccountControllerTemporary {
#RequestMapping(value = "/get", method = RequestMethod.POST)
public String createAccount(#ModelAttribute(name = "form")ProductFormArray form){
//some code
}}
My problem is that I can't figure out how to add objects to form ArrayList using values from input fields? Is that even possible? How should I change my HTML file?

It is certainly possible, I explain this on pages 361 to 389 in my book Taming Thymeleaf.
You can check out the sources of the book for free at https://github.com/wimdeblauwe/taming-thymeleaf-sources/tree/main/chapter16
It is hard to summarize 30 pages into a stackoverflow answer, but briefly, check out:
CreateTeamFormData.java: This is similar to your ProductFormArray class. I do use an array instead of an ArrayList.
public class CreateTeamFormData {
#NotBlank
#Size(max = 100)
private String name;
#NotNull
private UserId coachId;
#NotNull
#Size(min = 1)
#Valid
private TeamPlayerFormData[] players;
TeamPlayerFormData.java: This is similar to your ProductForm class.
public class TeamPlayerFormData {
#NotNull
private UserId playerId;
#NotNull
private PlayerPosition position;
TeamController.java: This the controller that uses the CreateTeamFormData.
#GetMapping("/create")
#Secured("ROLE_ADMIN")
public String createTeamForm(Model model) {
model.addAttribute("team", new CreateTeamFormData());
model.addAttribute("users", userService.getAllUsersNameAndId());
model.addAttribute("positions", PlayerPosition.values()); //<.>
return "teams/edit";
}
#PostMapping("/create")
#Secured("ROLE_ADMIN")
public String doCreateTeam(#Valid #ModelAttribute("team") CreateTeamFormData formData,
BindingResult bindingResult, Model model) {
if (bindingResult.hasErrors()) {
model.addAttribute("editMode", EditMode.CREATE);
model.addAttribute("users", userService.getAllUsersNameAndId());
model.addAttribute("positions", PlayerPosition.values());
return "teams/edit";
}
service.createTeam(formData.toParameters());
return "redirect:/teams";
}
edit.html -> This is the Thymeleaf template. Note that I am using a Thymeleaf fragment edit-teamplayer-fragment for the part of the form that repeats itself (So the name and label fields in your case)
<h3>Players</h3>
<div class="col-span-6 ml-4">
<div id="teamplayer-forms"
th:data-teamplayers-count="${team.players.length}"> <!--.-->
<th:block th:each="player, iter : ${team.players}">
<div th:replace="teams/edit-teamplayer-fragment :: teamplayer-form(index=${iter.index}, teamObjectName='team')"></div>
<!--.-->
</th:block>
</div>
<div class="mt-4">
<a href="#"
class="py-2 px-4 border border-gray-300 rounded-md text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800"
id="add-extra-teamplayer-form-button"
th:text="#{team.player.add.extra}"
#click="addExtraTeamPlayerForm()"
></a> <!--.-->
</div>
</div>
edit-teamplayer-fragment.html: Here is the important part where you need to keep track of the index for each fragment:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
lang="en">
<!-- tag::main[] -->
<div th:fragment="teamplayer-form"
class="col-span-6 flex items-stretch"
th:id="${'teamplayer-form-section-' + __${index}__}"
th:object="${__${teamObjectName}__}"> <!--.-->
<!-- end::main[] -->
<div class="grid grid-cols-1 row-gap-6 col-gap-4 sm:grid-cols-6">
<div class="sm:col-span-2">
<div class="mt-1 rounded-md shadow-sm">
<select class="form-select block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5"
th:field="*{players[__${index}__].playerId}">
<option th:each="user : ${users}"
th:text="${user.userName.fullName}"
th:value="${user.id.asString()}">
</select>
</div>
</div>
<div class="sm:col-span-2">
<div class="mt-1 rounded-md shadow-sm">
<select class="form-select block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5"
th:field="*{players[__${index}__].position}">
<option th:each="position : ${positions}"
th:text="#{'PlayerPosition.' + ${position}}"
th:value="${position}">
</select>
</div>
</div>
<!-- tag::delete[] -->
<div class="ml-1 sm:col-span-2 flex items-center text-green-600 hover:text-green-900">
<div class="h-6 w-6">
<svg th:replace="trash"></svg>
</div>
<a href="#"
class="ml-1"
th:text="#{team.player.remove}"
x-data
th:attr="data-formindex=__${index}__"
#click="removeTeamPlayerForm($el.dataset.formindex)"> <!--.-->
</a>
</div>
<!-- end::delete[] -->
</div>
</div>
</html>

How do I access values from forms on different JSP pages in the same controller in Spring MVC?

I am trying to make a Book Management project where I have three buttons on the home.jsp page. Each button redirects to a separate page and each of these pages has a form. I have one Controller class that has three methods to handle each form submissions from each of these pages but when I try to use #ModelAttribute in the JSP page for any form, I am unable to get the value that I add to the Model.
Here is the home.jsp:
<body>
<div class="container">
<div>
<h1>Spring Boot Web JSP Example</h1>
<h2>Name: ${book.name}</h2>
<h2>Author: ${book.author}</h2>
<h2>ISBN: ${book.isbn}</h2>
</div>
</div>
<form:form method="POST" action="/get" modelAttribute="newBook">
<div class="form-group">
<label for="authorInput">Author</label>
<form:input path="author" cssClass="form-control" id="authorInput"></form:input>
</div>
<div class="form-group">
<label for="dateInput">Date</label>
<form:input path="date" cssClass="form-control" id="dateInput"></form:input>
</div>
<button type="submit" class="btn btn-primary">Get Book</button>
</form:form>
<button type="submit" class="btn btn-primary">Add Book</button>
<button type="submit" class="btn btn-primary">Update Book</button>
</body>
Here is the controller class:
#Controller
public class MainController {
#GetMapping(value = "/")
public String welcome(Map<String, Object> model) {
model.put("newBook", new Book());
model.put("updateBook", new Book());
model.put("addBook",new Book());
return "home";
}
#PostMapping(value = "/get")
public String change(#RequestParam("author") String author, Model model,
#ModelAttribute("newBook")Book book) {
System.out.println(author);
Book b = BookDao.getBook(book.getAuthor(), book.getDate());
if(b == null){
return "home";
}
model.addAttribute("book", b);
model.addAttribute("newBook", new Book());
return "home";
}
#RequestMapping(value = "/add")
public String addBook(#RequestParam("author") String author, #RequestParam("isbn") int isbn, Model model,
#ModelAttribute("addBook") Book book){
System.out.println("Author: "+author + " ISBN: "+isbn);
model.addAttribute("addBook", new Book());
Book b= new Book(book.getName(), author,isbn, book.getDate());
model.addAttribute("add", book);
boolean result = BookDao.addBook(b);
if(result)
return "home";
else
return "error";
}
#RequestMapping( value = "/update")
public String updateBook(#RequestParam("author") String author, #RequestParam("isbn") int isbn, Model model,
#ModelAttribute("updateBook") Book book){
System.out.println("Author: "+author + " ISBN: "+isbn);
Book b= new Book(book.getName(), author,isbn, book.getDate());
model.addAttribute("updateBook", new Book());
model.addAttribute("update",b);
BookDao.updateBook(isbn, b);
return "home";
}
}
And here are the other two jsp pages:
Add.jsp:
<body>
<h1>Add a Book</h1>
<form:form method="POST" action="/add" modelAttribute="addBook">
<div class="form-group">
<label for="nameInput">Name</label>
<form:input path="name" cssClass="form-control" id="nameInput"></form:input>
</div>
<div class="form-group">
<label for="authorInput">Author</label>
<form:input path="author" cssClass="form-control" id="authorInput"></form:input>
</div>
<div class="form-group">
<label for="isbnInput">ISBN</label>
<form:input path="isbn" cssClass="form-control" id="isbnInput"></form:input>
</div>
<div class="form-group">
<label for="dateInput">Date</label>
<form:input path="date" cssClass="form-control" id="dateInput"></form:input>
</div>
<button type="submit" class="btn btn-primary">Add</button>
</form:form>
</body>
Update Book JSP Page:
<body>
<form:form method="POST" action="/update" modelAttribute="third">
<div class="form-group">
<label for="authorInput">ISBN</label>
<form:input path="isbn" cssClass="form-control" id="authorInput"></form:input>
</div>
<div class="form-group">
<label for="nameInput">Name</label>
<form:input path="name" cssClass="form-control" id="nameInput"></form:input>
</div>
<div class="form-group">
<label for="authorInput">Author</label>
<form:input path="author" cssClass="form-control" id="authorInput"></form:input>
</div>
<div class="form-group">
<label for="dateInput">Date</label>
<form:input path="date" cssClass="form-control" id="dateInput"></form:input>
</div>
<button type="submit" class="btn btn-primary">Update Book</button>
</form:form>
</body>
The problem is that the lines modelAttribute="addBook" and modelAttribute="third" in the add.jsp page and update.jsp page throw an error. The IDE says "Cannot resolve symbol 'addBook/third'". Those values are available in the home.jsp page though.

Since I found the answer, I will post it just in case somebody else gets stuck with it.
In order to access the forms on another JSP page, we can't just directly redirect to the page in an MVC design.
In order to do so, we need to create a #GetMapping annotation method for each of those JSP forms #PostMapping annotations and then redirect to the #GetMapping methods first and the #GetMapping will redirect to the JSP page. This is how it should be done:
Controller Class:
#Controller
public class MainController {
#GetMapping(value = "/")
public String welcome(Map<String, Object> model) {
model.put("newBook", new Book());
return "home";
}
#PostMapping(value = "/get")
public String change(#RequestParam("author") String author, Model model,
#ModelAttribute("newBook")Book book) {
System.out.println(author);
Book b = BookDao.getBook(book.getAuthor(), book.getDate());
if(b == null){
return "home";
}
model.addAttribute("book", b);
model.addAttribute("newBook", new Book());
return "home";
}
#GetMapping("/add")
public String show(Model model) {
model.addAttribute("addBook", new Book());
return "add";
}
#PostMapping(value = "/add")
public String addBook(#RequestParam("author") String author, #RequestParam("isbn") int isbn, Model model,
#ModelAttribute("addBook") Book book){
System.out.println("Author: "+author + " ISBN: "+isbn);
model.addAttribute("addBook", new Book());
Book b= new Book(book.getName(), author,isbn, book.getDate());
model.addAttribute("add", book);
boolean result = BookDao.addBook(b);
if(result)
return "home";
else
return "error";
}
#GetMapping("/update")
public String showUpdate(Model model) {
model.addAttribute("updateBook", new Book());
return "update";
}
#PostMapping( value = "/update")
public String updateBook(#RequestParam("author") String author, #RequestParam("isbn") int isbn, Model model,
#ModelAttribute("updateBook") Book book){
System.out.println("Author: "+author + " ISBN: "+isbn);
Book b= new Book(book.getName(), author,isbn, book.getDate());
model.addAttribute("updateBook", new Book());
model.addAttribute("update",b);
BookDao.updateBook(isbn, b);
return "home";
}
And the JSP page for Home.jsp page should be as follows:
<form:form method="POST" action="/get" modelAttribute="newBook">
<div class="form-group">
<label for="authorInput">Author</label>
<form:input path="author" cssClass="form-control" id="authorInput"></form:input>
</div>
<div class="form-group">
<label for="dateInput">Date</label>
<form:input path="date" cssClass="form-control" id="dateInput"></form:input>
</div>
<button type="submit" class="btn btn-primary">Get Book</button>
</form:form>
<button type="submit" class="btn btn-primary">Add Book</button>
<button type="submit" class="btn btn-primary">Update Book</button>
</body>
So the href maps to the #GetMapping method to get the ModelAttributes. The other JSP pages are fine as it is.
Also, another good practice I might suggest is to Use a Service layer/package to perform all the operations. So instead of performing it in the Controller, we delegate tasks like the CRUD operations to the Service layer which in turn interacts with the DAO layer.

Update operation is not performing -Resolved [org.springframework.web.HttpRequestMethodNotSupportedException: Request method 'POST' not supported]

I'm trying to develop an application in spring boot + thymeleaf, and I'm able to retrieve the logged in user details in the profile tab from the MySQL database, but when I try to change one or two field details (update) and hit the update button it is showing me an error message - Fri Sep 04 20:39:47 IST 2020
There was an unexpected error (type=Method Not Allowed, status=405).
Request method 'POST' not supported
see my controller code (I'm using #RestController annotated on top of the class)-
#RequestMapping(value = "/profile", method = RequestMethod.PUT)
public ModelAndView updateProfile(#ModelAttribute Customer customer, HttpSession session) {
ModelAndView model = new ModelAndView();
Customer exist = cRepo.findByCustEmail(customer.getCustEmail());
if(exist != null) {
if(exist.getCustEmail().equals(session.getAttribute("emailsession"))) {
cRepo.save(customer);
model.addObject("msg", "User Details has been successfully updated!!");
model.setViewName("profile");
}
}else {
model.addObject("exist", "Please enter correct email address!");
String email = (String) session.getAttribute("emailsession");
Customer cust = cRepo.findByCustEmail(email);
model.addObject("customer", cust);
model.setViewName("profile");
}
return model;
}
Thymleaf code (html) -
<div align="center" class="alert alert-success" th:if="${msg}" th:utext="${msg}"></div>
<div align="center" class="alert alert-danger" th:if="${exist}" th:utext="${exist}"></div>
<!-- Modal HTML -->
<div id="myModal">
<div class="modal-dialog modal-login">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Profile Details</h4>
</div>
<div class="modal-body">
<form name="myForm" th:action="#{/profile}" th:object="${customer}" method="post">
<div class="form-group">
<i class="fa fa-id-card"></i>
<input name="id" type="text" class="form-control" placeholder="Enter Id" th:field="${customer.custId}" disabled="true" required="required" />
</div>
<div class="form-group">
<i class="fa fa-user"></i>
<input name="name" type="text" class="form-control" placeholder="Enter Name" th:field="${customer.custName}" required="required" />
</div>
<div class="form-group">
<i class="fa fa-envelope"></i>
<input name="email" type="email" class="form-control" placeholder="Enter Email" th:field="${customer.custEmail}" required="required" />
</div>
<div class="form-group">
<i class="fa fa-lock"></i>
<input name="password" type="text" class="form-control" placeholder="Enter Password" th:field="${customer.custPassword}" required="required" />
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary btn-block btn-lg" value="Update" />
</div>
</form>
</div>
</div>
</div>
</div>
I want when user login and visit he/she should be able to check his/her profile(which I'm able to do working code) and when the user wants to update few fields(1-2 based on choice) and hit update he/she should be able to update the details (not create new user or record) because when I use #Controller on top of class then this code work and create new user instead update.

Your controller is annotated with #RequestMapping(value = "/profile", method = RequestMethod.PUT) which makes it a PUT endpoint. However, your request is clearly a POST. If we look at your html form it contains method="post". HTML forms only support GET and POST as valid methods so you need to update your endpoint to be a POST endpoint.
tldr;
RequestMapping(value = "/profile", method = RequestMethod.PUT)
to
RequestMapping(value = "/profile", method = RequestMethod.POST)

You request mapping in is POST but Controller has set to accept request as PUT.
<form name="myForm" th:action="#{/profile}" th:object="${customer}" **method="post"**>
#RequestMapping(value = "/profile", method = **RequestMethod.PUT**)
Just keep these in similar way both should be same.

Please check what I find and resolve this.
#RequestMapping(value = "/profile" ,method = RequestMethod.POST)
public ModelAndView updateProfile(#ModelAttribute Customer customer, HttpSession session) {
ModelAndView model = new ModelAndView();
Customer exist = cRepo.findByCustEmail(customer.getCustEmail());
if(exist != null) {
if(exist.getCustEmail().equals(session.getAttribute("emailsession"))) {
**exist.setCustId(exist.getCustId());
exist.setCustName(customer.getCustName());
exist.setCustEmail(customer.getCustEmail());
exist.setCustPassword(customer.getCustPassword());**
cRepo.save(exist);
model.addObject("msg", "User Details has been successfully updated!!");
model.addObject("customer", exist);
model.setViewName("profile");
}
}else {
model.addObject("exist", "Please enter correct email address!");
String email = (String) session.getAttribute("emailsession");
Customer cust = cRepo.findByCustEmail(email);
model.addObject("customer", cust);
model.setViewName("profile");
}
return model;
}

Pass data between different html pages and controllers in spring

Hi I'm new with Spring and I'm having problems in passing data between two pages using two different controllers.
I would like to know how I can handle this situations.
In my index.html I have a button that should redirect me to a new page passing some data. When i click the button it redirects me to the step2 page but I don't have to objects. How can I solve this? Is the GET method correct? Do I have to use the form just for passing some data between pages and controllers?
Below is what I have.
Index.html
<form th:action="#{/step2}" method="GET">
<input type="hidden" th:value="${mapSelectedServices}" name="mapSelectedServices"/>
<input type="hidden" th:value="${user}" name="loggedUser"/>
<div class="form-group d-flex align-items-center justify-content-between">
<button type="submit" class="btn btn-danger btn-rounded ml-auto" >SEE PRICES
<i class="fas fa-long-arrow-alt-right ml-2"></i>
</button>
</div>
</form>
Step2Controller
#RequestMapping(value="step2", method = RequestMethod.GET)
public ModelAndView step2(ModelAndView modelAndView, #ModelAttribute("user") User user,
#ModelAttribute("mapSelectedServices") HashMap<String,List<ServiceOffered>> mapSelectedServices,
BindingResult bindingResult){
modelAndView.addObject("user", user);
modelAndView.addObject("mapSelectedServices", mapSelectedServices);
modelAndView.setViewName("step2");
return modelAndView;
}
Sorry for all the questions, but I'm new to spring development.

HTML page:
<form th:action="#{/step2}" method="POST">
<input type="hidden" th:value="${mapSelectedServices}" name="mapSelectedServices"/>
<input type="hidden" th:value="${user}" name="loggedUser"/>
<div class="form-group d-flex align-items-center justify-content-between">
<button type="submit" class="btn btn-danger btn-rounded ml-auto" >SEE PRICES
<i class="fas fa-long-arrow-alt-right ml-2"></i>
</button>
</div>
</form>
Controller method:
public ModelAndView goToPgae2(#ModelAttribute ModelClass aClass)
{
ModelAndView mv=new ModelAndView("SecondHtlmPageName");//setting view name here
mv.addAttribute("aClass",aClass);
return mv;
}
Model Class with the specific variables passed from one page to another:
class ModelClass {
public Stirng mapSelectedServices; //use appropriate data type.
public String loggedUser;
//create getters and setters
}
Second page
<div>${aClass.loggedUser}</div>
DONE.
This way you can go to second page . And if you want to redirect to second page and the model attributes should be available there then you need to use flashattribute.

ModelAttribute adds only 1st value into List

On my view, I generate input "username", select with attribute multiple=multiple, which has name "rolesss".
My issue is, that if I send such form via post, my controller should convert roles to list, but i get only list containing single element.
For example:
I send post, with values:
username:MyUser
_csrf:aef50238-92cf-48df-86a4-cb6e2b8f62c9
rolesss:USER
rolesss:ADMIN
In debug mode in my controller I see values:
roless: "USER"
username: "MyUser"
"ADMIN" did just disappear.
My controller looks like:
#Controller
#RequestMapping("/user-management")
public class UserManagementController {
#RequestMapping("")
public ModelAndView home() {
ModelAndView modelAndView = new ModelAndView();
modelAndView.setViewName("pages/user-management");
return modelAndView;
}
#RequestMapping(value = "", method = RequestMethod.POST)
public ModelAndView changeRoles(#ModelAttribute("username") String username,#ModelAttribute("rolesss") List<String> rolesss) {
return null;
}
}
My view I merged 2 thymeleaf fragments into 1, in my code #user-roles-form is in separate fragment, but I think that it should not change anything:
<th:block layout:fragment="main-content">
<section>
<h2 class="section-title no-margin-top">Role Management</h2>
<div class="form-group">
<div class="panel panel-primary">
<div class="panel-heading">Změna rolí uživatele</div>
<div class="panel-body">
<form class="form-horizontal" role="form" action="/user-management" method="post">
<div class="form-group">
<label for="user-name" class="col-sm-2 control-label">Uživatel</label>
<div class="col-sm-10">
<input id="user-name" class="autocomplete form-control" type="text"
placeholder="Jméno uživatele" name="username"/>
</div>
<input type="hidden"
th:name="${_csrf.parameterName}"
th:value="${_csrf.token}"/>
</div>
<div id="user-roles-form" th:fragment="roles(roles)" xmlns:th="http://www.thymeleaf.org">
<div class="form-group">
<label for="user-roles" class="col-sm-2 control-label">Uživatelovy role</label>
<div class="col-sm-10">
<select multiple="multiple" class="form-control" id="user-roles" name="rolesss">
<th:block th:each="role : ${roles}">
<option th:value="${role.userRole.role}" th:text="${role.userRole.role}" th:selected="${role.selected}"></option>
</th:block>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-ar btn-primary">Uložit</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
</th:block>

try using like below in your controller
in your HTML or JSP
<form modelAttribute="your_model_name"></form>
if you are using model attribute then use #ModelAttribute
otherwise, use #RequestParam("username")
In your case
#RequestMapping(value = "", method = RequestMethod.POST)
public ModelAndView changeRoles(#RequestParam("username") String username,#RequestParam("rolesss") List<String> rolesss) {
..........
.........
return null;
}