Sweet alert confirmation box does not seem to be working with form

Question

I'm working with SweetAlert2 to show a confirmation box to user, if he checks a checkbox on a form like this:

<form id="from1" data-flag="0" action="" method="POST">
    @csrf
    <input type="checkbox" name="wallet_checked" onchange="this.form.submit();">
</form>

As you can see I have used onchange="this.form.submit();" for checkbox in order to submit the form without using submit button and it works fine.

Then for showing Sweet Alert confirmation message, I added this:

      document.querySelector('#from1').onsubmit = function(e){
            $flag = $(this).attr('data-flag');
            if($flag==0){
                e.preventDefault(); //to prevent submitting
                swal({
                        title: "Are you sure?",
                        text: "You are about to create a transaction",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: '#DD6B55',
                        confirmButtonText: 'Yes, I am sure!',
                        cancelButtonText: "No, cancel it!",
                        closeOnConfirm: false,
                        closeOnCancel: false
                    },
                    function(isConfirm){
                        if (isConfirm){
                            swal("Shortlisted!", "Transaction successfully created", "success");
                            //update the data-flag to 1 (as true), to submit
                            $('#from1').attr('data-flag', '1');
                            $('#from1').submit();
                        } else {
                            swal("Cancelled", "Transaction didn't submitted", "error");
                        }
                    });
            }
            return true;
        };

But the problem is, it does not pop up when I click on the checkbox.

And on Console, no errors appears.

So how to properly show this confirm message when user checks the checkbox?

@A.ANoman I tried it, but still does not show confirmation message — , Aug 22 '21 at 04:24
You can follow this link https://stackoverflow.com/questions/833032/submit-is-not-a-function-error-in-javascript — A.A Noman, Aug 22 '21 at 04:53
`$flag = $(this).attr('data-flag');` it contains what value `0 or 1`? console your `$flag` data — A.A Noman, Aug 22 '21 at 06:11

score 2 · Accepted Answer · answered Aug 22 '21 at 05:16

2

First of all you said you are working with sweetalert2, but the code that you write for alert is for sweetalert not for sweetalert2. the syntax is different for both.

Try this Code, this should work :

<form id="from1" data-flag="0" action="" method="POST">
@csrf
    <input type="checkbox" id="checkbox" name="wallet_checked">
    <label>checkbox</label>
</form>

<script>

    $(function(){
        $('#checkbox').on('change',function(){
            let flag = $('#from1').attr('data-flag');
            if(flag == 0){

                Swal.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: '#DD6B55',
                    confirmButtonText: 'Yes, I am sure!',
                    cancelButtonText: "No, cancel it!",
                    closeOnConfirm: false,
                    closeOnCancel: false
                }).then((result) => {
                    if (result.isConfirmed) {
                        Swal.fire("Shortlisted!", "Transaction successfully created", "success");
                        // update the data-flag to 1 (as true), to submit
                        $('#from1').attr('data-flag', '1');
                        $('#from1').submit();
                    } else {
                        Swal.fire("Cancelled", "Transaction didn't submitted", "error");
                    }
                })
            }
        });
    });
        
</script>

answered Aug 22 '21 at 05:16

Prince Paraste

56
1
7

What error are you getting ? What sweetalert cdn are you using ? – Prince Paraste Aug 22 '21 at 05:29
No error appears. It just do the action without showing any SweetAlert pop up message. – Aug 22 '21 at 05:31
Okay, 1st of all try to console.log(flag), Try to check if you are getting the flag value or not. and then try to use simple alert("test"); for now – Prince Paraste Aug 22 '21 at 05:34
I don't get anything any value as `console.log(flag)` ! – Aug 22 '21 at 05:38
I tried another code and it shows the SweetAlert pop message but now having some problem with `isConfirm`, plz check it out: https://stackoverflow.com/questions/68878812/sweetalert-isconfirm-does-not-work-properly – Aug 22 '21 at 05:44
the code that you write for alert is sweetalert not the sweetalert2. first decide which one do you want to use and change the cdn if you are using sweetalert via cdn – Prince Paraste Aug 22 '21 at 05:48
I have included `sweetalert2.css` at head of document but if this is not sweetalert2 code, how come it shows the pop up message box properly? – Aug 22 '21 at 05:50
Check the sweetalert2 documentation, how the define alert : Swal.fire('The Internet?','That thing is still around?', 'question') They use Swal.fire. Your code is just using Swal. Try to Replace your Sweetalert code with mine that i have posted. – Prince Paraste Aug 22 '21 at 05:57
And also there should be sweetalert2.js file too – Prince Paraste Aug 22 '21 at 05:58
I have checked the documentation and it seems like you're right. `Swal.fire` is for SweetAlert2 but to me, it does not work out, however `swal(` works correctly. I have also included `sweetalert2.js` as well. Sounds strange but thank u. – Aug 22 '21 at 06:04
Well in that case, i am not sure. May be try removing the sweetalert.css and js file. and use CDN thats in the sweetalert2 docs. there is only 1 script tag that u need to include if use CDN. no need to include cdn for css. – Prince Paraste Aug 22 '21 at 06:07

Sweet alert confirmation box does not seem to be working with form

1 Answers1