sweetalert confirm doesn't return false on form submit

Question

Similar question has been asked before but I did not find the replies useful to my requirement, hence this question.

Here is the form:

<form class="form-horizontal" role="form" method = "post" onsubmit = "return step1();" action = "index.php">
.....
<button type="submit" class="btn btn-primary btn-lg btn-block"><i class="fa fa-floppy-o"></i>  Save</button>
</form>

Here is the javascript function:

function step1() {

warn = "Some text";
swal({   title: "Warning!",   text: "warn+"\nDo you still want to save this?",   type: "warning",   showCancelButton: true,   confirmButtonColor: "#5cb85c",   confirmButtonText: "Yes!",   cancelButtonText: "Cancel!",   closeOnConfirm: false,   closeOnCancel: false }, function(isConfirm){   if (isConfirm) {     swal("OK!", "Will proceed.", "success"); return true;   } else {     swal("Cancelled", "You may edit it.", "error"); return false;   } });
}

Despite providing return false; when cancel button is clicked, the form gets submitted. How to make it work? Note: I am not comfortable with jquery.

Answer 1

You have to return from the step1() function in order to prevent the form from submitting.

You don't have any return statement there. Your return statement is in an anonymous function which looks like it gets passed as an argument (please format your code to make it readable!).

If you are going to represent your message using DOM manipulation (which is what I assume your library is doing) then you can't block the UI until you get a click.

The closest you could come would be to always prevent the form from being submitted, and then re-trigger the submission with JS when you got the OK click.