title: How to edit users on one page using Thymeleaf and Spring boot (with JS)
body: <p>I'm new in Spring Boot and Java Script. My problem is that I'm trying to create a table using Spring Boot and JS where you can add users, edit them and delete (simple task), but want to do it on one page. So, actually, that's task for JS and HTML. Succesfully added users I cannot edit them, cause in Spring Boot you need to create another form (which means another page), so I decided to use JS. But I don't know why my script doesn't work (probably the problem is type of text).</p>
  <p>I've tried a lot of ways to fix it, such as: using PutMapping, creating main.js with simple code, searching answers in the Internet (of course), but still couldn't find. So if you can just take a look to my Code and see what's the problem, I would be very grateful!</p>
  <p>For now, I can add users with @RequestMapping in Spring Boot, delete them with Spring Boot as well and trying to Edit them with JS (maybe, but I think it's better to use Spring Boot, I don't know how).
  And also I want change value of button &quot;Edit&quot; to &quot;Save&quot; while editting user, using JS.</p>
  <p>Thank you very much!</p>
  <p>Here is my controller and HTML.</p>
  <p>Controller:</p>
  <pre><code>import org.springframework.http.ResponseEntity;
  import org.springframework.stereotype.Controller;
  import org.springframework.ui.Model;
  import org.springframework.validation.BindingResult;
  import org.springframework.web.bind.annotation.*;
  
  import model.User;
  import repository.UserRepository;
  import service.UserValidator;
  
  import java.util.Optional;
  
  
  @Controller
  public class UserController {
  
      private final UserRepository userRepository;
      private final UserValidator userValidator;
  
      public UserController(UserRepository userRepository, UserValidator userValidator) {
          this.userRepository = userRepository;
          this.userValidator = userValidator;
      }
  
  
      @RequestMapping(value = &quot;/&quot;, method = {RequestMethod.GET, RequestMethod.POST})
      public String findAll(@ModelAttribute(&quot;addUser&quot;) User user, Model model, BindingResult bindingResult) {
          model.addAttribute(&quot;user&quot;, userRepository.findAll());
          model.addAttribute(&quot;addUser&quot;, user);
          String firstName = user.getFirstName();
          String lastName = user.getLastName();
          String phoneNumber = user.getPhoneNumber();
          String email = user.getEmail();
          userValidator.validate(user, bindingResult);
          if (bindingResult.hasErrors()){
              return &quot;users&quot;;
          }
          user = new User(firstName.substring(0,1).toUpperCase()+firstName.substring(1),
                  lastName.substring(0,1).toUpperCase()+lastName.substring(1),
                  phoneNumber, email);
          userRepository.save(user);
          return &quot;redirect:/&quot;;
      }
  
      @GetMapping(&quot;/user-delete/{id}&quot;)
      public String deleteUser(@PathVariable(&quot;id&quot;) Long id) {
          userRepository.deleteById(id);
          return &quot;redirect:/&quot;;
      }
  
  //    @RequestMapping(value = &quot;/user-update/{id}&quot;, method = RequestMethod.PUT)
  //    public ResponseEntity&lt;User&gt; updateUser(@PathVariable (value = &quot;id&quot;) Long id, @RequestParam(required = false) String firstName,
  //                                           @RequestParam(required = false) String lastName,
  //                                           @RequestParam(required = false) String phoneNumber,
  //                                           @RequestParam(required = false) String email){
  //       Optional&lt;User&gt; user = userRepository.findById(id);
  //           User u = user.get();
  //               u.setFirstName(firstName);
  //               u.setLastName(lastName);
  //               u.setPhoneNumber(phoneNumber);
  //               u.setEmail(email);
  //           User updatedUser = userRepository.save(u);
  //           return ResponseEntity.ok(updatedUser);
  //    }
  }
  </code></pre>
  <p>HTML-page &quot;users&quot;</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot; xmlns:th=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
  &lt;http pattern=&quot;/**&quot; security=&quot;none&quot;/&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;title&gt;Users&lt;/title&gt;
      &lt;style type=&quot;text/css&quot;&gt;
          .tg {
              border-collapse: collapse;
              border-spacing: 0;
              border-color: #ccc;
          }
  
          .tg td {
              font-family: Arial, sans-serif;
              font-size: 14px;
              padding: 10px 5px;
              border-style: solid;
              border-width: 1px;
              overflow: hidden;
              word-break: normal;
              border-color: #ccc;
              color: #333;
              background-color: #fff;
          }
  
          .tg th {
              font-family: Arial, sans-serif;
              font-size: 14px;
              font-weight: normal;
              padding: 10px 5px;
              border-style: solid;
              border-width: 1px;
              overflow: hidden;
              word-break: normal;
              border-color: #ccc;
              color: #333;
              background-color: #f0f0f0;
          }
      &lt;/style&gt;
      &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;h1&gt;Users&lt;/h1&gt;
  &lt;br/&gt;&lt;br/&gt;
  &lt;div&gt;
      &lt;table class=&quot;tg&quot; id=&quot;table&quot;&gt;
          &lt;tr&gt; &lt;form action=&quot;#&quot; th:action=&quot;@{/}&quot; th:object=&quot;${addUser}&quot; method = &quot;POST&quot;&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt; &lt;input type=&quot;text&quot; th:field=&quot;*{firstName}&quot; pattern=&quot;^[a-zA-Z]+$&quot;/&gt;&lt;/td&gt;
              &lt;td&gt; &lt;input type=&quot;text&quot; th:field=&quot;*{lastName}&quot; pattern=&quot;^[a-zA-Z+$&quot;/&gt;&lt;/td&gt;
              &lt;td&gt; &lt;input type=&quot;text&quot; th:field=&quot;*{phoneNumber}&quot; pattern=&quot;^[0-9]+$&quot; minlength=&quot;11&quot; maxlength=&quot;11&quot; /&gt;&lt;/td&gt;
              &lt;td&gt; &lt;input type=&quot;text&quot; th:field=&quot;*{email}&quot; pattern=&quot;^[\w-\.]+@[\w-]+\.[a-z]{2,4}$&quot;/&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type=&quot;submit&quot; value=&quot;Add&quot;/&gt;&lt;/td&gt;&lt;/form&gt;
          &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th width=&quot;80&quot;&gt;ID&lt;/th&gt;
                  &lt;th width=&quot;120&quot;&gt;First Name&lt;/th&gt;
                  &lt;th width=&quot;120&quot;&gt;Last Name&lt;/th&gt;
                  &lt;th width=&quot;120&quot;&gt;Phone Number&lt;/th&gt;
                  &lt;th width=&quot;150&quot;&gt;Email&lt;/th&gt;
                  &lt;th width=&quot;60&quot;&gt;Edit&lt;/th&gt;
                  &lt;th width=&quot;60&quot;&gt;Delete&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr  th:each =&quot;user : ${user}&quot;&gt;
                      &lt;td th:utext=&quot;${user.id}&quot; id=&quot;id&quot; &gt;&lt;/td&gt;
                      &lt;td th:utext=&quot;${user.firstName}&quot; id=&quot;firstName&quot; th:class =&quot;editable&quot;&gt;&lt;/td&gt;
                      &lt;td th:utext=&quot;${user.lastName}&quot; id=&quot;lastName&quot; th:class =&quot;editable&quot;&gt;&lt;/td&gt;
                      &lt;td th:utext=&quot;${user.phoneNumber}&quot; id=&quot;phoneNumber&quot; th:class =&quot;editable&quot;&gt;&lt;/td&gt;
                      &lt;td th:utext=&quot;${user.email}&quot; id=&quot;email&quot; th:class =&quot;editable&quot;&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;button id=&quot;editBtn&quot; type=&quot;button&quot; onclick=&quot;Edit(id)&quot;&gt;Edit&lt;/button&gt;&lt;/td&gt;
                  &lt;script type=&quot;text/javascript&quot;&gt;
                          function Edit(id){
                              let button = document.getElementById('editBtn');
                              button.innerText = &quot;Save&quot;;
                          let table = document.getElementById('table'); 
                          let tr = id.parentNode.parentNode; 
                          tr.style.backgroundColor = 'yellow';                      
                             table.currentLine = tr;
  
                          document.getElementById('firstName').value = tr.childNodes[0].textContent;
                          document.getElementById('lastName').value = tr.childNodes[1].textContent;
                          document.getElementById('phoneNumber').value = tr.childNodes[2].textContent;
                          document.getElementById('email').value = tr.childNodes[3].textContent;
                              let firstName = document.getElementById('firstName').value; 
                              let lastName = document.getElementById('lastName').value;
                              let phoneNumber = document.getElementById('phoneNumber').value;
                              let email = document.getElementById('email').value;
  
                              tr = table.currentLine;
                              tr.childNodes[0].textContent = firstName;
                              tr.childNodes[1].textContent = lastName;
                              tr.childNodes[2].textContent = phoneNumber;
                              tr.childNodes[3].textContent = email;
                              button.innerText = &quot;Edit&quot;;
                      }
                  &lt;/script&gt;
                  &lt;td&gt;&lt;a th:href=&quot;@{/user-delete/{id}(id=${user.id})}&quot; class=&quot;btn btn-success btn-sm pull-left&quot;&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>