Приветствую)))
Начнем с простого...
Чтобы удалить запись (пользователя) нет необходимости оборачивать кнопку в form (можно и попроще сделать). Простой вариант - используя GET запрос отправляете запрос на URL вида (например,
users/delete/12345), где 12345 это ID пользователя. Далее получаете pathvariable из урла (id - 12345) и находите по нему пользователя и в метод удаляющий пользователя передаете id пользователя. Тогда вам не нужно будет оборачивать эту кнопку в form, добавлять action, передавать csrf и т.д.
У вас сейчас получается так, что для каждого пользователя генерируется набор кнопок "Удалить" и "Изменить" и это все обернуто в form. Получится, что у вас на одной странице 100 пользователей и 100 форм. Это не есть хорошо на самом деле... (но и не является ошибкой). Просто, смысл плодить лишние теги, лишние узлы и т.д.
Идем дальше...
... под выбранным полем в таблице вылезало окно редактирования я бы вносил изменения и после при нажатии на кнопку данные уходили ...
Окно редактирования, которое "вылезает" называется модальным окном. Если ваш дизайн использует bootstrap, то посмотрите bootstrap modal. Или вы можете использовать любую модалку на jquery.
Внимание! Без знаний js & jquery вы не сможете настроить то, что вы хотите.
Причина - когда производится клик на кнопке, вам нужно в открывшееся модальное окно передать id пользователя, которого вы хотите изменить. Можете например, в модалке добавить input hidden.
<input type="hidden" name="id" val="" id="userId">
По факту, вам не нужна форма для кнопки "Изменить" тоже. По нажатию кнопки "Изменить" открываете модалку и в модалку передаете ID пользователя в вышеуказанный инпут. А уже блок с полями модалки обернут в одну форму.
Чтобы не быть голословным покажу простой пример:
Пример таблицы, как должно выглядеть:
<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>
Как видите в таблице с пользователями вообще нет формы.
Потом на страницу добавляете модалку. Покажу на примере бутстрапа -
<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">×</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>
Дальше вы пишете js код (jquery), который и будет отправлять значения полей на нужный метод контроллера и сохранять пользователя.
Пример сниппета:
$( 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();
});
});
Можно реализовать по-разному... Можно например, не плодить лишние кнопки... а вверху таблицы добавить 2 кнопки. А дальше получать id пользователя при клике на элементе ряда и передавать ее значение в модальное окно и т.д.
Ваша текущая реализация:
<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>
не совсем корректна, в том плане, что у вас кнопка "Изменить" отправляет форму, а нужно, чтобы она по клику показывала модалку, а дальше уже модалка в свою очередь будет отправлять содержимое формы (как я и указал выше).
Простой
