javascript – Changing url to send DELETE request

Question:

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 at url: http: // localhost: 8080 / flight / delete / 5? Id5 = 5

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

Answer:

Removed duplicate ids and removed unnecessary DOM wanderings. We rip out the id by flying to remove it from the marked checkbox and substitute it into the action form, the checkbox 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>
Scroll to Top
AllEscort