表单数据未上传且警报不起作用

Question

我是 Javascript 新手，并按照教程制作了一个弹出表单。用户填写的数据应该出现在控制台中，但这并没有发生。我还想在人们单击提交按钮时创建一个警报，因此我添加了您将在 JavaScipt 代码中看到的最后几行，但它不起作用。希望这足够详细，并且有人可以帮助我。这是HTML<h1>                I'd love to chat with you about your upcoming project.              </h1>              <div class="intro-text">                Fill out the form bellow to get in touch. Either for a budget information or to book a meeting to discuss                any ideas that you might have, you can contact me for any                clarification you need. I'll get back to you in 2-3 days.              </div>              <div class="row open-form">                <div class="open-btn">                  <button id="show-modal"><strong>Open Form</strong></button>                </div>              </div><script src="./JavaScript/action_page.js"></script>    <div class="modal modal--hidden">      <div class="modal_content">        <div class="close">          <i class="fas fa-times" onclick="closeMe()"></i>        </div>        <h1>Ask away</h1>        <form id="submit">          <input type="text" placeholder="Name" name="name" />          <input type="email" id="email" placeholder="Email" name="email"/>          <input type="text" placeholder="Subject" name="subject" />          <textarea placeholder="Message" name="message"></textarea>          <button class="submit">Submit</button>        </form>     </div>   </div>和 JavaScriptdocument.getElementById("show-modal").addEventListener("click", function() {  document.querySelector(".modal").style.display = "flex";});function closeMe() {  document.querySelector(".modal").style.display = "none";}如果你想看看，这里是页面：https ://giacomosorbi.github.io/joanaoli09-module-i/contact.html

Answer 1

将代码更改为：

（删除了 toggleModal() 因为没有定义）

document.getElementById("show-modal").addEventListener("click", function() {

  document.querySelector(".modal").style.display = "flex";

});

function closeMe() {

  document.querySelector(".modal").style.display = "none";

}

document.querySelector("#submit").addEventListener("submit", event => {

  event.preventDefault();

  let formData = new FormData(document.querySelector("#submit"));

  console.log(

    "Name:" + formData.get("name"),

    "Email:" + formData.get("email"),

    "Subject:" + formData.get("subject"),

    "Message:" + formData.get("message")

  );

  alert("Thank you!!!");

});

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1>

                I'd love to chat with you about your upcoming project.

              </h1>

              <div class="intro-text">

                Fill out the form bellow to get in touch. Either for a budget information or to book a meeting to discuss

                any ideas that you might have, you can contact me for any

                clarification you need. I'll get back to you in 2-3 days.

              </div>

              <div class="row open-form">

                <div class="open-btn">

                  <button id="show-modal"><strong>Open Form</strong></button>

                </div>

              </div>

<script src="./JavaScript/action_page.js"></script>

    <div class="modal modal--hidden">

      <div class="modal_content">

        <div class="close">

          <i class="fas fa-times" onclick="closeMe()"></i>

        </div>

        <h1>Ask away</h1>

        <form id="submit">

          <input type="text" placeholder="Name" name="name" />

          <input type="email" id="email" placeholder="Email" name="email"/>

          <input type="text" placeholder="Subject" name="subject" />

          <textarea placeholder="Message" name="message"></textarea>

          <button class="submit">Submit</button>

        </form>

     </div>

   </div>

Answer 2

首先，将<script>标签移动到 html 文档的末尾，因为您试图在 html 中查找尚未呈现的元素。

如此：

    <div class="modal modal--hidden">

      <div class="modal_content">

        <div class="close">

          <i class="fas fa-times" onclick="closeMe()"></i>

        </div>

        <h1>Ask away</h1>

        <form id="submit">

          <input type="text" placeholder="Name" name="name" />

          <input type="email" id="email" placeholder="Email" name="email"/>

          <input type="text" placeholder="Subject" name="subject" />

          <textarea placeholder="Message" name="message"></textarea>

          <button class="submit">Submit</button>

        </form>

     </div>

   </div>

<script src="./JavaScript/action_page.js"></script>

其次，您addEventListener("submit",...应该在表单元素上，而不是在模式按钮上-