javascript jQuery 的 $(form).submit() 不只为 IE 触发（MVC3 应用程序）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16201278/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery's $(form).submit() not firing for IE only (MVC3 app)
提问by SlackerCoder
I've been scouring the internet (including SO), and I can't find anything to help me out with my situation, so hopefully I can get some help from you guys.
我一直在搜索互联网（包括 SO），我找不到任何可以帮助我解决我的情况的东西，所以希望我能从你们那里得到一些帮助。
Basically, like the title says, the .submit() is NOT firing in IE. All other browsers work fine, but in IE (8, 9, 10 so far) it just doesn't fire the submit.
基本上，就像标题所说的那样，.submit() 不会在 IE 中触发。所有其他浏览器都可以正常工作，但在 IE 中（到目前为止是 8、9、10）它只是不触发提交。
Here's the view code:
这是视图代码：
<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>
When the buttons are clicked:
单击按钮时：
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??
},
...
};
And finally, the controller:
最后，控制器：
[HttpPost]
[ValidateInput(false)]
public ActionResult SubmitCheckpointApproval()
//Save everything in here
}
When debugging in IE, I get to the .submit() line in the js, and run it from there. Everything before that works just fine, but then the .submit() comes and it stops doing anything. No javascript errors, nothing in the console, no indication of any issues at all. In all other browsers, the .submit() fires just fine, and the controller breaks into the method being called.
在 IE 中调试时，我会到达 js 中的 .submit() 行，然后从那里运行它。在此之前的一切都很好，但随后 .submit() 来了，它停止做任何事情。没有 javascript 错误，控制台中没有任何内容，根本没有任何问题的迹象。在所有其他浏览器中， .submit() 触发得很好，并且控制器会中断被调用的方法。
Any thoughts as to why this is happening in IE? I'm sure someone has come across this before!! Please help, I've been banging my head off my desk all afternoon!
关于为什么在 IE 中发生这种情况的任何想法？我敢肯定有人以前遇到过这个！！请帮忙，我整个下午都在把头从桌子上撞下来！
Thanks guys!
多谢你们！
回答by Vianick Oliveri
I had a similar error. My solution was:
我有一个类似的错误。我的解决方案是：
Append the JS form to a div in the DOM, that way IE knows it is there and can submit it.
将 JS 表单附加到 DOM 中的一个 div，这样 IE 就知道它在那里并且可以提交它。
Hope it helps
希望能帮助到你
回答by Barry Chapman
You might be best suited to try using the $.trigger()function in jQuery.
您可能最适合尝试$.trigger()在 jQuery 中使用该函数。
Invoke it similarly to the way you are calling .submit():
以类似于您调用的方式调用它.submit()：
$('#' + formId).trigger('submit');
Good luck!
祝你好运！
Also
还
There is a bug in IE where the form will not submit properly if there is no
IE 中存在一个 bug，如果没有，则表单将无法正确提交
<input type="submit" value="Submit" /> element.
Try adding one and hiding it with CSS.
尝试添加一个并使用 CSS 隐藏它。
回答by Arturo Igualada
You can create an input submit inside the form that you like to send and by Jquery click on the button.
您可以在要发送的表单中创建一个输入提交，然后通过 Jquery 单击按钮。
It′s works well with IE.
它适用于 IE。
For example:
例如：
<form id="@formId" method="post" enctype="multipart/form-data" action="@Url.Content("/ActivityEvent/SubmitCheckpointApproval")">
<input type="submit" class="HiddenBtn" />
</form>
And the JS:
和 JS：
$(".HiddenBtn").click();
回答by Jitender Kumar
Can you please tell me that you are directly working with fileupload control or its hidden and you are triggering/invoking it on another button controls? Actually I had same issue. My client wanted that we display a fancy button to work as fileupload control. So we added a button and fileupload control with visibility false and on button click we were triggering the fileupload click event and with the help of jquery we were getting the path of the file and saving it in database. Everything was working perfect in every browser except IE as form was not getting submitted in IE like you explained. After working really hard we find the solution and solution was that we showed the fileupload control and placed it exactly on top the button by setting its position and applied the css opacity :0. So now file upload is not visible because of opacity 0 but when user clicks on the fancy button actually he/she clicks on fileupload as its placed on the top of button. After this solution its working like a charm in every browser. Hope this help you also.
你能告诉我你是直接使用 fileupload 控件还是它的隐藏控件，你是在另一个按钮控件上触发/调用它吗？其实我有同样的问题。我的客户希望我们显示一个漂亮的按钮作为文件上传控件。所以我们添加了一个可见性为 false 的按钮和文件上传控件，点击按钮时我们触发了文件上传点击事件，在 jquery 的帮助下，我们获取了文件的路径并将其保存在数据库中。除了 IE 之外，所有浏览器中的一切都运行良好，因为表单没有像您解释的那样在 IE 中提交。在努力工作之后，我们找到了解决方案，解决方案是我们展示了 fileupload 控件，并通过设置其位置并应用 css opacity :0 将其准确放置在按钮的顶部。所以现在文件上传是不可见的，因为不透明度 0 但是当用户点击花哨的按钮时，他/她实际上点击了文件上传，因为它位于按钮的顶部。在这个解决方案之后，它在每个浏览器中都像魅力一样工作。希望这也能帮助你。
回答by aztack
you need to set type of button/input to submitas follow:
您需要将按钮/输入的类型设置submit为如下：
<button type="submit">Submit</button>
<button type="submit">Submit</button>
<input type="submit" value="submit">Submit</button>
<input type="submit" value="submit">Submit</button>
回答by Julesezaar
I had the same problem, only in IE 10 and IE 11. For me the solution was to append the form first with following code:
我遇到了同样的问题，只有在 IE 10 和 IE 11 中。对我来说，解决方案是首先使用以下代码附加表单：
document.documentElement.appendChild(form);
I put that line right before the submit function
我把那行放在提交功能之前
form.on("submit", function (event) {
event.preventDefault();
...more code
)}
回答by Daniel J.
The exact problem with IE11, at least my build, cause with MS "you never know nothing" if you allow me the street-wise talk.
IE11 的确切问题，至少是我的构建，如果您允许我进行街头谈话，MS 会导致“您永远一无所知”。
Is, that when you create a form element like this
是，当您创建这样的表单元素时
var formX = $(document.createElement('form'));
And eventually add some fields like this
并最终添加一些这样的字段
field1=$("<input type='hidden' id='myid' name='myid' value='whatever' />");
formX.append(field1);
The element is not really added to the DOM, it remains in some developer purgatory, waiting for you to finally add it to the DOM
元素并没有真正添加到 DOM 中，它仍然在一些开发人员的炼狱中，等待您最终将其添加到 DOM
$("#formdiv").append(formX);
As Arturo Igualada commented above, you can add it to some div in your HTML, in my example id formdiv
正如阿图罗·伊瓜拉达 (Arturo Igualada) 在上面评论的那样，您可以将它添加到 HTML 中的某个 div 中，在我的示例 id formdiv 中
On top of that, the element will not be found in the DOM even after adding it by appending the dynamic form to some DIV. At least if you use JQuery, as regular selectors will look for elements that were present in the DOM when you loaded the page. So you will need to use some sort of selection that will traverse the DOM again in search of newly added elements. I used find, although I guess that using .onshould work too.
最重要的是，即使通过将动态表单附加到某个 DIV 来添加元素，也不会在 DOM 中找到该元素。至少如果您使用 JQuery，因为常规选择器会在您加载页面时查找 DOM 中存在的元素。因此，您将需要使用某种选择来再次遍历 DOM 以搜索新添加的元素。我使用find，虽然我想使用.on 也应该工作。
$(document).find(formX).submit();
