Continue the event after preventDefault() JS-CodePudding

I'm trying to prevent the default bahavior of reloading the page after submitting a form, to show an information and after a second or so, continue with that event(submit) that provokes the refresh.

I've done this

HTML:

    <form id="uploadForm" method=post enctype=multipart/form-data onsubmit="showConfirmationModal(event)">
      <span id="confirmationModal" ></span>
      <input type=file name=file>
      <input id="uploadButton"  type=submit  value=Enviar>
    </form>

JS:

const showConfirmationModal = (event) => {
  event.preventDefault();
  const confirmation = document.getElementById('confirmationModal')
  confirmation.innerText = " Uploading File ... ";
  confirmation.style.display = 'inline';
  setTimeout(() =>{
    document.getElementById("uploadForm").submit();
  },1000)
}

But the document that it's being loaded is not being sended.

Any idea?

Thank you!

(I have been looking for some info but most of people uses JQuery to solve the problem and i'ts something that I don't want to do, I'd like to use only JS)

CodePudding user response：

Change the

type=submit

type=button

In this case (as @mousetail mentioned) of course you have to move the event handler to the click event.

If you wanna stick with submit, try

return false

At the end of the handler.

function mySubmit(e) { 
  e.preventDefault(); 
  try {
   someBug();
  } catch (e) {
   throw new Error(e.message);
  }
  return false;
}