jQuery 的 $(form).submit() 仅针对 IE 不触发（MVC3 应用程序）

Question

我一直在互联网上搜索（包括 SO），但找不到任何可以帮助我解决我的情况的东西，所以希望我能从你们那里得到一些帮助。

基本上，正如标题所说，.submit() 不会在 IE 中触发。所有其他浏览器都可以正常工作，但在 IE（目前为 8、9、10）中它不会触发提交。

查看代码如下：

        <form id="@formId" method="post" enctype="multipart/form-data" action="@Url.Content("/ActivityEvent/SubmitCheckpointApproval")">
            <table id="checkpoint-approval" style="width:100%" align="center" class="noBorders">
                <tr>
                    <td style="width: 520px;">
                        <div>
                            Please enter any relevant comments:
                        </div>
                        <div style="margin: 10px 0;">
                            <textarea class="wysiwygSimple" rows="4" cols="60" name="comment" id="checkpoint-comment-@(actTplId)"></textarea>
                        </div>
                    </td>
                    <td style="border: 0; padding-top: 30px; text-align: center; width:70px;">
                        <img alt="key" src="/Content/Images/checkmarkInCircle.png" align="middle" style="width: 100px;
                            height: 100px;" /><br />
                        <p style="text-align: left; margin-top: 10px;">
                            The notes and resources entered here are shared with the student.</p>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" class="ResourcesUploadList">
                        Suggest some resources:<br />
                        <div style="float: left;">
                            <input class="Multi" type="file" name="resourceFiles[]" /></div>
                        <div style="float: left; margin-left: 10px; font-style: italic;">
                            (click browse for each file you want to upload)</div>
                        <div style="clear: both;">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="border: 0; text-align: center; width:600px;" colspan="2">
                        @if (hasAdminRights)
                        {
                            <input type="button" @Html.Raw(btnStyle) class="activityApprove" name="actionApprove" id="actionApprove" value="Tutor Completion Approval" title = "Approves all activities preceding this checkpoint as complete." onclick="Activity.submitCheckpointApproval('@(formId)', '@(ActivityEvent.EVENT_TYPE_APPROVED)',@(actTplId));" />
                            <input type="button" @Html.Raw(btnStyle) class="activityAttention" name="actionAttention" id="actionAttention" value="Needs Attention" title = "Notifies the student that this project needs additional work prior to completion." onclick="Activity.submitCheckpointApproval('@(formId)', '@(ActivityEvent.EVENT_TYPE_NEEDS_ATTENTION)',@(actTplId));" /> 
                        }
                        <input type="button" @Html.Raw(btnStyle) value="Cancel" title = "Close this." onclick="javascript:$('#checkpoint-approval@(actTplId)').toggle();" />
                    </td>
                 </tr>
            </table>
        </form>

当按钮被点击时：

Activity = {

submitCheckpointApproval: function (formId, activityEventStatusId, activityTemplateId) {
    var resultsDivId = $("#checkpointResults" + activityTemplateId);
    Activity.showCheckpointLoading(resultsDivId); //Just shows a spinner for loading
    $("#checkpoint-activityEventStatusId-" + activityTemplateId).val(activityEventStatusId);
    $("#" + formId).submit(); //PROBLEM IS HERE??
},
...
};

最后是控制器：

    [HttpPost]
    [ValidateInput(false)]
    public ActionResult SubmitCheckpointApproval()
         //Save everything in here
    }

在 IE 中调试时，我进入 js 中的 .submit() 行，然后从那里运行它。在此之前的一切工作都很好，但随后 .submit() 来了，它停止做任何事情。没有 javascript 错误，控制台中没有任何内容，根本没有任何问题的迹象。 在所有其他浏览器中， .submit() 触发得很好，控制器会中断被调用的方法。

关于为什么在 IE 中会发生这种情况有什么想法吗？我敢肯定有人以前遇到过这个！请帮忙，我整个下午都在把头从桌子上敲下来！

谢谢大家！

Answer 1

您可能最适合尝试在 jQuery 中使用 $.trigger() 函数。

调用它的方式与你调用.submit()的方式类似：

$('#' + formId).trigger('submit');

祝你好运！

还有

IE中存在一个bug，如果没有，表单将无法正确提交

 <input type="submit" value="Submit" /> element. 

尝试添加一个并用 CSS 隐藏它。

Answer 2

您能否告诉我您正在直接使用文件上传控件或其隐藏控件，并且您正在另一个按钮控件上触发/调用它？ 其实我有同样的问题。我的客户希望我们显示一个精美的按钮来作为文件上传控件。因此，我们添加了一个可见性为 false 的按钮和文件上传控件，在按钮单击时，我们触发了文件上传单击事件，并且在 jquery 的帮助下，我们获取了文件的路径并将其保存在数据库中。除了 IE 之外，所有浏览器中的一切都运行良好，因为表单没有像您解释的那样在 IE 中提交。经过非常努力的工作，我们找到了解决方案，解决方案是 我们显示了文件上传控件，并通过设置其位置并将其准确放置在按钮顶部并应用 css 不透明度：0。所以现在文件上传是不可见的，因为不透明度为 0，但是当用户点击花哨的按钮时，他/她实际上点击了文件上传，因为它放在按钮的顶部。 在此解决方案之后，它在每个浏览器中都像魅力一样工作。希望这对您也有帮助。

Answer 3

您可以在要发送的表单中创建输入提交，然后通过 Jquery 单击按钮。

它在 IE 上运行良好。

例如：

<form id="@formId" method="post" enctype="multipart/form-data" action="@Url.Content("/ActivityEvent/SubmitCheckpointApproval")">
<input type="submit" class="HiddenBtn" />
</form>

还有 JS：

$(".HiddenBtn").click();

Answer 4

我遇到了类似的错误。我的解决方案是：

将 JS 表单附加到 DOM 中的 div 中，这样 IE 就知道它在那里并可以提交它。

希望对你有帮助

Answer 5

您需要将按钮/输入的类型设置为submit，如下所示：

<button type="submit">Submit</button>

<input type="submit" value="submit">Submit</button>

Answer 6

我遇到了同样的问题，只在 IE 10 和 IE 11 中。对我来说，解决方案是先用以下代码附加表单：

document.documentElement.appendChild(form); 

我把那一行放在提交函数之前

form.on("submit", function (event) {
            event.preventDefault();
...more code
)}

Answer 7

IE11 的确切问题，至少是我的构建，导致 MS “你永远一无所知”，如果你允许我进行街头谈话的话。

是，当你创建这样的表单元素时

var formX = $(document.createElement('form'));

并最终添加一些像这样的字段

field1=$("<input type='hidden' id='myid' name='myid' value='whatever' />");
formX.append(field1);

元素并没有真正添加到DOM中，它仍然存在于一些开发者炼狱中，等待你最终将它添加到DOM中

$("#formdiv").append(formX);

正如 Arturo Igualada 上面评论的那样，您可以将其添加到 HTML 中的某个 div 中，在我的示例中，id formdiv

最重要的是，即使通过将动态表单附加到某个 DIV 来添加该元素，也不会在 DOM 中找到该元素。至少如果您使用 JQuery，因为常规选择器会在您加载页面时查找 DOM 中存在的元素。因此，您将需要使用某种选择来再次遍历 DOM 以搜索新添加的元素。我使用了 find，虽然我猜想使用 .on 也应该可以。

$(document).find(formX).submit();