jQuery $ (form) .submit() non si attiva solo per IE (MVC3 app)

Question

Sto setacciando internet (incluso SO) e non riesco a trovare nulla che mi aiuti con la mia situazione, quindi spero Posso avere un aiuto da voi ragazzi.

Fondamentalmente, come dice il titolo, il .submit() NON sta attivando in IE. Tutti gli altri browser funzionano bene, ma in IE (8, 9, 10 fino ad ora) semplicemente non attiva il submit.

Ecco il codice della vista:

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

Quando i pulsanti sono cliccato:

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?? 
}, 
... 
}; 

E, infine, il controllore:

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

Quando il debug in IE, riesco a la riga .submit() in js ed eseguila da lì. Tutto prima funziona bene, ma poi .submit() arriva e smette di fare qualsiasi cosa. Nessun errore javascript, niente nella console, nessuna indicazione di alcun problema. In tutti gli altri browser, il .submit() si attiva correttamente e il controller si interrompe nel metodo che viene chiamato.

Qualche idea sul perché questo sta accadendo in IE? Sono sicuro che qualcuno l'abbia mai visto prima !! Per favore aiuto, ho battuto la testa dalla mia scrivania per tutto il pomeriggio!

Grazie ragazzi!

Answer 1

Potrebbe essere la soluzione migliore per provare a utilizzare la funzione $.trigger() in jQuery.

Invoke è simile al modo in cui si sta chiamando .submit():

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

Buona fortuna!

anche

c'è un bug in IE in cui la forma non presenterà correttamente se non c'è

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

Prova ad aggiungere uno e nasconderlo con i CSS.

Answer 2

Puoi dirmi che stai lavorando direttamente con il controllo fileupload o nascosto e lo stai attivando/invocando su un altro pulsante di controllo? In realtà ho avuto lo stesso problema. Il mio cliente voleva che mostrassimo un pulsante di fantasia per funzionare come controllo del carico di file. Abbiamo quindi aggiunto un pulsante e il controllo del fileupload con visibilità false e al clic del pulsante attivavamo l'evento clickup fileupload e con l'aiuto di jquery ottenevamo il percorso del file e lo salvavamo nel database. Tutto funzionava perfettamente in tutti i browser, tranne IE, in quanto il modulo non veniva presentato in IE come hai spiegato. Dopo aver lavorato veramente sodo, abbiamo trovato la soluzione e la soluzione era che abbiamo mostrato il controllo del fileupload e lo abbiamo posizionato esattamente sopra il pulsante impostando la sua posizione e applicato l'opacità css: 0. Quindi ora il caricamento del file non è visibile a causa dell'opacità 0 ma quando l'utente fa clic sul pulsante di fantasia, in realtà fa clic su fileupload come posizionato nella parte superiore del pulsante. Dopo questa soluzione funziona come un fascino in ogni browser. Spero che questo ti aiuti anche.

Answer 3

È possibile creare un input di invio all'interno del modulo che si desidera inviare e da Jquery fare clic sul pulsante.

Funziona bene con IE.

Ad esempio:

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

E il JS:

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

Answer 4

ho avuto un errore simile. La mia soluzione è stata:

Aggiungi il modulo JS a un div nel DOM, in questo modo IE sa che è lì e può inviarlo.

Speranza che aiuta

Answer 5

è necessario impostare il tipo di tasto/ingresso submit come segue:

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

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

Answer 6

Ho avuto lo stesso problema, solo in IE 10 e IE 11. Per me la soluzione era quella di aggiungere il modulo prima con il seguente codice:

document.documentElement.appendChild(form); 

ho messo quella linea a destra prima la funzione di presentare

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