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

【问题标题】：Submit + Modal box : Dont trigger submit button?提交+模态框：不触发提交按钮？
【发布时间】：2021-08-27 22:40:42
【问题描述】：

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

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

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

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

【问题讨论】：

“看起来您的帖子主要是代码；请添加更多详细信息。”消息是有原因的。请不要只放不相关的文字来填写字数标准。

标签： javascript html forms modal-dialog submit

【解决方案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;
  }
})

【讨论】：

// 当用户点击按钮时，打开modal btn.addEvenetListener("submit", function (e) { e.preventDefault(); var inputName = document.getElementById("fname" ).value; if (inputName !== "") { modal.style.display = "block"; } else { alert("输入不能为空。"); } });做不到，继续把我重定向到index.html？
你有一个错字（addEvenetListener）我刚才在我的回答中修正了它
嘿，我很生气，我尝试了，我尝试了但没有工作......我得到了这个：btn.addEventListener("submit", function (e) { var inputName = document.getElementById ("fname").value; e.preventDefault(); if (inputName !== "") { modal.style.display = "block"; } else { alert("输入不能为空。"); } } );
我的错，我错过了你听错了 - 你需要听 form.submit （不是按钮提交）。答案已更新
兄弟，你的传奇！我输了一天多，不能一个人，另外你解释，所以我学习！！最后一件事，我可以为所有输入制作它吗？不仅适用于 fname，还适用于 Name、Fname、Age。请给我 5 个输入。我可能找到了这个？ (getElementsById("myCircle1 myCircle2 myCircle3 myCircle4"))