CODEWITHSUNDEEP
javascripthtml
Joana Oliveira
Joana Oliveira

Reputation: 85

How to close form modal after submiting?

I've created a form which is working fine but after clicking on submit, and clicking 'ok' on the alert, the modal continues on the page with the written information on it. I would like for it to close afterwards. Can anyone help me with that?

Here's the page: https://giacomosorbi.github.io/joanaoli09-module-i/contact.html

And here's the code for a quick view:

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

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")
  );
  alert("Thank you for your message!");
})

Upvotes: 1

Views: 969

Answers (4)

Tom Siegel
Tom Siegel

Reputation: 236

Just add the data-dismiss attribute to the modal if you always want to close it

<button class="submit" data-dismiss="modal">Submit</button>

Upvotes: 1

njain
njain

Reputation: 157

You need to call closeMe() function after submit. Alert is a blocking function, means, if you don't close it, the code below will not execute. So you don't have to capture the alert close event, just write down the code below that alert, when alert window will be closed the code below will be executed automatically.

  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")
    );
    alert("Thank you for your message!");
     closeMe();


})

Upvotes: 0

user12761468
user12761468

Reputation:

Just call the "closeMe()" function after submit.

Upvotes: 1

Rio A.P
Rio A.P

Reputation: 1395

Call closeMe() function after submit :

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")
  );
  alert("Thank you for your message!");
  closeMe();
})

Upvotes: 1

Related Questions