Jquery JavaScript确认将自动发布表单

我有一个局部视图，其中包含用于上载文件的文件输入。此视图中的用户将从其工作站选择一个文件，然后单击上载按钮。单击“上载”将表单提交到操作方法，并解析文件，返回相同的视图以自动填充视图上的几个字段

一切按原样进行，工作正常。我在现有视图中添加了一项新要求，如下所示：

要求

用户选择一个文件并单击上载按钮。单击上载按钮后，将向用户显示一个JavaScript确认对话框，其中包含两个按钮选项，然后再将表单提交给控制器操作方法。这些按钮是“缓冲区运行解析”和“正常解析”。单击这些按钮中的任何一个将发布到控制器操作方法

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

问题

我创建了一个JavaScript函数，它确实显示了这两个按钮，但是对话框会自动消失，表单会发布到控制器。我想它不张贴，直到我点击任何一个按钮确认

以下是我正在做的：

主视图：

@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>

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

控制器：

@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>

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

[HttpPost]
[接受动词（HttpVerbs.Post）]
公共操作结果创建（RunLogEntry RunLogEntry、String ServiceRequest、String Hour、String Minute、String AMPM、，
字符串提交、IEnumerable文件、字符串分析性能问题1、列表复制）
{
}

您需要做几件事

首先，将

Modal

设置为true。False表示它不会阻止用户单击页面上除框之外的其他内容

其次，您需要更改submit按钮上的

onclick

，以包括

；返回false它应该是
onclick=inituploadiailog（）；返回false；“
这将阻止表单在单击“提交”按钮后简单提交

第三，选择适当的按钮后，对话框本身需要提交表单。请参见此处：
恭喜！您遇到了一个非常模糊的错误，很难排除故障！

问题在于您的标记；您的按钮具有属性
name=“submit”
。请将其删除，如图所示：

上传

调用
currentForm.submit（）
时，它不是调用本机
form.submit（）
函数；试图将按钮元素用作函数

这是你的一段代码


有一点历史：由于全能的Internet Explorer，具有
名称
属性集的元素会自动转换为可直接通过JavaScript访问的对象（或子对象）。这是IE团队多年前最初想到的（但不遵循JavaScript/EMCA标准），并且由于大量的传统网站，WebKit（Chrome、Safari）和Gecko（Firefox）实现了相同的破坏行为。
我看到了两种解决方案。首先，如果您只是想按原样使用所有内容，请尝试更改您的
onclick=“inituploadialog（）；返回false；“
to
onclick=“return inituploadialog（）；“
。那么我想您的浏览器在发布表单之前会等待返回true或false

但是，如果您想按预期的方式使用jQuery，您需要查看jQuery。首先，为您的按钮指定一个ID，如
ID=“art button”
。接下来，将函数更改为绑定到按钮单击（我喜欢使用.bind vs.click以实现浏览器兼容性）

更改此项：

function initUploadDailog(e) {
    // Your code
}

为此：

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

您还可以绑定到实际的表单提交，避免使用默认值，并使用AJAX发布数据。
谢谢，我确实根据您建议的更改和上面的问题更正了代码。我确实打开了模式，但我相信按钮单击根本找不到表单，因此它不会提交。单击事件工作正常你能试着用$（“#hiddenInput”）.attr（“value”，“Normal”）替换$（#hiddenInput”）.val（“Normal”）；吗。我知道两者都是一样的，但最近我遇到了这样的情况，我不得不做出这样的改变。嗨，Jesse，我无法早点上线，谢谢你的解决方案。我已经验证了你的解决方案，它可以工作了！我最后添加了另一个提交按钮，用于上传文件，因为用户可以接受。至少我从你的解决方案中学到了一些东西。很高兴它有帮助-现在是您知道为什么不能为元素指定与函数相同的名称。=）