时间戳

首页 > 解决方案 > 为什么在我的 JS 弹出窗口中我的 html 表单不起作用？

javascript - 为什么在我的 JS 弹出窗口中我的 html 表单不起作用？

问题描述

我弹出一个弹出窗口，上面写着“您确定要删除该类别吗？” 如果他们说是，执行一个表格，但这个表格不起作用？

html代码：

var modal = document.getElementById("popup");
var btns = Array.prototype.slice.call(document.querySelectorAll(".remove_openpopup"));
var span = document.getElementsByClassName("close_button")[0];
btns.forEach(function(btn) {
  btn.onclick = function() {
    modal.style.display = "block";
  }
});
span.onclick = function() {
  modal.style.display = "none";
}
span2.onclick = function() {
  modal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
<body>
  <a href="#" class="remove_openpopup">remove</a>
  <a href="#" class="remove_openpopup">remove2</a>
  <a href="#" class="remove_openpopup">remove3</a>

  <div id="popup" class="popup">
    <div class="popup_content">
      <span class="close">&times;</span>
      <p>Are you sure you wan't delete this categorie ?</p>
      <button class="button_popup close_button">No</button>
      <button class="button_popup close_button" onclick='document.getElementByClassName("remove").submit()'>Yes</button>
    </div>
  </div>
  <form class="remove" method="post"><input type="hidden" name="remove" /></form>
</body>

测试脚本：

if (isset($_POST['remove'])) {
  echo "a";
}

当我单击是时，没有任何反应。有人有想法吗？

标签： javascripthtml

解决方案

您正在使用 getElementByClassName 但它不存在。最接近的是 getElementsByClassName，它返回具有请求的类名的元素数组，但在这种情况下，我认为您应该使用 getElementById 并将 id 属性设置为您的表单：

<body>
    <a href="#" class="remove_openpopup">remove</a>
    <a href="#" class="remove_openpopup">remove2</a>
    <a href="#" class="remove_openpopup">remove3</a>

    <div id="popup" class="popup">
      <div class="popup_content">
        <span class="close">&times;</span>
        <p>Are you sure you wan't delete this categorie ?</p>
        <button class="button_popup close_button">No</button>
        <button class="button_popup close_button" onclick='document.getElementById("remove").submit()'>Yes</button>
      </div>
    </div>
    <form id="remove" method="post"><input type="hidden" name="remove" /></form>
</body>

推荐阅读