Raise onchange event html input file from button

Question

I would like raise the onchange event of the input file type by clicking a button:

Example:

<input id="File1" type="file" onchange="show(this)"  />
<input id="Button1" type="button" value="button" onclick="butclick()" />
<input id="Button2" type="button" value="button" onclick="document.getElementById('File1').onchange()" />
<input id="Button3" type="button" value="button" onclick="document.getElementById('Button1').onclick()" />

<script>
function butclick() {
    alert('yes');
}
</script>

I can trigger the click event of another button but not the onchange event of an input file.

lehnerchristian · Accepted Answer · 2014-05-05 09:31:58Z

5

I'd recommend to write all your Javascript code into the script tags to have everything on one place.

The "change" event is triggered, when the element (in you case input type file) changes and not by clicking another element

For example:

function handleFileInput() {
 console.log("change event of file input triggered.");   
}

document.getElementById("files").addEventListener("change", handleFileInput, true);

In this example the change event is attached to the file input and when the user chose a file the event is dispatched.

You can try the code on jsfiddle: http://jsfiddle.net/883LL/1/

But if you really want to dispatch the event by clicking a button you could try with dispatchEvent: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.dispatchEvent

Hope this helps!

answered May 5, 2014 at 9:31

lehnerchristian

1,3073 gold badges13 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Terry Over a year ago

+1 for using addEventListener instead of inline JS.

ojorma Over a year ago

cant I trigger the change event thru a button or div click. Thats what I want to do. Thank you

Collectives™ on Stack Overflow

Raise onchange event html input file from button

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related