CODEWITHSUNDEEP
javascriptajax
Peter Latham Lewis
Peter Latham Lewis

Reputation: 1

Closing a modal window

I am trying to close a modal window after it has sent an email. At the moment I can get the form cleared, but because the modal form is open, I cannot see the message that the email has been sent successfully. Any ideas?

$(document).ready(function() {
  const dialog = document.getElementById("modalForm");
  $('#quote-request').on('submit', function(e) { //Don't foget to change the id form

    $.ajax({
      url: 'send-mail.php', //===PHP file name====
      data: $(this).serialize(),
      type: 'POST',
      success: function(data) {
        console.log(data);

        //Success Message == 'Title', 'Message body', Last one leave as it is
        $("#quote-request")[0].reset();
        swal("�Success!", "Message sent!", "success");
        dialog.close();
      },
      error: function(data) {
        //Error Message == 'Title', 'Message body', Last one leave as it is
        swal("Oops...", "Something went wrong :(", "error");
      }
    });
    e.preventDefault(); //This is to Avoid Page Refresh and Fire the Event "Click"
  });
});

Upvotes: 0

Views: 36

Answers (1)

zer00ne
zer00ne

Reputation: 44088

If you are using a <dialog> element, use the .close() method at the beginning of your "submit" event handler.

const modal = document.querySelector("dialog");

const form = document.forms.ui;
const io= form.elements;
const open = io.open;

open.onclick = e => modal.showModal();

// While the <form> is submitted close the modal
form.onsubmit = e => modal.close();
<button id="open" type="button" form="ui">Open Dialog</button>
<dialog>
  <form id="ui" action="https://httpbin.org/post" method="POST" target="response">
    <fieldset>
      <legend>Submit to a live test server -- the response will be be displayed below</legend>
      <input name="data" value="TEST">
      <button>Send</button>
    </fieldset>
  </form>
</dialog>
<iframe name="response"></iframe>

Upvotes: 0

Related Questions