How to redirect to the edit form when you click on the button?

Question

Java

There is a page with the output of all users and 2 buttons in each line to delete and change, Help pliz how to make it so that when you press any button to change under the selected field in the table, an editing window would pop up, I would make changes and after clicking on the button the data would go to servlet and would pull ${user.id} data only at the moment when the form is filled out, I don't know how to do it? I'm a beginner, any help would be grateful

<form method="post">
  <input type="hidden" name="id" value="${user.firstName}">
  <input type="hidden" name="name" value="${user.lastName}">
  <button formaction="action1" type="submit" name="delete" value="${user.id}">Удалить</button>
  <button formaction="action2" type="submit" name="update" value="${user.id}">Изменить</button>
</form>

Answer 1

Greetings)))
Let's start with a simple one...
To delete a record (user) there is no need to wrap the button in the form (it can be done in a simpler way). A simple option - using a GET request send a request to a URL of the form (for example, users/delete/12345), where 12345 is the user ID. Next, get the pathvariable from the url (id - 12345) and find the user by it, and pass the user's id to the method that deletes the user. Then you won't need to wrap this button in a form, add an action, pass a csrf, etc.
What you have now is that for each user a set of "Delete" and "Change" buttons is generated and it's all wrapped in a form. It turns out that you have 100 users and 100 forms on one page. This is not really good ... (but it is not a mistake either). Simply, it makes sense to produce extra tags, extra nodes, etc.
Move on...
The editing window that pops up is called a modal window. If your design uses bootstrap, then check out the bootstrap modal. Or you can use any jquery modal.
Attention! Without knowledge of js & jquery you won't be able to customize what you want.
The reason is that when the button is clicked, you need to pass the id of the user you want to change to the opened modal window. For example, you can add input hidden in the modal.
In fact, you don't need a form for the "Edit" button either. By pressing the "Change" button, open the modal and pass the user ID to the modal in the above input. And already the block with modal fields is wrapped in one form.
In order not to be unfounded, I will show a simple example:
An example of a table, how it should look like:

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
    <th>Действие</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
    <td>
    	<a href="/users/delete/12345">Удалить</a>
    	<a href="#" class="editUser" data-userId="12345">Изменить</a>
    </td>
  </tr>
  <tr>
    <td>John</td>
    <td>Smith</td>
    <td>30</td>
    <td>
    	<a href="/users/delete/8976">Удалить</a>
    	<a href="#" class="editUser" data-userId="8976">Изменить</a>
    </td>
  </tr>
</table>

As you can see, there is no form at all in the table with users.
Then add a modal to the page. I will show on the example of bootstrap -

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
    <th>Действие</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
    <td>
    	<a href="/users/delete/12345">Удалить</a>
    	<a href="#" class="editUser" data-userId="12345">Изменить</a>
    </td>
  </tr>
  <tr>
    <td>John</td>
    <td>Smith</td>
    <td>30</td>
    <td>
    	<a href="/users/delete/8976">Удалить</a>
    	<a href="#" class="editUser" data-userId="8976">Изменить</a>
    </td>
  </tr>
</table> 

<!-- Modal -->
<div class="modal fade" id="userEditModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Информация о пользователе</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      	<form id="userEditForm" action="/users/edit" method="post">
          <!-- тут ваши поля, куда нужно внести информацию -->
          <input type="text" name="username">
          <input type="hidden" name="userId" id="userIdHiddenInput">
      </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
        <button type="button" class="btn btn-primary" id="saveUser">Внести изменения</button>
      </div>
    </div>
  </div>
</div>

Next, you write js code (jquery), which will send field values ​​to the desired controller method and save the user.
Snippet example:

$( document ).ready(function() {
    
  // По нажатию кнопки изменить передаем id пользователя на котором кликнули в скрытое поле модалки и показываем модалку
  $(".editUser").on("click", function() {
    // тут передали id пользователя из data-userId в hidden поле модалки
    $("#userIdHiddenInput").val($(this).attr("data-userId"));

    // показываем модалку
    $("#userEditModal").modal();
  });

  // По нажатию кнопки "Внести изменения" в модалке отправляем содержимое формы на сервер
  $(".editUser").on("click", function(event) { 
    $("#userEditForm").submit();
  });


});

It can be implemented in different ways... You can, for example, not produce extra buttons... and add 2 buttons at the top of the table. And then get the user id when clicking on the row element and pass its value to the modal window, etc.
Your current implementation:

<form method="post">
  <input type="hidden" name="id" value="${user.firstName}">
  <input type="hidden" name="name" value="${user.lastName}">
  <button formaction="action1" type="submit" name="delete" value="${user.id}">Удалить</button>
  <button formaction="action2" type="submit" name="update" value="${user.id}">Изменить</button>
</form>

is not entirely correct, in the sense that your "Change" button sends the form, but you need it to show the modal on click, and then the modal, in turn, will send the contents of the form (as I indicated above).