title: How can I populate value at form inside modal using Bootstrap and thymeleaf?
body: <p>In my spring boot project I have a <code>html</code> page which contain list of students. In that page i have two option <code>Edit</code> and <code>Delete</code> for each student. I want to show value in modal for each student information when i click on <code>Edit</code>. But I am unable to do that. Another weird thing is every time I click on any <code>Edit</code>, the form populate only first member of list. Perhaps I will have to add some <code>JavaScript</code> code or something else. Here the screenshot of studentlist page <img src="https://i.stack.imgur.com/L7lEY.png" alt="![enter image description here">]<a href="https://i.stack.imgur.com/L7lEY.png" rel="nofollow noreferrer">1</a></p>
  
  <p>My <code>html</code> file is </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns:th="http://www.w3.org/1999/xhtml" xmlns:sf="http://www.w3.org/1999/xhtml" lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;Student List&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;script th:if="${existRoll != null}"&gt;
      $(function () {
          $('#myModal').modal('show');
      });
  &lt;/script&gt;
  
  &lt;body&gt;
  &lt;div class="container"&gt;
  
          &lt;h1 style="text-align:center;"&gt;Students List&lt;/h1&gt;
          &lt;table class="table table-striped"&gt;
              &lt;tr&gt;
                  &lt;th&gt;Id&lt;/th&gt;
                  &lt;th&gt;Roll&lt;/th&gt;
                  &lt;th&gt;First Name&lt;/th&gt;
                  &lt;th&gt;Last Name&lt;/th&gt;
                  &lt;th&gt;Age&lt;/th&gt;
                  &lt;th&gt;Setting&lt;/th&gt;
              &lt;/tr&gt;
  
              &lt;tr th:each="student : ${studentList}"&gt;
                  &lt;td th:text="${student.id}"&gt;&lt;/td&gt;
                  &lt;td th:text="${student.roll}"&gt;&lt;/td&gt;
                  &lt;td th:text="${student.firstName}"&gt;&lt;/td&gt;
                  &lt;td th:text="${student.lastName}"&gt;&lt;/td&gt;
                  &lt;td th:text="${student.age}"&gt;&lt;/td&gt;
                  &lt;td&gt;
                      &lt;button type="button"
                              class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal"&gt;Edit
                      &lt;/button&gt;
  
                      &lt;div class="modal fade" id="myModal" role="dialog"&gt;
                          &lt;div class="modal-dialog"&gt;
  
                              &lt;!-- Modal content--&gt;
                              &lt;div class="modal-content"&gt;
                                  &lt;div class="modal-header"&gt;
                                      &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
  
                                  &lt;/div&gt;
                                  &lt;div class="modal-body"&gt;
  
  
                                      &lt;!--Form code start from here  --&gt;
  
  
                                      &lt;!-- Form Name --&gt;
                                      &lt;legend&gt;Registration Form&lt;/legend&gt;
  
                                      &lt;form class="form-horizontal" action="#" th:action="@{/doRegistration}"
                                            method="post"&gt;
                                          &lt;fieldset&gt;
  
                                              &lt;div class="form-group"&gt;
                                                  &lt;label class="col-md-4 control-label" for="roll"&gt;Roll&lt;/label&gt;
                                                  &lt;div class="col-md-4"&gt;
  
                                                      &lt;input id="id" path="id" name="id" type="hidden"
                                                             placeholder="id" class="form-control input-md"
                                                             th:value="${student.id}"/&gt;
  
                                                      &lt;input id="roll" path="roll" name="roll" type="text"
                                                             placeholder="Roll" class="form-control input-md"
                                                             th:value="${student.roll}"/&gt;
  
                                                      &lt;span th:if="${existRoll !=null}" style="color:Red;"&gt; Already Exist !&lt;/span&gt;
                                                  &lt;/div&gt;
                                              &lt;/div&gt;
  
  
                                              &lt;!-- Text input--&gt;
                                              &lt;div class="form-group"&gt;
                                                  &lt;label class="col-md-4 control-label" for="firstName"&gt;First Name&lt;/label&gt;
                                                  &lt;div class="col-md-4"&gt;
                                                      &lt;input id="firstName" path="firstName" name="firstName"
                                                             type="text" placeholder="firstName"
                                                             class="form-control input-md" th:value="${student.firstName}"
                                                      /&gt;
                                                  &lt;/div&gt;
                                              &lt;/div&gt;
  
  
                                              &lt;!-- Text input--&gt;
                                              &lt;div class="form-group"&gt;
                                                  &lt;label class="col-md-4 control-label" for="lastName"&gt;Last Name
                                                  &lt;/label&gt;
                                                  &lt;div class="col-md-4"&gt;
                                                      &lt;input id="lastName" path="lastName" name="lastName"
                                                             type="text" placeholder="lastName"
                                                             class="form-control input-md"
                                                             th:value="${student.lastName}"/&gt;
                                                  &lt;/div&gt;
                                              &lt;/div&gt;
  
  
                                              &lt;!-- Text input--&gt;
                                              &lt;div class="form-group"&gt;
                                                  &lt;label class="col-md-4 control-label" for="age"&gt;Age
                                                  &lt;/label&gt;
                                                  &lt;div class="col-md-4"&gt;
                                                      &lt;input id="age" path="age" name="age"
                                                             type="text" placeholder="age" class="form-control input-md"
                                                             th:value="${student.age}"/&gt;
                                                  &lt;/div&gt;
                                              &lt;/div&gt;
  
  
                                              &lt;!-- Text input--&gt;
                                              &lt;div class="form-group"&gt;
                                                  &lt;label class="col-md-4 control-label" for="pass"&gt;Password&lt;/label&gt;
                                                  &lt;div class="col-md-4"&gt;
                                                      &lt;input id="pass" path="pass" name="pass"
                                                             type="password" placeholder="password"
                                                             class="form-control input-md"
                                                             th:value="${student.pass}"/&gt;
                                                  &lt;/div&gt;
                                              &lt;/div&gt;
  
                                              &lt;!-- Button --&gt;
                                              &lt;div class="form-group"&gt;
                                                  &lt;label class="col-md-4 control-label" for="register"&gt;&lt;/label&gt;
                                                  &lt;div class="col-md-4"&gt;
                                                      &lt;button id="register" name="register" class="btn btn-primary"&gt;
                                                          Register
                                                      &lt;/button&gt;
                                                  &lt;/div&gt;
                                              &lt;/div&gt;
  
                                          &lt;/fieldset&gt;
                                      &lt;/form&gt;
  
                                  &lt;/div&gt;
  
                                  &lt;div class="modal-footer"&gt;
                                      &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                                  &lt;/div&gt;
  
  
                              &lt;/div&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;
  
  
                      &lt;a th:href="@{/deleteStudent/(id=${student.id})}"
                         onclick="return confirm('Are you sure you want to delete this item?');"&gt;Delete&lt;/a&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
  
          &lt;/table&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And my entire <code>Controller</code> class is </p>
  
  <pre><code>package org.avijit.Controller;
  
  
  import org.avijit.Entity.Student;
  import org.avijit.Service.StudentService;
  import org.springframework.beans.factory.annotation.Autowired;
  import org.springframework.stereotype.Controller;
  import org.springframework.ui.Model;
  import org.springframework.validation.BindingResult;
  import org.springframework.web.bind.annotation.*;
  
  import javax.validation.Valid;
  import java.util.List;
  
  
  @Controller
  public class StudentController {
  
      @Autowired
      StudentService studentService;
  
      @RequestMapping(value = "/logForm", method = RequestMethod.GET)
      public String gotoHome() {
          return "Login";
      }
  
      @RequestMapping(value = "/loginCheck", method = RequestMethod.POST)
      public String checkLogin(@RequestParam String roll, @RequestParam String pass, Model model) {
          if (studentService.existsByRollAndPass(roll, pass)) {
              return "Welcome";
          } else {
              model.addAttribute("logError", "logError");
              return "Login";
          }
      }
  
  
      @RequestMapping(value = "/registration")
      public String registration(Model model) {
          model.addAttribute(new Student());
          return "Registration";
      }
  
      @RequestMapping(value = "/getStudents")
      public String getStudents(Model model) {
          List&lt;Student&gt; studentList = studentService.getStudents();
          model.addAttribute(studentList);
          return "StudentList";
      }
  
      @RequestMapping(value = "/deleteStudent", method = RequestMethod.GET)
      public String deleteStudent(@RequestParam(name = "id") int id) {
          studentService.deleteStudent(id);
          return "redirect:/getStudents";
      }
  
      @RequestMapping(value = "/editStudent/{id}", method = RequestMethod.GET)
      public String editStudent(@PathVariable("id") int id, Model model) {
          Student student = studentService.getStudent(id);
          model.addAttribute("student", student);
          return "StudentList";
      }
  
  
  
      @RequestMapping(value = "/demo")
      public String demoRegistration(Model model) {
          model.addAttribute(new Student());
          return "DemoRegistration";
      }
  
      @RequestMapping(value = "/doRegistration", method = RequestMethod.POST)
      public String doRegistration(@Valid @ModelAttribute("student") Student student, BindingResult result, Model model) {
          if (result.hasErrors()) {
              model.addAttribute("hasError", true);
              return "DemoRegistration";
          } else {
              if (student.getId() == null &amp;&amp; !studentService.rollExist(student.getRoll())) {
                  studentService.saveStudent(student);
                  return "Welcome";
              } else if (student.getId() == null &amp;&amp; studentService.rollExist(student.getRoll())) {
                  model.addAttribute("existRoll", "existRoll");
                  model.addAttribute("hasError", true);
                  return "DemoRegistration";
              } else {
                  Student student1 = studentService.getStudent(student.getId());
                  if (student1.getId() != null &amp;&amp; !student1.getRoll().equals(student.getRoll()) &amp;&amp; studentService.rollExist(student.getRoll())) {
                      model.addAttribute("hasError", "hasError");
                      model.addAttribute("existRoll", "existRoll");
                      return "redirect:/getStudents";
                  } else {
                      student1.setFirstName(student.getFirstName());
                      student1.setLastName(student.getLastName());
                      student1.setRoll(student.getRoll());
                      student1.setAge(student.getAge());
                      student1.setPass(student.getPass());
                      studentService.saveStudent(student1);
                      return "redirect:/getStudents";
                  }
              }
          }
      }
  
  }
  </code></pre>