Auto-submit an upload form when a file is selected, and trigger an action

Question

I'm trying to submit an uploaded file automatically when the user uploads the file. The shortest way I found was to insert onChange="form.submit()" in the upload files input . Source I did that, and now when I insert an action to the submit input (through JavaScript), it doesn't get triggered.

How can I trigger an event when I do onChange="form.submit()" ?

JSFiddle

Code snippet:

 $("form").on('submit',function(){ alert("It works"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="http://example.com"> <input type="file" id="file" onChange="form.submit()" /> <input id="submit" type="submit" name="submit" value="Upload"/> </form> 

Update

I know it's possible to perform that with $('#file').change(function()... But I want to know if it's possible to do it with onChange="form.submit()" .

Answer 1

Solution 1: jsFiddle 1

 $(document).ready(function(){ $("form").on('submit',function(){ alert("It works"); }); }); 

 <form action="http://example.com"> <input type="file" id="file" onchange="$('form').submit();" /> <input id="submit" type="submit" name="submit" value="Upload"/> </form> 

Solution 2: jsFiddle 2

 $(document).ready(function(){ $("form").on('submit',function(){ alert("It works"); }); }); function submitForm() { $('form').submit(); } 

 <form action="http://example.com"> <input type="file" id="file" onchange="submitForm()" /> <input id="submit" type="submit" name="submit" value="Upload"/> </form> 

Answer 2

The <input> tag type file responds for change event when a file is selected by user, so you can do something like this:

input.onchange = function (event) {
  // do something
}

Checkout the documentation here

Answer 3

Like this:

 $('#file').on('change', function() { alert('test'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="http://example.com"> <input type="file" id="file" /> <input id="submit" type="submit" name="submit" value="Upload"/> </form> 

Answer 4

$('#file').change(function() {
    alert("Form is being submitted");
    $('#myBeautifulForm').submit();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myBeautifulForm" action="http://example.com">
    <input type="file" id="file" />
    <input id="submit" type="submit" name="submit" value="Upload"/>
</form>