Форма HTML отправляется несмотря на возврат false

Question

У меня есть форма HTML, которая отправляется независимо от предупреждения и ложных заявлений. Приведенный ниже код является лишь последней мутацией, но я попытался также с событием «при нажатии» на кнопке и всем остальным, что нашел в Интернете. Этот же код работает правильно на других страницах, просто на этом он отправляется несмотря ни на что. Обратите внимание, что оповещение получено, поэтому оператор if проверяет правильно. Может быть, только одно пояснение для этой конкретной страницы, HTML состоит из функции AJAX, которая извлекает некоторые данные из бэкэнда (Flask, Python).

function deleteexposedsubmit(clicked_id) {
  let deleteExposedForm = document.getElementById(clicked_id);
  let allInputInForm = deleteExposedForm.querySelectorAll("input");
  for (let i = 0; i <= allInputInForm.length; i++) {
    console.log(allInputInForm[i].name);
    console.log(allInputInForm[i].value);
    if (allInputInForm[i].name == "hasConnectedProducts" && allInputInForm[i].value == "yes") {
      alert("The Service you are trying to delete has connected consumers. Cannot be deleted");
      return false;
    } else {
      deleteExposedForm.submit();
    }
  }
}

<form id="deleteexposedform_1" action="deleteexposed" method="POST" 
onsubmit="deleteexposedsubmit(this.id); return false;">
  <input type="hidden" name="selectedplatformtodeleteexposed" id="selectedplatformtodeleteexposed_1" value="Platform 1">
  <input type="hidden" name="selectedexposedtodeletename" id="selectedexposedtodeletename_1" value="Service with qualities and aspects">
  <input type="hidden" id="hasConnectedProducts1" name="hasConnectedProducts" value="yes">
  <input type="hidden" id="ConnectedProducts1" name="ConnectedProducts" value="Test ingest with same qa">
  <input type="hidden" name="selectedexposedtodeletetype" id="selectedexposedtodeletetype_1" value="EPS">
  <button class="links" id="b_deleteexposedform_1" title="Press to delete the exposed service on the selected platform">delete</button></form>

Answer 1

Форма будет отправлена ​​в случае сбоя функции. Кроме того, если первое поле НЕ является hasConnectedProducts, оно также будет отправлено из-за вашего l oop logi c

Вместо вашего кода попробуйте следующее:

window.addEventListener("load",() => {
  document.getElementById("deleteexposedform_1").addEventListener("submit",function(e) {
    if (this.querySelectorAll("input[name=hasConnectedProducts][value=yes]").length > 0) {
      alert("The Service you are trying to delete has connected consumers. Cannot be deleted");
      e.preventDefault(); // now it will not submit
    }
  })   
})

<form id="deleteexposedform_1" action="deleteexposed" method="POST">
  <input type="hidden" name="selectedplatformtodeleteexposed" id="selectedplatformtodeleteexposed_1" value="Platform 1">
  <input type="hidden" name="selectedexposedtodeletename" id="selectedexposedtodeletename_1" value="Service with qualities and aspects">
  <input type="hidden" id="hasConnectedProducts1" name="hasConnectedProducts" value="yes">
  <input type="hidden" id="ConnectedProducts1" name="ConnectedProducts" value="Test ingest with same qa">
  <input type="hidden" name="selectedexposedtodeletetype" id="selectedexposedtodeletetype_1" value="EPS">
  <button class="links" id="b_deleteexposedform_1" title="Press to delete the exposed service on the selected platform">delete</button></form>

jQuery версия

$(function() {
  $("#deleteexposedform_1").on("submit",function(e) {
    if ($("input[name=hasConnectedProducts][value=yes]",this).length > 0) {
      alert("The Service you are trying to delete has connected consumers. Cannot be deleted");
      e.preventDefault(); // now it will not submit
    }
  })   
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="deleteexposedform_1" action="deleteexposed" method="POST">
  <input type="hidden" name="selectedplatformtodeleteexposed" id="selectedplatformtodeleteexposed_1" value="Platform 1">
  <input type="hidden" name="selectedexposedtodeletename" id="selectedexposedtodeletename_1" value="Service with qualities and aspects">
  <input type="hidden" id="hasConnectedProducts1" name="hasConnectedProducts" value="yes">
  <input type="hidden" id="ConnectedProducts1" name="ConnectedProducts" value="Test ingest with same qa">
  <input type="hidden" name="selectedexposedtodeletetype" id="selectedexposedtodeletetype_1" value="EPS">
  <button class="links" id="b_deleteexposedform_1" title="Press to delete the exposed service on the selected platform">delete</button></form>

Answer 2

Проблема в том, что ваш оператор if находится внутри l oop. Даже при отображении alert() оператор else запускается при последовательных итерациях и отправляет форму.

Чтобы исправить это хранилище, укажите логический флаг состояния в l oop, а затем проверьте, что после выполнение l oop завершается.

Обратите внимание на использование ненавязчивого обработчика событий в приведенном ниже примере вместо устаревшего встроенного атрибута onsubmit, что является плохой практикой, и ее следует по возможности избегать .

document.querySelector('#deleteexposedform_1').addEventListener('submit', function() {
  let deleteExposedForm = this;
  let allInputInForm = deleteExposedForm.querySelectorAll("input");

  var valid = true;
  for (let i = 0; i < allInputInForm.length; i++) {
    if (allInputInForm[i].name == "hasConnectedProducts" && allInputInForm[i].value == "yes") {
      valid = false;
    }
  }

  if (!valid) {
    alert("The Service you are trying to delete has connected consumers. Cannot be deleted");
    return false;
  } else {
    deleteExposedForm.submit();
  }
})

<form id="deleteexposedform_1" action="deleteexposed" method="POST">
  <input type="hidden" name="selectedplatformtodeleteexposed" id="selectedplatformtodeleteexposed_1" value="Platform 1">
  <input type="hidden" name="selectedexposedtodeletename" id="selectedexposedtodeletename_1" value="Service with qualities and aspects">
  <input type="hidden" id="hasConnectedProducts1" name="hasConnectedProducts" value="yes">
  <input type="hidden" id="ConnectedProducts1" name="ConnectedProducts" value="Test ingest with same qa">
  <input type="hidden" name="selectedexposedtodeletetype" id="selectedexposedtodeletetype_1" value="EPS">
  <button class="links" id="b_deleteexposedform_1" title="Press to delete the exposed service on the selected platform">delete</button>
</form>

Поскольку вы пометили это jQuery, обратите внимание, что вы можете сделать те же логи c гораздо более краткими:

$('#deleteexposedform_1').on('submit', function(e) {
  var hasConnectedProducts = $(this).find('input[name="hasConnectedProducts"]').val();
  if (hasConnectedProducts === 'yes') {
    alert("The Service you are trying to delete has connected consumers. Cannot be deleted");
    e.preventDefault();
  }
})

<form id="deleteexposedform_1" action="deleteexposed" method="POST">
  <input type="hidden" name="selectedplatformtodeleteexposed" id="selectedplatformtodeleteexposed_1" value="Platform 1">
  <input type="hidden" name="selectedexposedtodeletename" id="selectedexposedtodeletename_1" value="Service with qualities and aspects">
  <input type="hidden" id="hasConnectedProducts1" name="hasConnectedProducts" value="yes">
  <input type="hidden" id="ConnectedProducts1" name="ConnectedProducts" value="Test ingest with same qa">
  <input type="hidden" name="selectedexposedtodeletetype" id="selectedexposedtodeletetype_1" value="EPS">
  <button class="links" id="b_deleteexposedform_1" title="Press to delete the exposed service on the selected platform">delete</button>
</form>