Passing thymeleaf information to a hidden form

Question

I am trying to pass the information from a thymeleaf list and trying to add it to database. I am getting data from the tmdb and it will be changing so i display the information obtain to the endpoint "/LatestMovies" this information is not saved in the db and ether should it be. so i am trying to add a save button for the custumer to add the movie listed.(its simple it just haves movieid and moviename) Showing the movies listed i have no problem and it works fine but where i get error is when i add a hidden form. The current code i have is this:

<div class="container">   
<table class="table table-hover">
    <tr>
        <th>Id</th>
        <th>Name</th>
    </tr>
    <tr th:each="LatestMovies : ${latestMovies}">
        <td th:text="${LatestMovies.id}"></td>
        <td th:text="${LatestMovies.movieName}"></td>
        <td>
         <form action="#" th:action="@{/LatestMovies}" th:object="${addMovies}" method="post">
    <p><input type="hidden" th:field="*{id}" th:attr="value = ${LatestMovies.id}" /></p>
    <p><input type="hidden" th:field="*{movieName}" th:attr="value = ${LatestMovies.movieName}" /></p>
    <p><input type="submit" value="Submit" /></p>
</form>
</td>

    </tr>
</table>

@Controller
public class LatestMoviesController {

@Autowired
private LatestMoviesDao listOfMovies;

@Autowired
private savedMoviesDao movieRepo;


@GetMapping("/LatestMovies")
public String prueba(Model model) {

    TmdbMovies movies = new TmdbApi("22914f477aaa3e7f86c6f5434df8d1eb").getMovies();
    ResultsPage<MovieDb> movie = movies.getPopularMovies("en", 1);

    for(int i=0; i <= 19; i++){
        int movieId = movie.getResults().get(i).getId();
        String movieName = movie.getResults().get(i).toString();
        listOfMovies.save(new LatestMovies(movieId, movieName));
        }

    model.addAttribute("latestMovies", listOfMovies.findAll());


    return "index";

}

 @PostMapping("/LatestMovies")
    public String save(@ModelAttribute("addMovies") Model model, SavedMovies addMovies) {

     movieRepo.save(addMovies);

        return "index";
    }


}

Thx in advance

Answer 1

First, let's change your form. You don't need to add a new object to it, since you are already iterating through a list of them. That way, you will also avoid having to add the value for each field manually using th:attr . What we are gonna do, is send the required params separately and then build our movie object with them.

<div class="container">   
    <table class="table table-hover">
       <tr>
          <th>Id</th>
          <th>Name</th>
       </tr>
       <tr th:each="LatestMovies : ${latestMovies}">
          <td th:text="${LatestMovies.id}"></td>
          <td th:text="${LatestMovies.movieName}"></td>
          <td>
              <form th:action="@{/LatestMovies}" method="post">
                  <p><input type="hidden" th:value="${LatestMovies.id}" name="id"/></p>
                  <p><input type="hidden" th:value="${LatestMovies.movieName}" name="name"/></p>
                  <p><input type="submit" value="Submit"/></p>
              </form>
          </td>
       </tr>
    </table>
</div>

Now, on your controller, do the following modifications.

@PostMapping("/LatestMovies")
public String save(@RequestParam("id") Integer id, @RequesParam("name") String name) {
    SavedMovies movie = new SavedMovies();
    movie.setId(id);
    movie.setName(name);
    movieRepo.save(movie);
    return "index";
}

These changes should do the trick.