Post back is made before bootbox.confirm is called

Question

My goal is to click a button and upon click show a confirm box using bootbox. If I select ok it should postback, if I click cancel it should do nothing. Currently, when I click the button it posts back before showing the confirm box, so it appears then immediately disappers.

Script

<script>
    function DeleteDeliverables(e,myform) {
    e.preventDefault();


    bootbox.confirm("Are you sure you would like to delete the selected deliverables? They will be permanently deleted", function (result) {
        if (result) {
            var deliverables = "";
            var cbs = document.getElementsByTagName('input');
            for (var i = 0; i < cbs.length; i++) {
                if (cbs[i].type === 'checkbox') {
                    if (cbs[i].checked) {
                        deliverables += cbs[i].value + ',';
                    }
                }
            }
            deliverables = deliverables.replace(/,\s*$/, "");
            document.getElementById("hiddenDeliverable").value = deliverables;
            myform.submit();
        }

    });

    }
</script>

Button

<input type="submit" name="submitButton" class="btn btn-default" value="Delete" onclick="DeleteDeliverables(event,this.form)" /></td>

Postback

[HttpPost]
    public ActionResult DeliverableManagement(string submit, DeliverableManagementModel model)
    {

         //omitted
    }

Answer 1

You left out the argument when you call DeleteDeliverables() . It should be:

onclick="DeleteDeliverables(event)"

If you check your Javascript console, you'll probably see an error because undefined.preventDefault is not a function. Since you're not preventing the default action, clicking on the submit button submits the form.

You also need to put

document.getElementById("formID").submit();

in the bootbox.confirm() callback function, since preventDefault prevents the normal form submission.

Finally, for that to work, you need to use a different name for the submit button. Change name="submit" to something like name="submitButton" . Otherwise, document.getElementById("formID").submit will refer to the button (because input names are properties of the form), not the function that submits the form.