javascript - How to use sweetalertswal correctly? - Stack Overflow

admin管理员组

文章数量:1394759

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('.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!!

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./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!!

• javascript
• jquery
• sweetalert

Share Improve this question Follow asked Aug 12, 2022 at 4:26 user2679476user2679476 45911 gold badge44 silver badges2020 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

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/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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="some_exchnage_request_form">
  <input type="submit">
</form>

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?

First you need to add following CDN in head tag of html

<script src="https://cdn.jsdelivr/npm/sweetalert2@11"></script>

OR Download & install

npm install sweetalert2

then can use in your js code like below

Swal.fire({
    title: "Good job!",
    text: 'job done',
    icon: "success"
}); 

本文标签： javascriptHow to use sweetalertswal correctlyStack Overflow