jQuery's $(form).submit() not firing for IE on

问题:

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.

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.

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.

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!

Thanks guys!

回答1:

You might be best suited to try using the $.trigger() function in jQuery.

Invoke it similarly to the way you are calling .submit():

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

Good luck!

Also

There is a bug in IE where the form will not submit properly if there is no

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

Try adding one and hiding it with CSS.

回答2:

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.

Hope it helps

回答3:

You can create an input submit inside the form that you like to send and by Jquery click on the button.

It´s works well with 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:

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

回答4:

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.

回答5:

you need to set type of button/input to submit as follow:

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

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

回答6:

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:

document.documentElement.appendChild(form); 

I put that line right before the submit function

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

回答7:

The exact problem with IE11, at least my build, cause with MS "you never know nothing" if you allow me the street-wise talk.

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

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

As Arturo Igualada commented above, you can add it to some div in your HTML, in my example 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 .on should work too.

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