JavaScript confirmation is automatically posting form

Question

I have a Partial View which contains a file input for uploading files(s). A User on this view will select a file from their workstation and click the upload button. The upload click submits the form to an action method and the files are parsed and the same view is returned to auto-populate a few fields on the view.

Everything as is, is working perfectly. I am adding a new requirement to the existing view which is as following:

Requirement

User selects a file and clicks the upload button. Once the upload button is clicked, a JavaScript confirmation dialog is displayed to the users which contains two button options before the form is submitted to the controller action method. These buttons are "Buffer Run Parsing" and "Normal Parsing". Clicking any of these buttons will post to the controller action method.

In the controller action method upon post, My goal is to capture which button they pressed and based on the button pressed I select the file parsing logic accordingly.

The Problem

I created a JavaScript function which does display the two buttons but the dialog box automatically disappears and the form posts to the controller. I would like it to not post until I click either button with the confirmation.

Here is what I am doing:

Main View:

@using (Html.BeginForm("Create", "RunLogEntry", FormMethod.Post, new { id = "form", enctype = "multipart/form-data"}))
{
    <div id="main">
        @Html.Partial("_RunLogEntryPartialView", Model)
    </div>
}

Partial View:

<button name="submit" class="art-button" type="submit" value="Upload" onclick="initUploadDailog();return false;"
    style="width: 100px">
    Upload</button>

<div id="uploadConfirmation" style="font-size: 10px; font-weight: normal; overflow: scroll;
    width: 800px; height: 450px; display: none;">
</div>

JS Function:

 function initUploadDailog(e) {
        currentForm = $(this).closest('form');
        UploadDialog = $("#uploadConfirmation").dialog({
            modal: true,
            width: 400,
            autoOpen: true,
            title: 'Please select parsing type for Test Completed Computation',
            buttons: {
                "Normal Parsing": function () {
                    $("#hiddenInput").val("Normal");
                    alert(currentForm.innerHtml());
                    currentForm.submit();
                },
                "Buffer Parsing": function () {
                    $("#hiddenInput").val("Buffer Run");
                    currentForm.submit();
                }
            }
        });
    }

Controller:

   [HttpPost]
        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Create(RunLogEntry runLogEntry, String ServiceRequest, string Hour, string Minute, string AMPM,
                                     string submit, IEnumerable<HttpPostedFileBase> file, String AssayPerformanceIssues1, List<string> Replicates)
        {
}

Answer 1

Congrats! You've hit a very obscure bug and hard to troubleshoot!

The problem is with your markup; your button has the attribute name="submit". Remove it as shown:

<button class="art-button" type="submit" value="Upload" onclick="initUploadDailog();return false;" style="width: 100px">Upload</button>

When you call currentForm.submit(), it is not calling the native form.submit() function; it is trying to use the button element as a function!

Here's a working jsFiddle of your code.

---

A little bit of history: because of the almighty Internet Explorer, elements with the name attribute set are automatically turned into objects (or child objects) accessible directly through JavaScript. This was initially thought out by the IE team years ago (while not following JavaScript/EMCA standards), and because of the vast amount of legacy websites, WebKit (Chrome, Safari) and Gecko (Firefox) have implemented the same broken behavior.