CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Jessica
Jessica

Reputation: 9830

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

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

Upvotes: 0

Views: 8363

Answers (4)

AiApaec
AiApaec

Reputation: 660

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>

Upvotes: 5

Tomaso Albinoni
Tomaso Albinoni

Reputation: 1013

$('#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>

Upvotes: 0

user3998237
user3998237

Reputation:

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>

Upvotes: 0

Jan C&#225;ssio
Jan C&#225;ssio

Reputation: 2269

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

Upvotes: 0

Related Questions