Input submit didn't submit form with jquery in Internet Explorer

Question

I create a HTML and jQuery code to submit a form with jQuery and it works in all browsers except Internet Explorer.

HTML:

<form name="file_upload" id="file_upload" action="<?php echo base_url(); ?>projects/file" enctype="multipart/form-data" method="POST">
    <a class="button" onclick="document.getElementById('file-upload-input').click(); return false;"><span class="plus"></span>Upload File</a> 
    <input id="file-upload-input" name="upload" type="file" style="display:none;">
    <input id="submit-button" name="submit" type="submit" value="Upload" style="display:none;">
</form> 

jQuery

$(document)
.on('change', '#file-upload-input', function(){
    $('#submit-button').click();
})

EDIT : I have also tried :

$(document)
.on('change', '#file-upload-input', function(){
    $("#file_upload").submit();
})

But the input submit didn't submit a form only in Internet Explorer.

Answer 1

Try this.

$(document)
.on('change', '#file-upload-input', function(){
    $("#file_upload").submit();
})

Answer 2

Changing:

$('#submit-button').click();

to:

$('#file_upload').submit();

should do the trick.

Answer 3

You might have problems when using delegated events approach with 'change' event in IE (since it doesn't support bubbling which events delegation relies on).

Try binding onchange handler directly to file input:

$('#file-upload-input').on('change', function(){
    $("#file_upload").submit();
})

Answer 4

I think it's the event delivery what limit some operation that fired by javascript. So you should always use original event what fired by the browser,In your case,we can use css to make the file upload input to transparent and covered it to the 'a' button:

<input id="file-upload-input" name="upload" type="file" style="
width: 88px;
position: absolute;
left: 0;
opacity: 0;
filter:alpha(opacity=0)
">

If this works,you can delete the onclick event what is binded to the 'a' node