The form:

<table id="adminTable" class="table_dark" align="center"> <caption>FLIGHT MANAGEMENT</caption> <tr> <th colspan="3">Navigation flight</th> <th colspan="2">Action</th> </tr> <tr> <form method="POST" action="/flight/add" id="addForm"> <td colspan="3"> <input type="text" name="navigation" id="navigation" value=""> </td> <td colspan="2"> <input type="submit" value="Add flight" id="addButton"> </td> </form> </tr> <tr> <th>Id</th> <th>Navigation</th> <th>TeamId</th> <th>Select</th> <th>Action</th> </tr> <form method="DELETE" action="/flight/delete/" id="deleteForm"> <c:forEach var="flight" items="${flights}"> <tr> <td>${flight.id}</td> <td>${flight.navigation}</td> <td>${flight.team.id}</td> <td><input type="checkbox" name="id${flight.id}" id="${flight.id}" value="${flight.id}"></td> <td><input type="submit" value="Delete flight" id="deleteButton"></td> </tr> </c:forEach> </form> </table>

Controller:

  function deleteButtonClickHandler(event) { event.preventDefault(); var adminTable = document.getElementById('adminTable').getElementsByTagName('tr'); var deleteForm = document.getElementById('deleteForm'); var flightId = 0; var check; for (var i = 3; i < adminTable.length; i++) { var td = adminTable[i].querySelectorAll("td")[3]; var checkbox = td.querySelector("input[type='checkbox']"); if (checkbox.checked) { check = true; flightId = checkbox.value; alert(flightId); break; } } if(check) { deleteForm = document.getElementById('deleteForm'); deleteForm.action = "/flight/delete/" + flightId; deleteForm.submit(); } else { alert("Please check flight and then click on button") } }

Problem

Sending occurs on url: http: // localhost: 8080 / flight / delete / 5? Id5 = 5

Required : http: // localhost: 8080 / flight / delete / 5

  • How do you delete rows if multiple checkboxes are checked, with which query? And what should be corrected? - br3t
  • @ br3t,) it is understood that one is celebrated - bsuart
  • I also wanted to clarify, what is the reason for such an interesting decision in the UI - and the check box and the delete button in each row? - br3t
  • @ br3t, so that doing backend) - bsuart
  • So did you consider the option with only the "delete" button or does it not depend on you? - br3t

1 answer 1

Removed duplicate id and removed unnecessary walks on DOM. We tear out the id by flying to remove from the checked box and substitute it in the action form, the flag itself is removed from the form.

 function deleteButtonClickHandler(event) { event.preventDefault(); var deleteForm = document.getElementById('deleteForm'); var checkboxes = deleteForm.querySelectorAll(".deleteCheckbox"); for(var i = 0; i < checkboxes.length; i++) { if(checkboxes[i].checked) { var flightId = checkboxes[i].value; deleteForm.action = "/flight/delete/" + flightId; checkboxes[i].parentElement.removeChild(checkboxes[i]); deleteForm.submit(); return true; } } alert("Please check flight and then click on button"); return false; } 
 <form method="DELETE" action="/flight/delete/" id="deleteForm"> <c:forEach var="flight" items="${flights}"> <tr> <td>${flight.id}</td> <td>${flight.navigation}</td> <td>${flight.team.id}</td> <td><input type="checkbox" class="deleteCheckbox" name="id${flight.id}" id="${flight.id}" value="${flight.id}"></td> <td><input type="submit" value="Delete flight" class="deleteButton"></td> </tr> </c:forEach> </form>