sweetalert and form submit

Question

I have a form and I want to trigger an alert (using sweetalert) on submit:

<form id="verbale" class="verbale" action="editor_conferma.php" method="post">
...
<input id="go" type="submit" name="go" value="go" class="swa-confirm">
</form>

<script>
$(document).on("submit", ".swa-confirm", function (e) {
                e.preventDefault();
                var $myForm = $('.verbale');
                if (!$myForm[0].checkValidity()) {
                    $myForm[0].reportValidity()
                } else {
                    swal({
                        title: "Are you sure?",
                        text: "Did you check?",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonText: "Yes, Submit!",
                    }).then(function (result) {
                        $myForm.submit();
                    });
                }
            });
</script>

The sweetalert dialog appears but when I confirm, the form is not passed on and submit does not seem to work.

Any hints?

Answer 1

I know that this question has already been answered, and you would like to use jQuery and sweetalert, but I couldn't help it. Here is an example of a native dialog box and how it can be used in connection with the submit event.

const verbale_form = document.forms.verbale;
const verbale_dialog = document.getElementById('verbale_dialog');

verbale_form.addEventListener('submit', e => {
  e.preventDefault();
  verbale_dialog.showModal();
});

verbale_dialog.addEventListener('close', e => {
  if (e.target.returnValue == 'yes') verbale_form.submit();
});

dialog {
  border: none;
  border-radius: 5px;
  padding: 1em 5em;
  color: DimGray;
}

dialog form {
  display: inline-flex;
  flex-direction: row;
  gap: .5em;
}

dialog>div {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .5em;
}

dialog button {
  color: white;
  border: none;
  border-radius: .2em;
  padding: 1em;
}

dialog button[name="yes"] {
  background-color: MediumSlateBlue;
}

dialog button[name="cancel"] {
  background-color: SlateGray;
}

dialog.warning:before {
  display: flex;
  margin: 0 auto;
  content: '!';
  color: PeachPuff;
  font-size: 4em;
  overflow: hidden;
  border: solid thick PeachPuff;
  border-radius: 1em;
  width: 1em;
  height: 1em;
  align-items: center;
  justify-content: center;
}

<form id="verbale" class="verbale" action="editor_conferma.php" method="post">
  <input type="text" name="firstname" required>
  <button type="submit">go</button>
</form>
<dialog id="verbale_dialog" class="warning">
  <div>
    <h2>Are you sure?</h2>
    <p>Did you check?</p>
    <form method="dialog">
      <button name="yes" value="yes">Yes, Submit!</button>
      <button name="cancel" value="cancel" formmethod="dialog">Cancel</button>
    </form>
  </div>
</dialog>

Answer 2

Initially you gave the submit button the ID/Name of submit - that will block the submission

You need to assign the submit to the FORM and NOT use the jQuery submit since it triggers the sweetalert again

sweetalert.js.org, has buttons

Lastly I test that Yes, Submit is clicked

Note: If you use required, there is no need to test the validity unless you have turned standard validation off and you want to handle the validation yourself

$("#verbale").on("submit", function(e) { // or if inserted $(document).on("submit","#verbale",function() {
  e.preventDefault();
  const myForm = this;
  if (!myForm.checkValidity()) { // this is not needed if you have required
    myForm.reportValidity()
  } else {
    swal({
      title: "Are you sure?",
      text: "Did you check?",
      icon: "warning",
      buttons: {
        cancel: true,
        confirm: "Yes, Submit!"
      }
    }).then(function(result) {
      if (result) myForm.submit(); // do not submit if cancelled
    })
  }
})

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

<form id="verbale" class="verbale" action="editor_conferma.php" method="post">
  <input type="text" name="firstname" required />
  <input id="go" type="submit" name="go" value="go" class="swa-confirm">
</form>

SWAL2.11

$("#verbale").on("submit", function(e) { // or if inserted $(document).on("submit","#verbale",function() {
  e.preventDefault();
  const myForm = this;
  if (!myForm.checkValidity()) { // this is not needed if you have required
    myForm.reportValidity();
  } else {
    Swal.fire({
      title: "Are you sure?",
      text: "Did you check?",
      icon: "warning",
      showCancelButton: true,
      confirmButtonText: "Yes, Submit!",
      cancelButtonText: "Cancel"
    }).then((result) => {
      if (result.isConfirmed) {
        myForm.submit(); // submit if confirmed
      }
    });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<form id="verbale" class="verbale" action="editor_conferma.php" method="post">
  <input type="text" name="firstname" required />
  <input id="go" type="submit" name="go" value="go" class="swa-confirm">
</form>