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

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>

和 JavaScript

document.getElementById("show-modal").addEventListener("click", function() {
  document.querySelector(".modal").style.display = "flex";
});

function closeMe() {
  document.querySelector(".modal").style.display = "none";
}

document.querySelector("#show-modal").addEventListener("submit", event => {
  event.preventDefault();
  toggleModal();
  let formData = new FormData(document.querySelector("#show-modal"));
  console.log(
    "Name:" + formData.get("name"),
    "Email:" + formData.get("email"),
    "Subject:" + formData.get("subject"),
    "Message:" + formData.get("message")
  );
});

document.getElementById("#show-modal").addEventListener("submit", function() {
  alert("Thank you for your message!");
});

如果你想看看，这里是页面：https ://giacomosorbi.github.io/joanaoli09-module-i/contact.html

标签： javascripthtml

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>