Single button for uploading-submitting file - autosubmit file on change. JQuery

Question

I want the upload button (that will be hidden) to automatically work out as soon as file is selected(on change). The problem is that I get following error messege. I searched for it and there was an advice to change the name of the button but it didnt help. Here is the error: videator.php:380 Uncaught TypeError: document.getElementById(...).submit is not a function

jQuery:

  $(".upload").click(function(){
      $("#fileToUpload").click();
  });
  document.getElementById("fileToUpload").onchange = submitAction;

   function submitAction(){
       document.getElementById("btnSubmit").submit();
       return false;
   }

HTML

<form action="videator.php" method="post" enctype="multipart/form-data"  id='btnSubmit'>
       <h3> Select a video to upload:</h3>
       <img class='upload' src="img/upload.png"/>
       <input class="form" type="file" name="fileToUpload" id="fileToUpload" accept="video/*" >
       <input class="form" id='' type="submit"  value="Upload Image"  name="submit">
   </form>

What am I doing wrong? So again: I need a single button instead of 2 buttons (default) . So you click on it and upload-file window pops up - you select a file and it gets uploaded automatically.

Please help.

score 2 · Accepted Answer · edited May 23 '17 at 12:23

Following what was said here:

"Submit is not a function" error in JavaScript

You have a submit input named "submit".

<input class="form" id='' type="submit"  value="Upload Image"  name="submit">

This is what's causing the error to be thrown. If you rename that button to anything else it should work.

<input class="form" id='' type="submit"  value="Upload Image"  name="newName">

Here's a working example. If you open up the console you'll see your submit error is gone.

https://jsfiddle.net/mewcg3zo/5/

Single button for uploading-submitting file - autosubmit file on change. JQuery

1 Answers1