Onsubmit event after javascript form submit

Question

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:

 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?

If you need some validations of submit then why do you submit form once file is selected ? — Rayon, Sep 02 '15 at 10:50

score 3 · Accepted Answer · answered Sep 02 '15 at 11:01

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>

score 2 · Answer 2 · answered Sep 02 '15 at 11:03

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.

score 1 · Answer 3 · edited May 23 '17 at 12:06

1

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?

edited May 23 '17 at 12:06

Community

1
1

answered Sep 02 '15 at 10:48

Cynthia Sanchez

178
1
9

well , there is an onchange event with this.form.submit() , shouldn't that work as a submit button ? – Petru Lebada Sep 02 '15 at 10:50
consider that if you need validation, then that is the answer, you validate the field has a value != '' and then you can submit it – Cynthia Sanchez Sep 02 '15 at 10:52
I would try it in plain javascript – Cynthia Sanchez Sep 02 '15 at 10:54
what i try to achieve is a faster and smoother way of uploading a file, as soon as the file was selected,it should upload the file(submit the form) , run a validation onsubmit , and return a boolean value , depending on that the file can be uploaded or not , with the thread you gave me, i can't do this... – Petru Lebada Sep 02 '15 at 10:54
1

@Cynthia Sanchez, Just to correct you, `field` will always return DOM object of `id="upfile"` so it will never be false. You need to check the value of the input. To clarify, try ~console.log(field)` before if condition.. – Rayon Sep 02 '15 at 17:01

Onsubmit event after javascript form submit

3 Answers3