Confirm form submission using bootbox.confirm()

Question

I have a form and want to intercept form submission to display a confirmation dialog using bootbox.

User enters some data
User hits submit
A confirmation dialog is shown

If the user hits OK, then the form should submit, if not it should just stay on the page.

I tried this:

$('#myForm').submit(function() {
    return bootbox.confirm("Are you sure?");
});

However, bootbox.confirm() immediately returns, the confirmation dialog is hidden again.

I then noticed that there is a callback parameter on bootbox.confirm(). However, if I'm to call $('#myForm').submit() from the callback, this will obviously just show the confirmation dialog again.

So what is the proper way to confirm form submission?

Btw, changing the submit button to an ordinary one and attaching the script there is no solution, because the user can still trigger form submission by pressing enter. — theDmi, Jul 03 '12 at 14:58

score 45 · Accepted Answer · answered Sep 20 '13 at 09:14

45

I only got this working by preventing the default form behaviour, here is the solution below. I'm using this in a list of forms, each one with a submit delete button and it works fine.

<script type="text/javascript">
    $('form').submit(function(e) {
        var currentForm = this;
        e.preventDefault();
        bootbox.confirm("Are you sure?", function(result) {
            if (result) {
                currentForm.submit();
            }
        });
    });
</script>

answered Sep 20 '13 at 09:14

Nuno Reis

574
5
5

3

Worked for me, without using currentForm it gets stuck in infinite loop, thanks for the help! – trueinViso Sep 28 '16 at 16:20
1

won't that show the confirmation dialog again, since you are calling `submit` and don't have a check around `bootbox`? – Mubashar Abbas Jul 28 '17 at 06:19

score 12 · Answer 2 · edited May 23 '17 at 12:02

12

As always: Just after you ask a question, you find the answer yourself :-) . See this answer: https://stackoverflow.com/a/2420806/219187 (also note the comment in the answer).

Adapted to my problem, the solution looks as follows:

$('#myForm').submit(function() {
    var currentForm = this;
    bootbox.confirm("Are you sure?", function(result) {
        if (result) {
            currentForm.submit();
        }
    });
});

edited May 23 '17 at 12:02

Community

1
1

answered Jul 03 '12 at 15:03

theDmi

17,546
6
71
138

so calling `currentForm.submit();` doesn't execute the jQuery code `$('#myForm').submit(function() {...` ?? – ScottC Jul 03 '12 at 16:58
No, doesn't seem to. But I'm not enough of a JS pro to tell you why :-) . – theDmi Jul 03 '12 at 18:12
3

$('#myForm').submit(function(e) { e.preventDefault(); ... had to add preventDefault – Rahul Jun 27 '13 at 13:45
This will submit your form without a confirmation. You need preventDefault() – alias51 Feb 11 '20 at 16:41

score 1 · Answer 3 · answered May 06 '14 at 12:56

This code works perfectly for me...

<script type="text/javascript">
$('#myForm').click(function(e) {
    e.preventDefault();
    var msg = 'Souhaitez vous vraiment supprimer ce produit ?';
    bootbox.confirm(msg, function(result) {
        if (result) {
            $('#myForm').submit();
        }
    });
});
</script>

score 1 · Answer 4 · answered Oct 11 '19 at 11:03

You can a solve this by passing additional parameters to your submit handler using the .trigger() method:

$('form').submit(function (e, confirmed) {
    var currentForm = $(e.currentTarget);
    if (!confirmed) {
        e.preventDefault();
        bootbox.confirm("Are you sure?", function (result) {
            if (result) {
                currentForm.trigger('submit', { confirmed: true });
            }
        });
    }
});

When the form is first submitted, the 'confirmed' parameter is undefined and the bootbox dialog is displayed. If the user confirms the action in the dialog, submit event is triggered again with the additional parameter and the form is submitted normally.

score 0 · Answer 5 · answered Aug 28 '14 at 09:42

0

My solution

@Html.ActionLink("Delete", "DeleteReport", new { id = item.Id }, new { @class = "btn btn-danger", onclick = String.Format("return ASE.ConfirmAction(this.href, 'Delete {0}?');", item.Name) })

var ASE = {
    ConfirmAction: function (href, text) {
        bootbox.confirm(text, function (result) {
            if (result)
                window.location = href;
        });

        return false;
    }
}

answered Aug 28 '14 at 09:42

Alexandr Sulimov

1,894
2
24
48

`window.location` execute a redirect, not a form submit. – Almalerik May 09 '17 at 15:27

Confirm form submission using bootbox.confirm()

5 Answers5

Linked