Confirming a form submission with a custom model popup

Question

I have some delete forms in my app that I want to confirm with javascript/jQuery before submission.

The easy way is to do this:

$('form.confirm-form').submit(function(){
    return confirm('Are you sure?');
});

Which brings up a borwser-native confirmation box and only submits the form if the user clicks OK.

For something prettier I thought I use a Bootstrap modal for the confirm and checked out the Bootbox.js library for this.

I can't seem to get it working properly as it requires a callback and does not prevent the form from submitting. So I use preventDefault to stop the form submitting prematurely but now

I can't dismiss the modal with the cancel button, and
the OK button fails to submit the form.

Here's my code:

$('form.confirm-form').submit(function(event) {
    event.preventDefault();
    bootbox.confirm("Are you sure?", function(result){
        return result;
    });
});

How can I replicate the behaviour of the native confirm with this library?

score 5 · Answer 1 · edited May 23 '17 at 12:01

I was struggling with this on a create form, and the solution is actually very easy and doesn't require any JavaScript at all (if you're using JQuery and Bootstrap already).

All you need to do is change the submit button (button type="submit") to a generic button (button type="button") that triggers a Boostrap modal. More on button actions here: https://stackoverflow.com/a/9643866.

Then have the button inside the Boostrap modal actually submit the form. If you keep your modal HTML inside the form, you don't need to write a line of JS.

JS Bin: https://jsbin.com/lulipubafo/edit?html,output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
  <title>JS Bin</title>
</head>
<body>
<form action="/page" method="post">
  <input type="text" name="first_name">
  <button type="button" class="btn btn-default" data-toggle="modal" data-target="#confirm-submit">Submit</button>
  <div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h2 class="modal-title">Confirm</h2>
        </div>
        <div class="modal-body">
          <p>Are you sure you want to submit?</p>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-success">Yes, Submit</button>
          <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</form>
</body>
</html>

score 2 · Accepted Answer · edited May 23 '17 at 11:53

2

Try this FOUND HERE

$('form.confirm-form').submit(function(event) {

    var currentForm = this;
    event.preventDefault();
    bootbox.confirm("Are you sure?", function(result){
        if(result)
         {
   currentForm.submit()
         }
    });
});

edited May 23 '17 at 11:53

Community

1
1

answered Mar 14 '14 at 10:49

Nitin Varpe

10,450
6
36
60

thanks, yes as soon as I posted my question I found the answer in the sidebar. Extensive googling prior yielded no results... – harryg Mar 14 '14 at 10:51
1

`currentForm.submit()` must not be replaced with`$(currentForm).submit()` because it will cause recursive call to `submit` handler. – tchelidze Jan 11 '17 at 10:58

Confirming a form submission with a custom model popup

2 Answers2