Repeat delivery of the form during the processor ' s work from the previous shipment

[Rossere]

There are duplicate messages from users. The probable cause is that the shape-processing processor takes a long time, and in that time, the user relies on the button several times. I haven't been able to reproduce this case myself - I'm pushing the button of re-exit, but there may be browsers in which it passes. It's clear that we need to treat the cause of the disease, not the symptoms, to deal with the events that are wrapped on the album of the shape and cause the brakes, but now we need a temporary payment. I'm trying to make a button inactive about the events of a boutton or a sabmit of shape. But the atribut of disabled people doesn't add up. Probably because after the sabmit, the shape is reset and the marking at that time is not subject to change in the Javascript? Can we change anything on the client's notice during the reloading of the page? And can a client pull the button again during reloading and on which browsers it is possible? button code:

<input type="submit" accesskey="s" tabindex="6" name="post" value="Отправить" class="button1 default-submit-action">

Heading of form:

<form id="postform" method="post" action="./posting.php?mode=post&amp;f=33" enctype="multipart/form-data">

I tried and didn't work.

$('input[name="post"]').on('click', function() {                        
                        $('input[name="post"]').prop('disabled', true);
                    });

Another:

$(this).find('input[type="submit"]').attr('disabled','disabled');
$('input[type=submit]').one('submit', function() {

$(this).attr('disabled','disabled');

});

[obi]

Of course, when the machine is updated, it's reloading. To reproduce this case (when the user sends several messages) - once the message is sent, update the page, confirm the re shipment and see another message. There's something (possibly waiting for an answer to the message), your users sometimes update the page and you get a few identical messages.

How do you fight it? Well, send the form through the JS without updating the page. Plus minus that.

<form id="postform">
 ... поля формы
 <button type="submit" id="submitForm">Отправить форму</button>
</form>
<script>

document.getElementById("postform").addEventListener('submit', funcSubmit);

const buttonSubmitForm = document.getElementById("submitForm");
const funcSubmit = async () => {

buttonSubmitForm.prop('disabled', true);
const response = await fetch('url', {

method: 'POST',

headers: {

'Content-Type': 'application/json;charset=utf-8'

},

body: JSON.stringify({

// Поля формы

})

});
buttonSubmitForm.prop('disabled', false);
// Тут обрабатываете полученные данные из формы

// добавляете сообщение в DOM-дерево, обрабатываете ошибки и прочее

}
</script>

It is clear that there is a need for a separate url who will take the form fields and give JSON the result of this work.