How to use sweetalert / swal correctly?-CodePudding

I am new in Javascript / jQuery. I want to show some alert message using 'sweetalert' library and based on the user response the function will either return or continue.

Here is my implementation :

  jQuery("#some_exchnage_request_form").on( 'submit', function(e){
        
        // some implementation
        // Now showing the alert
        
        jQuery.getScript('https://unpkg.com/sweetalert/dist/sweetalert.min.js', function() {
            
         swal({
                title: "Do you want Continue ? ",
                text: "You need to pay extra amount",
                icon: "success",
                buttons: true,
                confirmButtonColor: '#C64EB2',
              })
              .then((willSubmit) => {
                if (!willSubmit) {
                   return false;
                }
              });
        }); 
       // rest of the code
    });

Here the expectation is if the user select 'cancel' button the function should return false, otherwise on selecting 'ok' button 'rest of the code' portion to be executed.

But here problem is the code doesn't stop for the user input and just continue. The alert box is displayed but it ignore the user selection.

I know implementation is wrong, but not sure what would be the correct way to do this.

Thanks!!

CodePudding user response：

You need to use Swal.fire(); to make it work.

https://sweetalert2.github.io/

jQuery("#some_exchnage_request_form").on( 'submit', function(e){

    // some implementation
    // Now showing the alert
    
    e.preventDefault();
    
    jQuery.getScript('https://cdn.jsdelivr.net/npm/sweetalert2@11', function() {
    
    Swal.fire({
      title: 'Do you want Continue ?',
      text: "You need to pay extra amount",
      icon: 'success',
      showCancelButton: true,
      confirmButtonColor: '#C64EB2',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Yes'
    }).then((result) => {
      if (result.isConfirmed) {
        Swal.fire(
          'Confirmed!',
          'You agreed to pay extra amount.',
          'success'
        )
      } else {
        console.log('clicked cancel');
      }
    })
    
    })
    
   // rest of the code
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="some_exchnage_request_form">
  <input type="submit">
</form>

CodePudding user response：

There are similar questions and looks like it is a limitation of 'sweetalert' that execution doesn't stop for user input unlike alert()/confirm() in js.

sweetalert pause execution and return value

How to return the value of SweetAlert2 input?