sweetalert disappear Instantly

user_6047961 0
Viewed 8857
swal({
    title: "xxx",
    type: "warning",
    showCancelButton: true,
    .....
    },
    function(isConfirm) {
        if (isConfirm) {
            swal("yes, do it!");
        } else {
            swal("cannel!");
        }
    }
);

in my page a button binding a js function , the function execute this code . On the page appear the "are you sure" confirm box when I click the button. but when I click yes , the next sweetalert just flushes and disappear instantly. what's wrong?

sweetalert jquery javascript
5 Answers

As the problem has been solved, consider this just an another approach.

You can also use event.preventDefault() for the 2nd sweetalert. I got stuck in the same situation, except that I only had 1 sweetalert to be displayed.

From this mozilla page,

The Event interface's preventDefault() method tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.

On clicking the submit button, it appeared for an instance and then I was directed to another page (specified in action attribute). Since this was happening by default, using event.preventDefault() made it stay.

Thanks for sharing your doubt !

user_92191810

just add event.preventDefault(); before swal function it will prevent it from disappearing.

user_36099030

Set the closeonconfirm attribute to false i.e. closeOnConfirm: false,

user_30878410

Once You calling to the function which is show the sweet alert make sure calling button type should keep as button not submit.

<form  method="post">                                 
 <button  type="button" class="btn-wide btn btn-info" onclick="buy_harvest()">Buy</button>
                                            <button  type="submit" class="btn-wide btn-shadow btn btn-success" name="good_condition">Good condition</button>
                                            <button  type="submit" class="btn-wide btn btn-danger" name="inedible">Inedible</button>                                              </form>  

<script>
    function buy_harvest(){
       

    var { value: formValues } = Swal.fire({
        title: 'How mutch want to Buy?',
        showCancelButton: true,
        confirmButtonText: `Buy`,
        html:
          '<div style="float:left;"><input type="text" id="buy_qty" style="width:150px;"><label> Quanity </label></div>' ,
          
        focusConfirm: false,
        preConfirm: () => {
          var buy_qty = document.getElementById("buy_qty").value;
          if(buy_qty!="" || buy_qty!=0){
           
            //call to another function and pass value
            process_buy(buy_qty);
          }       
        }
      })
    }
</script>
user_150226170
Related