Auto click a button on file select for html form

Question

I have a HTML form with a file upload. i want to be able to have two buttons - one that will submit the form and another that will upload a file.

i have tried using:

document.getElementById("logo").onchange = function() {
    $('#upload_logo').click();
};

to click the upload_logo button when the file is selected but its not working

any ideas?

Just to be sure, do you want to automatically submit the form as soon as an image was chosen? or do you want to allow the user to submit only after an image was chosen? — Rodik, Sep 18 '13 at 10:28

score 2 · Answer 1 · answered Sep 18 '13 at 10:17

If you are using jQuery, you should use it throughout your code. instead of firing a click on the submit button, you should fire a submit on the form.

(hopefully, you do have a form around your inputs, right?)

$("#logo").on('change', function() {
  $('#uploadForm').submit();
});

score 1 · Answer 2 · answered Sep 18 '13 at 10:14

1

Use trigger

document.getElementById("logo").onchange = function() {
  $('#upload_logo').trigger('click');
};

answered Sep 18 '13 at 10:14

Paritosh

11,144
5
56
74

3

Aren't .click() and trigger('click') equal? http://stackoverflow.com/questions/13505003/jquery-calling-triggerclick-vs-click – Liam Sep 18 '13 at 10:19

score 0 · Answer 3 · answered Sep 18 '13 at 10:18

0

use <input type="file"> to upload file.

answered Sep 18 '13 at 10:18

Mangala Edirisinghe

1,111
2
15
32

Auto click a button on file select for html form

3 Answers3