Onsubmit event after javascript form submit

I have an upload file form, and i try to upload the file when it’s selected,so i tried something like this:

<form enctype="multipart/form-data" method="POST" onsubmit="return
UploadFile(this);">                                 
<input id="upfile" type="file" onchange="this.form.submit();"/>
</form>

The form.submit() works , but of course i need to do some validation on submit,so i tried to run a function:

  • Plupload works with Ruby on Rails?
  • Properly Create and Serve PDF Blob via HTML5 File and URL APIs
  • TinyMCE Filemanager and Imagemanager
  • Read the contents of a “file” object?
  • HTML5: drag out a JS generated file
  • How to add an event to browser 'save file' dialog in javascript
  •  function UploadFile(file){
           alert('Bleah');
           return false;
        }
    

    On normal circumstances it should return false, and the form shouldn’t reload the page,but this doesn’t happens.

    If i add a submit input into the form, it works as expected:

    <form enctype="multipart/form-data" method="POST" onsubmit="return
    UploadFile(this);">
    <input type="submit" name="upload" value="Upload">                                  
    <input id="upfile" type="file"/>
    </form>
    

    Can anyone explain me what is wrong please?

  • Input File field to Input Text field
  • Dynamically load a JavaScript file
  • How to use JavaScript to determine whether a file exists in a directory?
  • File API: Directories and System — discontinued… what does that mean?
  • Read txt file real time with Javascript
  • parse file in angularjs controller before upload
  • 3 Solutions collect form web for “Onsubmit event after javascript form submit”

    Try this:

    function UploadFile(file) {
      if (file.value === '') {
        alert("Invalid File");
      } else {
        alert('Form will be submitted now!');
        document.getElementById('myForm').submit();
      }
    }
    <form enctype="multipart/form-data" method="POST" id="myForm">
      <input id="upfile" name="upfile" type="file" onchange="UploadFile(this);" />
    </form>

    To upload the file when it’s selected, you must call UploadFile() function on the input change, not on the form change tag. If you submit on input change, the page gets reloaded.
    So, you’d better use something like this:

    $('#upfile').onchange(function(){
       if(UploadFile(this.parent('form'))){
       this.parent('form').submit();
    }
    })
    

    And you won’t need onchange and onsubmit inside the tags any more.

    Solution:

    <form id="formname" enctype="multipart/form-data" method="POST" action="test.html">
    <input id="upfile" type="file" onchange="sendForm()"/>
    </form>
    
    <script>
      function sendForm() {
        var field = document.getElementById("upfile");
        if (field) {
          console.log("the is a file and the form will be sent");
          document.forms["formname"].submit();
        }
    
      }
    
    </script>
    

    OLD–
    I dont understand, how would you like to submit the form without a submit button? or at least, handle the submission in javascript “object.addEventListener(“keydown”, myScript);”


    ok, I read it once again and I understand the question

    You need to handle this on javascript and detect the selection of the file. Look at this thread:

    how to check if a file is selected using javascript?