CODEWITHSUNDEEP
javascriptphpjqueryformsinternet-explorer
Erman Belegu
Erman Belegu

Reputation: 4079

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

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.

Upvotes: 0

Views: 323

Answers (4)

limengjun
limengjun

Reputation: 183

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

Upvotes: 1

paulitto
paulitto

Reputation: 4673

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

Upvotes: 1

Peter
Peter

Reputation: 9123

Changing:

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

to:

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

should do the trick.

Upvotes: 1

pratik nagariya
pratik nagariya

Reputation: 574

Try this.

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

Upvotes: 1

Related Questions