I'm trying to submit a form after confirming it using sweet alert. But, somehow my form is bypassing the sweet alert confirm (sent without confirmation).

What I am trying to do is.

• Press submit
• Show sweet alert
• IF yes is clicked = send form
• If cancel is clicked = close sweet alert

Here's my script

$("#btn_submit").on('click',function(e){ //also can use on submit
    e.preventDefault(); //prevent submit
    var jns_srt = $("#i_dok").val();

    swal({
        title: "Are you sure?",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes!",
        cancelButtonText: "Cancel",
        closeOnConfirm: true
    }, function () { 
        //I don't know what to write here. 
        });
});

 <form name="frm_input" id="frm_input_srt" method="post" action="<?php echo site_url('Admin/rekam_srt_msk'); ?>">
<table>
 <tr><td colspan="3" style="text-align:left; padding:0; vertical-align:middle"><input type="text" name="test" /></td></tr>
            <tr>
                <td colspan="3" style="text-align:center; padding:0; vertical-align:middle">
                    <input type="reset" id="btn_reset" name="btn_reset" class="btn btn-danger" value="Reset">
                    &nbsp;||&nbsp;
                    <input type="submit" id="btn_submit" name="btn_submit" class="btn btn-success" value="Save">
                </td>
            </tr>
            </table>
 </form>

I'm trying to submit a form after confirming it using sweet alert. But, somehow my form is bypassing the sweet alert confirm (sent without confirmation).

What I am trying to do is.

• Press submit
• Show sweet alert
• IF yes is clicked = send form
• If cancel is clicked = close sweet alert

Here's my script

$("#btn_submit").on('click',function(e){ //also can use on submit
    e.preventDefault(); //prevent submit
    var jns_srt = $("#i_dok").val();

    swal({
        title: "Are you sure?",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes!",
        cancelButtonText: "Cancel",
        closeOnConfirm: true
    }, function () { 
        //I don't know what to write here. 
        });
});

 <form name="frm_input" id="frm_input_srt" method="post" action="<?php echo site_url('Admin/rekam_srt_msk'); ?>">
<table>
 <tr><td colspan="3" style="text-align:left; padding:0; vertical-align:middle"><input type="text" name="test" /></td></tr>
            <tr>
                <td colspan="3" style="text-align:center; padding:0; vertical-align:middle">
                    <input type="reset" id="btn_reset" name="btn_reset" class="btn btn-danger" value="Reset">
                    &nbsp;||&nbsp;
                    <input type="submit" id="btn_submit" name="btn_submit" class="btn btn-success" value="Save">
                </td>
            </tr>
            </table>
 </form>

• javascript
• php
• jquery
• forms
• sweetalert

Share Improve this question Follow edited Feb 26, 2017 at 3:25 Vahn asked Feb 26, 2017 at 2:43 VahnVahn 54211 gold badge1010 silver badges2525 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 1

you can get your form element by Id then submit.

document.getElementById("frm_input_srt").submit();

or jquery way

$("#frm_input_srt").submit();

The documentation shows how to run different code on cancel and confirm. Straight from their site:

swal({
  title: "Are you sure?",
  text: "You will not be able to recover this imaginary file!",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes, delete it!",
  cancelButtonText: "No, cancel plx!",
  closeOnConfirm: false,
  closeOnCancel: false
},
function(isConfirm){
  if (isConfirm) {
    swal("Deleted!", "Your imaginary file has been deleted.", "success");
  } else {
    swal("Cancelled", "Your imaginary file is safe :)", "error");
  }
});

For your code:

$("#frm_input_srt").submit( function () {
    var jns_srt = $("#i_dok").val();

    swal({
        title: "Are you sure?",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes!",
        cancelButtonText: "Cancel",
        closeOnConfirm: true
    }, function(isConfirm){
      if (isConfirm) {
        return true;
      } else {
        return false;
      }
    });
});

 }, function () { 
 //to submit:
 document.getElementById("frm_input_srt").submit();
 });

Use this:

$("#btn_submit").on('click',function(e){ //also can use on submit
    e.preventDefault(); //prevent submit
    var jns_srt = $("#i_dok").val();

    swal({
        title: "Are you sure?",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes!",
        cancelButtonText: "Cancel",
        closeOnConfirm: true
    }, function (getAction) { 
if (getAction.value === 'true') {
        // Insert code that will be run when user clicks Ok.
        });
});

This is your answer

("#btn_submit").on('click',function(e){ //also can use on submit
e.preventDefault(); //prevent submit
swal({
    title: "Are you sure?",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Yes!",
    cancelButtonText: "Cancel",
    closeOnConfirm: true
}
}).then(function(value) {
    if (value) {
      $('#frm_input_srt').submit();
    }
});

UPD: 2021

$("#frm_input_srt")
.submit(async () => {
    const jns_srt = $("#i_dok").val();

    const result = await swal({
        title: "Are you sure?",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes!",
        cancelButtonText: "Cancel",
        closeOnConfirm: true
    });
    
    if(!result.isConfirmed)
        event.preventDefault();
});