MVC post losing values when submitted via javascript

Question

I have an MVC form with a submit button:

 <form method="POST" id="submitProject" action="@Url.Action(SubmitProject, "ProjectSummary")">
                <button type="submit" name="submitButton" id="submitProject" value="saveToProposed" class="btn btn-primary">Submit Project</button>
            </form>

But when a user clicks on that button i want to show them a confirmation dialog before the post goes on its way:

 $('#submitProject').submit(function (e) {
        var currentForm = this;
        e.preventDefault();
        bootbox.dialog({
            message: "Approve or Reject",
            title: "Project Approval",
            buttons: {
                success: {
                    label: "Approve",
                    className: "btn-success",
                    callback: function () {
                        alert("Approved");
                        currentForm.submit();
                    }
                },
                danger: {
                    label: "Reject",
                    className: "btn-danger",
                    callback: function () {
                        alert("Rejected");
                        currentForm.submit();
                    }
                },
                main: {
                    label: "Cancel",
                    className: "btn-primary",
                    callback: function () {
                        return true;
                    }
                }
            }
        });
    });

in my controller i am trying to trap the value of the submit button like this:

 [HttpPost]
        public ActionResult SubmitProject(ProjectModel m, string submitButton)
        {
}

if i do not have that preventDefault line in there i can see the value of the submitButton in the controller. With the preventDefault the value is always null. this is something i have been struggling with for some time as i try to learn MVC. if i didn't have any client side interaction i would be fine. But trying to get js to play with mvc is giving me hearburn. what am i doing wrong?

A submit buttons value is only posted back when that submit button is clicked. You are cancelling the default action and calling currentForm.submit(); which will not include the value of the submit button. — user3559349
– user3559349, Commented May 17, 2016 at 1:59
that makes sense. but what recourse do i have? i have multiple submit buttons on this form and i need to know which was clicked, but i also need that confirm dialog — VBAHole
– VBAHole, Commented May 17, 2016 at 2:01
You can just handle the .submit() event but in the function call return false if you want to cancel it (i.e if the 'Cancel' button is clicked) or return true to let the normal submit happen (and remove e.preventDefault();) — user3559349
– user3559349, Commented May 17, 2016 at 2:05

score 1 · Accepted Answer · 2016-05-17 05:03:28Z

A form only posts back the name/value pair of its submit button that was clicked. In your case your cancelling the buttons .click() event and then calling the .submit() function (i.e. the submit is no longer triggered by the click so its value is not sent in the request).

Rather than calling e.preventDefault();, call a function that returns true or false, in the same way that you can use the javascript .confirm() function to cancel the form submission (i.e. return confirm("...");

function confirmSubmit()
{
    bootbox.dialog({
        ....
        // for the success and danger buttons - return true;
        // for the main button - return false

        buttons: {
            success: {
                label: "Approve",
                className: "btn-success",
                callback: function () {
                    return true;
                }
            },
            ....
    });
}

$('#submitProject').submit(function (e) {
    return confirmSubmit();
});

Side note: your form only has one submit button, so the value of string submitButton will only ever be "saveToProposed". Not sure if you omitted it from your code, but I assume you would really have at least 2 submit buttons.

Collectives™ on Stack Overflow

MVC post losing values when submitted via javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related