3

Форма:

      <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>

Контроллер:

   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")
    }

}

Проблема

Отправка происходит по url: http://localhost:8080/flight/delete/5?id5=5

Необходимо: http://localhost:8080/flight/delete/5

8
  • Как вы удаляете строки, если несколько флажков отмечено, каким запросом? И на какой надо исправить?
    – br3t
    14 мая 2017 в 21:09
  • @br3t, )подразумевается, что отмечается одна
    – bsuart
    14 мая 2017 в 21:11
  • Хотел еще уточнить, с чем связано столь интересное решение в UI - и флажок отмечать, и кнопка удаления в каждой строке?
    – br3t
    15 мая 2017 в 9:21
  • @br3t, с тем что занимаюсь бэкэндом)
    – bsuart
    15 мая 2017 в 9:57
  • так а вариант с только кнопкой "удалить" вы рассматривали или он от вас не зависит?
    – br3t
    15 мая 2017 в 10:36

1 ответ 1

0

Отрезольвил дублирующиеся id и убрал излишние блуждания по DOM. Выдираем id полетя для удаления из отмеченного флажка и подставляем в action формы, сам флажок удаляем из формы.

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>

9
  • И получится url: localhost:8080/flight/delete/?id6=6, a нужно : localhost:8080/flight/delete/6
    – bsuart
    14 мая 2017 в 21:41
  • Обновил код, проверьте
    – br3t
    14 мая 2017 в 21:55
  • Получается 5?id5=
    – bsuart
    14 мая 2017 в 22:23
  • @br3t не будет работать ваша проверка на выбранные checkbox
    – studentST
    15 мая 2017 в 0:16
  • @studentST, аргументируйте
    – br3t
    15 мая 2017 в 9:19

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.