1

There is a duplicate request issue that affects staff members at our company. I am unable to replicate it in our development environment (or in production for that matter, but I work from home so maybe it's because there's less traffic from my network? No clue). The site is a high traffic Wordpress site but the issue is mainly with some custom plugin which uses JS and Vue. The site is served using Apache (could processes be the issue?).

The issue at hand is that occasionally, when using jQuery.ajax(...) there are multiple requests being created. I'll attach a snippet of the code below:

<form>
    ...
    <a onclick="submit_form()" class="btn btn-primary float-right padding-lr-20">
        Process Payment
    </a>
</form>

<script>
function submit_form () {
    ...
    jQuery('#btn_process_payment').hide()
    jQuery.ajax({
        type: "POST",
        url,
        async: false,
        ...
    });
}
</script>

I'm aware that async: false is a bad idea so I am going to remove it but I see no reason why this would cause duplicates requests.

I would assume it was from double clicks but sometimes the duplicates are up to a 2 minutes apart and only rarely milliseconds apart. I added logs at the entry point of the file to gather data so I have millisecond accuracy with regard to request times in the PHP file. This has led me to believe it is a form submission issue, but the form isn't being "submitted" in the traditional sense since it's the action is being initiated by the onclick of the button (anchor element).

We tried to improve the server reliability. Sometimes there are timeouts (not for this feature in particular but overall) when there are heavy CRON jobs running. This didn't help considering I still this issue in the logs.

6
  • 2
    My first thought also was double click but if you're measuring requests two minutes apart on the server side then that can't be it. And the server load would have nothing to do with it unless the client JS is written to explicitly retry AJAX hits on timeout. I'd update your logging to also dump the contents of $_SERVER for each hit, so that you can answer the questions: Are they both from the same IP? Same browser? From an XMLHttpRequest? To the same URL? With the same parameters? Commented Jul 9, 2024 at 17:01
  • Second thought -- maybe you're not doing a PRG and you should be. Visitors could just be inadvertently resubmitting. Commented Jul 9, 2024 at 17:03
  • My first thought is also that it cannot be the same client if requests are minutes apart. Or at least, not from the same event. I can definitely be wrong though, so I would suggest adding a UUID or something in the request so you can be definitely certain that it is from the same client and same event. I just recreated a minimal code on my side and I do not reproduce the issue. Commented Jul 9, 2024 at 17:13
  • 1
    You appear to be hiding the submit button, but is it possible that people are submitting the form in another way? According to this and tested here hiding the submit button is not sufficient enough to disable the enter key from submitting the form. Even if two submissions are a couple of minutes apart, it could still be an impatient user, or a user that isn't sure the state of the form, or one that used a back button to get to it. Commented Jul 9, 2024 at 17:55
  • Make the submit_form function return false. Better add the function via addEventListener and do e.preventDefault(). Commented Jul 9, 2024 at 19:35

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.