CODEWITHSUNDEEP
jquerysweetalert2
danjbh
danjbh

Reputation: 615

Prevent default on form submit with sweet alert

I am trying to add in a final check before submitting a form with SweetAlert 2's confirmation box.

The form button is type submit, I am at a stage where I have prevented the default but it will not submit from the confirmation box:

UPDATE

$('#btn-submit').on('click', function(e){
    e.preventDefault();
  swal({   
    title: "Are you sure?",
    text: "You will not be able to recover this lorem ipsum!",         type: "warning",   
    showCancelButton: true,   
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Yes, delete it!", 
    closeOnConfirm: false 
  }, 
    function(){   
    $("#form-loader").submit();
  });
})

The issue I face now is that the delete button just closes the alert and resumes back to the previous screen without submission

<form method="POST" action="#" accept-charset="UTF-8" id="form-loader"><input name="_method" type="hidden" value="DELETE">
<input name="_token" type="hidden" value="Yl8jdQ8dzxPmbxMcdF7coS9bSxXsChXU2g1YHEq0">
<input class="delete-confirm" id="btn-submit" type="submit" value="Delete">
</form>

Upvotes: 2

Views: 4507

Answers (2)

gaetanoM
gaetanoM

Reputation: 42054

The form button is type submit, I am at a stage where I have prevented the default but it will not submit from the confirmation box:

According to the SweetAlert2 documentation you can test if the user clicked the confirm button:

.then((result) => {
    if (result.value) { // if confirm clicked....
       $('.delete-confirm').closest('form').submit(); // submit form
    }
})


$('.delete-confirm').on('click', (event) => {
    event.preventDefault()
    swal({
        title: 'Confirm',
        text: 'Are you sure to delete this instance?',
        type: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Delete',
        cancelButtonText: 'Cancel'
    }).then((result) => {
        if (result.value) {
            $('.delete-confirm').closest('form').submit();
        }
    });
});
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/sweetalert2.all.js"></script>


<form>
    <table>
        <tr>
            <th>Company</th>
            <th>Contact</th>
            <th></th>
        </tr>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
            <td><input type="submit" class="delete-confirm" value="delete?"></td>
        </tr>
        <tr>
            <td>Centro comercial Moctezuma</td>
            <td>Francisco Chang</td>
            <td><input type="submit" class="delete-confirm" value="delete?"></td>
        </tr>
        <tr>
            <td>Ernst Handel</td>
            <td>Roland Mendel</td>
            <td><input type="submit" class="delete-confirm" value="delete?"></td>
        </tr>
    </table>
</form>

Upvotes: 3

Limon Monte
Limon Monte

Reputation: 54439

You forgot to pass the event parameter to the callback:

$('.delete-confirm').on('click', (event) => {
//                                ^^^^^

Upvotes: 3

Related Questions