提交 + 模态框：不触发提交按钮？

如何解决提交 + 模态框：不触发提交按钮？

我在链接“/qsd.html?firstname=test”上获得了重定向，并且我的模态没有打开.. 我在谷歌上尝试了很多东西，但我无法解决它..

如果输入不为空白，我只想打开我的模式。

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="myModal" class="modal" style="display: none">
      <button class="close">X</button>
      <div class="modal-body">
        <div class="modal-content">I am a modal</div>
      </div>
    </div>

    <form>
      <input
        type="text"
        id="fname"
        name="firstname"
        placeholder="e.g. My TikToken"
        required
      />
      <input type="submit" id="myBtn" value="Submit" />
    </form>
    <script>
      var modal = document.getElementById("myModal");
      var btn = document.getElementById("myBtn");
      var span = document.getElementsByClassName("close")[0];
      var inputName = document.getElementById("fname").value;

      // When the user clicks on the button,open the modal
      btn.addEvenetListener("submit",function (e) {
        e.preventDefault();

        if (inputName !== "") {
          modal.style.display = "block";
        } else {
          alert("Input cannot be blank.");
        }
      });

      // When the user clicks on <span> (x),close the modal
      span.onclick = function () {
        modal.style.display = "none";
      };

      // When the user clicks anywhere outside of the modal,close it
      window.onclick = function (event) {
        if (event.target == modal) {
          modal.style.display = "none";
        }
      };
    </script>
  </body>
</html>

如果你能帮到我就好了，非常感谢

解决方法

您正在听按钮提交，但实际上您想听表单提交。将此行更改为：

<form id="theForm">

然后在下面看到我们将更改我们正在收听的内容（而不是按钮）。当您的按钮被点击时，您的代码会测试 inputName - 问题是，您在发生任何事情之前设置了 inputName，所以它会是空白的。而是从按钮单击事件中获取该值。另外你有一个错字addEvenetListener

删除此：var inputName = document.getElementById("fname").value;

像这样将您的侦听器更改为 FORM 提交（而不是按钮），然后在其中添加您的 inputName 检查：

var theForm = document.getElementById('theForm');
theForm.addEventListener("submit",function (e) {
    e.preventDefault();
    var inputName = document.getElementById("fname").value; 
              // .....

最后，您询问了关于在提交时检查多个输入的问题。这是一种使用元素/消息数组来实现的方法。对于此示例，您有 5 个元素，其 ID 为“element1”、“element2”等。你可以明显改变这些

var theForm = document.getElementById('theForm');
theForm.addEventListener("submit",function (e) {
  e.preventDefault();
  var elements = [ 
    ["fname","You need to put in a value for element 1"],["lname","You need to put in a value for element 2"],["supply","You need to put in a value for element 3"],["decimals","You need to put in a value for element 4"],["ownship","You need to put in a value for element 5"]
  ];

  // now loop through them and if any of them are not filled alert the user

  var errors= []; // we'll put any error messages in here

  elements.forEach(el => {
    // el is one of the arrays inside of elements
    if (document.getElementById(el[0]) && document.getElementById(el[0]).value.trim() == "") errors.push(el[1]);
  })

  if (errors.length >0 {
    alert("There are errors: \n" + errors.join("\n");
    // if you want to stop the modal from showing,just uncomment the next line
    // return;
  }
})

提交 + 模态框：不触发提交按钮？

如何解决提交 + 模态框：不触发提交按钮？

解决方法

相关推荐