CODEWITHSUNDEEP
javascriptjquerylaravelsubmitsweetalert
user16723850
user16723850

Reputation:

Sweetalert still submit the form after clicking Cancel button

I have a Laravel 5.8 project with using sweetalert.js.

And I have a form like this:

<form id="myForm" action="{{ route('acceptWallet') }}" method="POST">
   @csrf
   <input type="checkbox" id="btn-submit" name="wallet_checked" onchange="this.form.submit();">
</form>

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

Then by using this script, I tried showing SweetAlert confirmation message box, containing Yes and No as buttons:

$(document).on('click', '#btn-submit', function(e) {
    e.preventDefault();
    let form = $(this).parents('form');
    swal(
        {
        title: "Attention!",
        text: "Are you sure you want to make this transaction",
        type: "warning",
        allowEscapeKey: false,
        allowOutsideClick: false,
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes",
        cancelButtonText: "No",
        showLoaderOnConfirm: true,
        closeOnConfirm: false
    }).then((isConfirm) => {
        if (isConfirm) {
            document.getElementById("myForm").submit();
            return true;
        }
        return false;
    });
});

Now it works fine but the only problem is that, when I click on No button which is CancelButton, it still submit the form and call the Action.

So the question is, how can I reject the submit() when user press on No button?

Upvotes: 0

Views: 1477

Answers (5)

Preet Govind
Preet Govind

Reputation: 71

Using it with ASPNet MVC :- upon printing the console , it shows 

     Swal.fire({
                    title: 'Title of the sweetalert ?',
                    text: 'I'm using SweetAlert 2',
                    icon: 'info',
                    confirmButtonColor: '#3085d6',
                    showCancelButton: true,
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes',
                    cancelButtonText: 'No'
                }).then((isConfirm) => {
                    console.log(isConfirm);
                    if (isConfirm.isConfirmed === true) {
                    //Logic in case the user hits Yes button 
    }
});

Upvotes: 0

Showkii Paa
Showkii Paa

Reputation: 101

Do this.

Copy this Code

     <form class="sldier-form" action="{{ route('sliders.destroy', $slider->id) }}"  method="post">
      @csrf
      @method('DELETE')

      <button type="button" class="btn btn-danger btn-sm "  onclick="sliderDelete()">delete</button>
      </form>

// jquery script

    <script>
    function sliderDelete() {

        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            type: 'warning',
            showCancelButton: true,
            customClass: {
                confirmButton: 'btn btn-success',
                cancelButton: 'btn btn-danger'
            },
            buttonsStyling: false,
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            
            if (result.value == true) {
                
                $('.sldier-form').submit();
                Swal.fire(
                    'Deleted!',
                    'Your file has been deleted.',
                    'success'

                )
            }
        })
    }
</script>

Upvotes: 0

Ade Meridien
Ade Meridien

Reputation: 1

First of all you need to set flag on the form you want to trigger with SweetAlert :

<form id="myForm" action="{{ route('acceptWallet') }}" method="POST" data-flag="0">
    @csrf
    <input type="checkbox" id="btn-submit" name="wallet_checked">
    <input type="submit" value="Submit">
</form>

Then you trigger it with JS :

const form = $('#myForm');
form.submit(function(e) {
    if (form.attr('data-flag') == 0) {
        e.preventDefault();
        Swal.fire({
            title: 'Attention!',
            text: 'Are you sure want to make this transaction',
            icon: 'warning',
            confirmButtonText: 'Yes',
            cancelButtonText: 'No',
            showCancelButton: true
        }).then((res) => {
            if(res.isConfirmed) {
                form.attr('data-flag', '1');
                form.submit();
            }
        });
    }
});

It will prevent from submitting the form if you click No

Upvotes: 0

Morteza Amini
Morteza Amini

Reputation: 119

Try this code:

$(document).on('click', '#btn-submit', function(e) {
    e.preventDefault();
    let form = $(this).parents('form');
    swal(
        {
        title: "Attention!",
        text: "Are you sure you want to make this transaction",
        type: "warning",
        buttons: {
            cancel: 'No',
            defeat: {
                text: 'Yes',
                value: true
            }
        },
        closeOnConfirm: false
    }).then((isConfirm) => {
        if (isConfirm === true) {
            document.getElementById("myForm").submit();
        }
    });
});

Upvotes: 0

Morteza Amini
Morteza Amini

Reputation: 119

Change your code to:

$(document).on('click', '#btn-submit', function(e) {
    e.preventDefault();
    let form = $(this).parents('form');
    swal(
        {
        title: "Attention!",
        text: "Are you sure you want to make this transaction",
        type: "warning",
        allowEscapeKey: false,
        allowOutsideClick: false,
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes",
        cancelButtonText: "No",
        showLoaderOnConfirm: true,
        closeOnConfirm: false
    }).then((isConfirm) => {
        if (isConfirm === true) {
            document.getElementById("myForm").submit();
        }
    });
});

Upvotes: 1

Related Questions