JavaScript确认自动提交表单

Question

我有一个Partial View，其中包含一个文件上传的文件输入框。用户在该视图上选择计算机中的文件并单击上传按钮。上传单击会将表单提交到操作方法并解析文件，然后返回相同的视图以自动填充视图上的几个字段。

一切正常工作完美。我正在向现有视图添加一个新要求，如下所示： 需求 用户选择文件并单击上传按钮。单击上传按钮后，将向用户显示一个JavaScript确认对话框，其中包含两个按钮选项，然后将表单提交给控制器操作方法。这些按钮是“Buffer Run Parsing”和“Normal Parsing”。单击任何一个按钮都会发布到控制器操作方法。

在控制器操作方法中，在提交后，我的目标是捕获他们按下的按钮，并根据按下的按钮选择文件解析逻辑。 问题 我创建了一个JavaScript函数显示了这两个按钮，但对话框框自动消失并且表单提交到控制器，我希望在确认之前不要发布。

我正在进行以下操作： Main View：

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

局部视图：

<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();
                }
            }
        });
    }

控制器：

   [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)
        {
}

- tam tam

---

你可以尝试使用 $("#hiddenInput").attr("value", "Normal") 替换 $("#hiddenInput").val("Normal"); 我知道它们的作用是相同的，但最近我遇到了这样的情况，必须做出这样的更改。 - prakashpoudel

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()函数；相反，它试图将按钮元素用作函数！

这是您代码的可运行的 jsFiddle 示例。

---

一点历史：由于万能的Internet Explorer，设置了name属性的元素会自动转换为JavaScript直接访问的对象（或子对象）。尽管这最初是IE团队几年前考虑出来的（没有遵循JavaScript/EMCA标准），但由于大量遗留网站的存在，WebKit（Chrome、Safari）和Gecko（Firefox）也实现了同样的错误行为。

- Jesse

---

嗨Jesse，之前我没能及时上线，感谢你的解决方案。我已验证您的方案并且它有效！最终我添加了另一个提交按钮以上传文件，用户也可以接受。至少我从您的方案学到东西了。 - tam tam

很高兴能帮到你 - 现在你知道为什么不能给元素起与函数相同的名称了。=) - Jesse

Answer 2

我看到有两种解决方案。首先，如果您只想使用现有的所有内容，请尝试将onclick="initUploadDailog();return false;"更改为onclick="return initUploadDailog();"。然后我认为您的浏览器会在提交表单之前等待true或false的返回。

但是，如果您想按照jQuery的意图使用它，您需要查看jQuery的event.preventDefault()。首先，给您的按钮一个ID，例如id="art-button"。接下来，将您的函数更改为绑定到按钮点击（我喜欢使用.bind而不是.click以确保浏览器兼容性）。

将这个改变：

function initUploadDailog(e) {
    // Your code
}

将此转换为中文：

$("#art-button").bind('click', function(e) {
    e.preventDefault();
    // Your code
    $("#form-id").submit();
});

您还可以绑定到实际的表单提交，阻止默认行为，并使用AJAX发布您的数据。

- jon__o

Answer 3

有几件事情你需要做。

首先，将Modal设置为true。false表示它不会阻止用户除了框之外的页面上其他东西的点击。

其次，你需要改变提交按钮上的onclick以包括;return false;。它应该读作：onclick=initUploadDailog();return false;" 这将防止表单在点击提交按钮后简单地提交。

第三，对话框本身需要在选择适当的按钮后提交表单。参见这里：jquery dialog: confirm the click on a submit button

- NotMe

---

谢谢，我已经按照你建议的更改正确了我的代码，并在上面的问题中进行了修改。我确实打开了模态框，但我认为按钮点击根本找不到表单，所以它无法提交。不过点击事件还是可以正常工作的。 - tam tam