0

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()".

Community
  • 1
  • 1
Jessica
  • 9,379
  • 14
  • 65
  • 136

4 Answers4

5

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>
AiApaec
  • 660
  • 1
  • 6
  • 12
  • I guess the problem was the missing `$(document).ready();` I should have thought of that. – Tomaso Albinoni Nov 11 '15 at 04:16
  • This will cause the browser to load the URL contained in the form's action attribute. To avoid this, add an iframe and set the form's target attribute to the iframe's name. You can also employ the iframe's onload event to show your user a loading animation while the upload is taking place. – Aaron Cicali Sep 06 '18 at 21:53
0

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

Jan Cássio
  • 2,076
  • 29
  • 41
0

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>
0
$('#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>
Tomaso Albinoni
  • 1,003
  • 1
  • 8
  • 19