尽管返回 false，但仍提交 HTML 表单

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

问题是因为您的 if 语句在循环内。即使显示了alert()，else 语句也会在连续迭代时触发并提交表单。

要修复此问题，请在循环中存储一个布尔状态标志，然后检查 循环是否完成。

注意在下面的示例中使用了不显眼的事件处理程序，而不是过时的内联 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 标记此内容时，请注意您可以使相同的逻辑更加简洁：

$('#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>

Answer 2

如果函数失败，表单将提交。此外，如果第一个字段不是 hasConnectedProducts，那么由于您的循环逻辑，它也会提交

试试这个，而不是你的代码：

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>