Use bootbox.confirm in jquery.validate submitHandler

Question

I got a problem when I'm using bootbox in jquery.validate, if I put bootbox.confirm into submitHandler, the submit button's value will be lost in the backend

JS code:

$(function () {
        $("#userForm").validate({
            submitHandler: function (form) {
                bootbox.confirm('are you sure?', function (result) {
                    if (result) {
                        form.submit();
                    }
                })
            }
        });
    })

data got in backend:

Array
(
    [username] => james
)

if I remove the bootbox.confirm, like:

$(function () {
        $("#userForm").validate({
            submitHandler: function (form) {
                    form.submit();
            }
        });
    })

it shows:

Array
(
    [username] => james
    [submitButton] => Submit
)

Anyone knows why and how to solve this problem? Thanks a lot.

Sparky · Answer 1 · 2019-01-08T05:12:25.827

In your second example, the form is submitted via button. However, in your first example, the form is submitted programmatically only after confirming dialog box, so your submit button is no longer involved, which is why it never shows up on the server.

You can retrieve and copy this value to a hidden field when it’s clicked and the form is valid.

$(function () {
    $("#userForm").validate({
        submitHandler: function (form) {

            // copy value of button into hidden field
            $('#submitButtonValue').val($('#submitButton').val());

            bootbox.confirm('are you sure?', function (result) {
                if (result) {
                    form.submit();
                }
            })
        }
    });
});

HTML markup:

<form id="userForm'>
    <input type="hidden" name="submitButtonValue" id="submitButtonValue" value="" />

    ....

    <input type="submit" name="submitButton" id="submitButton" value="Submit" />
</form>

At that point, you should get this:

Array
(
    [username] => james
    [submitButtonValue] => Submit
)

Although, it's very unclear why you would need any of this in the first place. If it's going through the submitHandler can't we automatically assume the submit button was clicked? If that's the case, seems pointless to copy the value of the submit button into the hidden field.

Use bootbox.confirm in jquery.validate submitHandler

1 Answers1