jQuery's $(form).submit() not firing for IE only (MVC3 app)

Question

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!

Disallow

do you get any errors? – Withal

Can you try this? $('#' + formId).trigger('submit'); – Withal

@Barry : Negative. No change in IE. – Disallow

Answer 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.

Withal

Depending on your version of jQuery, .submit() is a wrapper for .trigger() – Withal

I verified the submit button was there (I must have removed it with the copy/paste clean up), and I switched the .submit() to .trigger() but that didn't change anything. IE still just sits there and "thinks" about it. – Disallow

Do you have a submit button on your form? – Withal

Can you bin the compiled source of your form? – Withal

Fixed issue in IE 11 through adding <input type="submit" name='submit' value="Submit" class='hidden'/> – Erect

Answer 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

Ruthenium

+1. This is the only answer here that worked for me. – Ovine

+1 to this too. I'm not sure why the answer is correct, this is the one that actually worked. – Bitter

It's the only one that worked for me too, but I've just appended it in the body (that causes the same effect that into a div). I think it's a security issue... – Walkabout

Awesome (clap) .. this one worked for me :) thanks for the solution Vianick Oliveri – Imperator

this solution worked for me on IE, Firefox and Chrome. – Cadent

could you elaborate more. what you mean by js form ? and where this div comes from? – Channel

Can you provide an example on how this solution was implemented? – Rapacious

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

Grandiloquent

Answer 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.

Appetite

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

Cabman

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

Seasoning

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

Scrofula