jquery - JavaScript确认是自动发布表单

Question

我有一个部分 View ，其中包含用于上传文件的文件输入。此 View 上的用户将从其工作站选择一个文件，然后单击上传按钮。上传点击将表单提交给操作方法，并解析文件并返回相同的 View 以自动填充 View 上的一些字段。

一切按原样运行，运行完美。我向现有 View 添加一个新要求，如下所示:

要求

用户选择一个文件并单击上传按钮。单击上传按钮后，将向用户显示一个 JavaScript 确认对话框，其中包含两个按钮选项，然后将表单提交给 Controller 操作方法。这些按钮是“Buffer Run Parsing”和“Normal Parsing”。单击这些按钮中的任何一个都将发布到 Controller 操作方法。

在发布后的 Controller 操作方法中，我的目标是捕获他们按下的按钮，并根据按下的按钮相应地选择文件解析逻辑。

问题

我创建了一个 JavaScript 函数，它确实显示两个按钮，但对话框会自动消失，并且表单会发送到 Controller 。我希望在我点击任一按钮进行确认之前它不会发布。

这就是我正在做的事情:

主视图:

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

部分 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 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

恭喜!您遇到了一个非常隐蔽的错误，并且很难排除故障!

问题出在你的标记上；您的按钮具有属性name="submit"。删除它，如图所示:

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

当您调用currentForm.submit()时，它不是调用原生form.submit()函数；它尝试将按钮元素用作函数!

这是一个working jsFiddle您的代码。

<小时/>

一点历史:由于强大的 Internet Explorer，设置了 name 属性的元素会自动转换为可直接通过 JavaScript 访问的对象(或子对象)。这最初是 IE 团队多年前想到的(虽然不遵循 JavaScript/EMCA 标准)，并且由于大量的遗留网站，WebKit(Chrome、Safari)和 Gecko(Firefox)已经实现了相同的破损行为。