Jquery UI Dialog form submit bug in IE

I am building a page in MVC, with a download button and an upload button. When the user clicks upload, I am using JQuery UI Dialog to show a popup to show a warning message. When clicking the 'Ok' button on this popup, I then use Jquery to submit the form. This works fine in Firefox but the form doesn't submit in IE.

The view

<form id="form1" enctype="multipart/form-data" method="post">
    <div style="clear:both; margin-top:10px">      
        <fieldset>
            <legend>Legend</legend>

            <div style="float:right">
                <input type="file" name="file" id="file" style="display:none" onchange="SetFakeText();"/>
                <input id="txtFakeText" readonly="readonly" onclick="HandleFileButtonClick();" style="width:280px"/>

                <input type="button" id="cmdFakeButton" value="Browse" onclick="HandleFileButtonClick();"/>                
                <input type="button" id="ReUploadButton" value="Upload"/>  
            </div>

            <input type="submit" name="submitButton" value="Download" />

        </fieldset>
    </div>

    <div id="dialog">
        <label style="font-weight:bolder; color:red;"&开发者_如何学Cgt;Warning!</label>
        <br />
        <label>Uploading will overwrite old data</label>
        <br />
        <img id="loading" src="<%= ResolveUrl("~/Images/LoadingSpinner.gif")%>" alt="" style="display:none; margin-left:120px;"/>  
    </div> 
</form>

The Script

<script type="text/javascript">
    function HandleFileButtonClick() {
        document.getElementById('file').click();
    };

    function SetFakeText() {
        document.getElementById('txtFakeText').value = document.getElementById('file').value;
    };

    $('#ReUploadButton').click(function() {
        $('#dialog').dialog('open');
    });

    $(function(){                       
    $('#dialog').dialog({
    autoOpen: false,
    width: 300,
    position: 'center',
    title: 'Uploading',
    modal: true,
    buttons: {
        'Ok': 
        function () {
            document.getElementById('loading').style.display = 'block';
        $('#form1').submit();
                }, 
        'Cancel': 
        function() { 
        $(this).dialog("close"); 
        } 
    }
    });             
});    
</script>

I have read around and the common fixes didn't work. Does anyone have any tips?

EDIT:

Also, if I click the 'Ok' button of the dialog 3 times, it triggers the controller action, but doesn't pass in the file.

Resolved

After making the 'real' input visible. Using the real input browse button will allow the form to submit. But using the fake Browse button which calls:-

function HandleFileButtonClick() {
        document.getElementById('csvFile').click();
    };

Causes the problem. I will use a different method to style my input field.

If you append the dialog to the form element does it fix your problem? (By default jQuery appends the dialogs to the body tag)

$(function(){                       
    $('#dialog').dialog({
      autoOpen: false,
      width: 300,
      position: 'center',
      title: 'Uploading',
      modal: true,
      buttons: {
        'Ok': 
        function () {
            document.getElementById('loading').style.display = 'block';
        $('#form1').submit();
                }, 
        'Cancel': 
        function() { 
        $(this).dialog("close"); 
        } 
      }, 
      open: function(){
         $('.ui-dialog').appendTo('form');
      }
    }); 

If this is .NET, I've seen .NET do some whacky things when the elements aren't inside the form tag

Edit: try targeting the .ui-dialog instead of $(this)

Maybe you should add an action to the form, even if it's an empty one?

Not sure if there is maybe something else in your code causing the problem as I can't replicate a problem

see my fiddle