javascript onChange from input clicked by another element

Question

there have been similar topics posted however none I found solved my problem. Here's a sample html page with some javascript

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" /> 
 <script>
  window.onload = function() {  
   var fileDlg = document.getElementById('fileDialog');   
   // this should detect onChange, but not working
   fileDlg.onchange = (e) => {
    window.alert('Changed: '+e.target.value);//
    //document.getElementById('frm_img_upload').submit();
   }// eo filedlg.onchange    
  }//eo window onload
 </script>  
  </head>
  <body>
 <form id="frm_img_upload" name="frm_img_upload"  method="post" enctype="multipart/form-data">
  <!-- hidden ugly as hell file input element. Note onChange doesn't happen -->
  <input type="file" accept="image/*" name="fileDialog" id="fileDialog" style="opacity:0;" onChange="javascript:alert('Changed');">
  <!-- when this little button is clicked, the file dialog is triggered, however theres no onChange -->
  <button onClick="document.getElementById('fileDialog').click();" >Pick New Image</button>
 </form>
  </body>
</html>

The idea was to hide the super-annoying input file type element, and create a button with an onclick, which will click the invisible input. This works fine and dandy, however, once the visitor has selected a file and the dialog closes, I want to submit the form, rather than have another annoying button to press. The onchange is not firing.

I'm not using jquery for this, just good ol javascript.

Any ideas?

Thanks.

score 1 · Accepted Answer · answered Apr 10 '18 at 00:49

Your button is submitting the form as soon as the dialog closes, since the default is type="submit", so the onchange doesn't get a chance to run.

Change it to type="button" and then you'll see your alert.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" /> 
 <script>
  window.onload = function() {  
   var fileDlg = document.getElementById('fileDialog');   
   // this should detect onChange, but not working
   fileDlg.onchange = (e) => {
    window.alert('Changed: '+e.target.value);//
    //document.getElementById('frm_img_upload').submit();
   }// eo filedlg.onchange    
  }//eo window onload
 </script>  
  </head>
  <body>
 <form id="frm_img_upload" name="frm_img_upload"  method="post" enctype="multipart/form-data">
  <!-- hidden ugly as hell file input element. Note onChange doesn't happen -->
  <input type="file" accept="image/*" name="fileDialog" id="fileDialog" style="opacity:0;" onChange="javascript:alert('Changed');">
  <!-- when this little button is clicked, the file dialog is triggered, however theres no onChange -->
  <button type="button" onClick="document.getElementById('fileDialog').click();" >Pick New Image</button>
 </form>
  </body>
</html>

Thanks very much! Couldn't see that for looking. – kinnon_2000 Apr 10 '18 at 09:49 — kinnon_2000, Apr 10 '18 at 09:49

javascript onChange from input clicked by another element

1 Answers1