Bootbox.js Confirm choice before submitting form

bootbox, jquery, laravel, php

Solution

Adding e.preventDefault() in the onClick handler will prevent the form submission.

<script>
  $(document).ready(function() {
    $(document).on("click", ".alert", function(e) {
        e.preventDefault();
        bootbox.confirm("Are you happy with the decision you have made?", "I have changed my mind", "I am happy with my choice", function(result) {
        if (result) {
          console.log("user confirmed");
        } else {
            console.log("user declined");
        }
      });
    });
  });
</script>

Problem

Hello I have decided to use Bootbox.js as a simple way to incorporate a bootstrap modal so that I can make the user confirm their choice before the form is posted and the changes are made. I am using Laravel, jQuery, Bootstrap and Bootbox.js in my default layout file: Layout.blade.php ``` <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"></script>')</script> <script src="js/plugins.js"></script> <script src="js/main.js"></script> <script src="js/vendor/bootstrap.js"></script> <script src="js/vendor/modernizr-2.6.2.min.js"></script> <script src="js/vendor/bootbox.js"></script> ``` User Page: ``` {{Form::open('choice')}} @foreach($items as $item) <tr> <td>{{ HTML::image($item->image, '', array('class' => 'img img-rounded', 'width' => '100px', 'height' => '100px')) }}</td> <td>{{$item->name}}</td> <td>{{ $item->desc }}</td> <td>{{ Form::radio('item', $item->item_id)}}</tr> @endforeach </tbody> </table> {{ Form::submit('Confirm Choice', array('class' => 'btn btn-success btn-block')) }} <script> $(document).ready(function() { $(document).on("click", ".alert", function(e) { bootbox.confirm("Are you happy with the decision you have made?", "I have changed my mind", "I am happy with my choice", function(result) { if (result) { console.log("user confirmed"); } else { console.log("user declined"); } }); }); }); </script> {{Form::close()}} ``` I do not know how to make the modal appear before and prevent submission. But only post if the user has confirmed their choice?

Original source