".click();" triggers "onchange"

Question

I'm trying to create a button that calls the event of a "file" type input, so that the input itself isn't displayed and I can style the button how I want to, following this post. The form is looking like this:

<form action="imageUpload.php" method="post" enctype="multipart/form-data" >
    <input type="file" id="selectedImage" style="display: none;" onchange="this.form.submit()" />
    <button onclick="document.getElementById('selectedImage').click();" />
</form>

When I click the button, the fileselect dialogue pops up, but the "imageUpload.php" is already called before a file is picked. However, when I take out the middle man by removing the button and displaying the input itself, it works as intended: "imageUpload.php" is called after a file is selected.

I'm assuming that the ".click();" function triggers "onchange", even though the value doesn't change. Is this correct? Is there any way to trigger the fileselect dialogue from another button without immediately calling onchange? Or is there a way to check whether a file was selected in onchange?

Thanks in advance.

Use a button type of button when the button is within a form. The default action of an untyped button is to submit the form. Notice also, that `button` is not self-closing, the end tag is mandatory. — Teemu, Dec 27 '17 at 19:01

score 1 · Accepted Answer · answered Dec 27 '17 at 19:01

1

The default type of a <button> is submit.

In the example you linked, they specify their button like this: <button type="button">. By giving it a type like that, the form isn't submitted.

See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

answered Dec 27 '17 at 19:01

Derek Hopper

2,110
12
19

Thank you! That was exactly what the problem was, I didn't know that the default "button" would submit the form. Seems like a strange design choice but I guess that's HTML in a nutshell. – TomQDRS Dec 28 '17 at 02:31

score 0 · Answer 2 · answered Dec 27 '17 at 19:45

Note: This is just for explanation purpose. you have to modify the code as per your need. also the form submit might show error as we are posting to some random url.

So,Lets try breaking this :

function showFile(){
  // lets trigger the file click as its hidden.
   document.getElementById('fileControl').click();
}


function sub(){
// check if your user has selected any file?
if(document.getElementById('fileControl').files.length > 0){
// if you are curius to see your files log this
//console.log(document.getElementById('fileControl').files);
// do post your form here by 
  document.getElementById('testForm').submit();
 }
}

<!-- Change the action URL to what you want-->
<form method="post" action="example.com" id="testForm">
<!-- Lets have hidden file control that calls the some method to submit form-->
<input type="file" id="fileControl" onchange="sub();" style="display:none;">
<!-- Lets have a button to open file dialog-->
<input type="button" id="btn" value="open" onclick="showFile();">
</form>

".click();" triggers "onchange"

2 Answers2