I have a html form, with a custom file upload field. And by that I mean that I have moved the actual file field beyond the borders of the page with css, that I have a custom input field and button in place, and that I have a jquery click event attached to that custom button to trigger the file input dialog.
It all works fine, in every browser.

But I need to submit the form through javascript. And I got somewhere that IE remembers my actions with javascript as a malicious manipulation of the file input field and blocks my access with an error access denied when I invoke document.formName.submit().

Is there a way around this, because I have gone completely mad by trying to search for a solution. I seriously don't want to use the default file input field, as every browsers renders it differently and messes up my design..

code:

<form name=thisForm onsubmit=return false; enctype=multipart/form-data method=post action=index.cfm/somepage>

    <input type=file class=hidden name=hidden id=hidden />

    <input type=text name=shown id=shown />

    <button id=button>browse..</button>

    <input type=submit id=submitForm />

</form>



<script>

    $('button').click(function(){

        $('#shown').val($('#hidden').val());

    });



     $('submitForm').click(function(){

        validateForm();

    });



    function validateForm()

    {

        //regular expression validation against all other input fields in the form

        //not the file input field



        validateVAT();

    }



    function validateVAT()

    {

        //connect to external service to check VAT



        submitForm();

    }



    function submitForm()

    {

        document.thisForm.submit();

    }

</script>

UPDATE:
I just tried to first upload the file, before submitting the form, through ajax, but that also gave me the acces denied error.. >_>