skip to Main Content

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?

2

Answers


  1. 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>
    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search