coderunner coderunner - 3 months ago 22
Ajax Question

Overriding default alert and confirm boxes

I am working on submitting a form using the traditional submit button and not ajax.(Some framework dependency is not allowing it)

I want to use the confirm box before the user submits the form.

<!DOCTYPE html>
<html>
<head>
<!-- <link type="text/css" src="http://localhost/maverick/craftpip/dist/jquery-confirm.min.css">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://localhost/maverick/craftpip/dist/jquery-confirm.min.js"></script> -->

<!-- CSS dependencies -->
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">


<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>

<!-- bootbox code -->
<script src="http://localhost/maverick/bootbox-master/bootbox.js"></script>
<script type="text/javascript">

$(document).on('submit', $('#form1'), function(){


alert("works!!!");

bootbox.alert("Hello world!", function() {
console.log("Alert Callback");
return false;
});

});

</script>
</head>
<body>

<form name="test" action="" type="" id="form1">
<input type="text" name="message" />
<input type="submit" name="Enter" value="Enter" id="mySubmit" />
</form>

</body>




The default confirm and alert box works but the bootbox which is a wrapper around it fails and the form is submitted without confirming.
How can I override the default behavior with the wrapper one?

Answer

To submit after confirm/alert add some variable as state of confirming.

 var confirmed=false;//our state of alert/confirm
 $(document).on('submit', '#form1', function(e){


         if (!confirmed)
         e.preventDefault();//if not confirmed submit is blocked

         bootbox.alert("Hello world!", function() {

            //ok we confirmed/alert was shown
            confirmed=true;//set state on true

            //run again
            $('#form1').submit(); //trigger form again

         });

});

So on first submit fire we get submit stop by e.preventDefault and alert will be shown, after alert - confirmed is set to true and next submit is triggered - then form will be submited because confirmed is true and e.preventDefault is not called.

Comments