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

Question

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

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

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

如果你能帮助我，你会很棒，非常感谢

Answer 1

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

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

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

问题描述

1 个解决方案

解决方案1
0 2021-06-10 23:07:28

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

问题描述

1 个解决方案

解决方案1 0 2021-06-10 23:07:28

解决方案1
0 2021-06-10 23:07:28