After updating the browser did not send data?

Question

JavaScript

Good afternoon, who will tell you, there is a form with a submit button, there is a js code.
JS code processes the form without reloading the ajax page and submits the data after 1 second.
JS

$(document).ready(function(){
    $("#form").submit(function() {
        var form_data = $(this).serialize();
        $.ajax({
        type: "POST",
        url: "api.php",
        data: form_data
      }); 
    });
setTimeout(function(){
  $("#button").trigger('click');
}, 1000);
});

The form itself looks like this:

<form id="form" action="javascript:void(null);" method="post" style="display: none;">
   {assign var="num" value="0"}
  {foreach $purchases as $purchase} 
    <input type="text" name="data1[{$num+1}]" value="{$purchase->variant->sku|escape}">
   {assign var="num" value=$num+1}
 {/foreach} 	
  
   {assign var="num" value="0"}
   {foreach $purchases as $purchase} 
    <input type="text" name="data2[{$num+1}]" value="{$purchase->amount}">
   {assign var="num" value=$num+1}
   {/foreach} 
    <input type="text" name="data3" value="{$order->name|escape}">
    <input type="text" name="data4" value="{$order->phone|escape}">
    <input type="text" name="data5" value="{$order->address|escape}">
    <input type="text" name="data6" value="{$order->comment|escape|nl2br}">
    <input type="text" name="data7" value="{$order->date|time}">
    <input type="submit" id="button" value="Отправить">
</form>

But there is a nuance, how to solve I can not understand.
-- Everything is sent when a person has done an action, but if he wants to refresh the page again, then the same thing is sent again.
Here I want to solve this issue, so that after sending, more when he reloads the page, it is no longer sent. How to approach this issue?

Answer 1

setTimeout(function(){
  $("#button").trigger('click');
}, 1000);

When you upload a document, you yourself send the form by initiating a click on the "send" button.