提交表单时如何防止在刷新时重新提交表单

Question

I'm using nodeJs, handlebars, and JavaScript to submit a form with the post action but form submission is taking time due to a lot of data to store in DB son while the form is submitting if someone refreshes the page it creates duplicate data in DB. can you tell how can I prevent this from happening?

I create a button to submit the form and submit using Js like this.

 function sumitform() { var myform = document.getElementById("myForm"); myform.submit(); }

 <form id="myForm" action="/path/toNodePostApi" method="post"> <input name="name" value="{{{data}}}"> <input id="btnsubmit" class="btn" type="button" value="submit" onclick="sumitform()"> </form>

Answer 1

You can disable the button after is pressed, but this is not going to hold the user form "refresh" the page and re-submit the values.

In my case I do a "Working or Submitting" icon while doing it, but you will have to validate on the server side. This will only let the user know, that the page is working on something a wait before hitting refresh.

Answer 2

You could ask the user to confirm they want to leave (or reload, in this case) the page:

window.onbeforeunload = function() {
    return true;
};

In addition you could store the data in session. Check to see if there is data in session on page load. If it is there, the page was reloaded and you can make an api call to take appropriate action on the server to remove the previously sent data (or prevent it from being sent again from the client in the first place).

Answer 3

document.getElementById("myForm").addEventListener("click", function(event){
  event.preventDefault()
});

It prevent from reloading on button click Clicking on a "Submit" button, prevent it from submitting a form Clicking on a link, prevent the link from following the URL