Page MenuHomePhabricator

Disable submit button on form submission to prevent duplicate POST requests
Closed, ResolvedPublic1 Estimated Story Points

Assigned To
Authored By
kostajh
Nov 8 2023, 9:02 AM
Referenced Files
F41542216: image.png
Nov 28 2023, 3:53 AM
F41542200: image.png
Nov 28 2023, 3:53 AM
F41542193: image.png
Nov 28 2023, 3:53 AM
F41542159: image.png
Nov 28 2023, 3:53 AM
F41542143: image.png
Nov 28 2023, 3:53 AM
F41542140: image.png
Nov 28 2023, 3:53 AM
F41542075: image.png
Nov 28 2023, 3:53 AM
F12: project.png
Nov 24 2023, 11:13 AM
File Not Attached

Description

Problem:
Multiple POST requests are sent if the submit button is clicked multiple times.

Steps to Reproduce:

  1. Navigate to the incident report form.
  2. Enter data.
  3. Click submit multiple times in rapid succession.

Expected:
The submit button should be disabled after the first click.

Actual:
The submit button remains active and allows multiple POST requests.

Solution:
Implement JavaScript to disable the submit button on the first click and re-enable it based on the server's response.

Acceptance Criteria:

  • Submit button is disabled after the first click.
  • No multiple POST requests are sent.
  • Button re-enables on server failure response.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

@Madalina @TAdeleye_WMF this is relatively small, if we want to do it as part of the MTP, please let me know.

Let's do it as part of the MTP.

Dreamy_Jazz renamed this task from [S] Disable submit button on form submission to prevent duplicate POST requests to Disable submit button on form submission to prevent duplicate POST requests.Nov 20 2023, 4:20 PM
Dreamy_Jazz set the point value for this task to 1.

Change 976257 had a related patch set uploaded (by Dreamy Jazz; author: Dreamy Jazz):

[mediawiki/extensions/ReportIncident@master] Disable submit and back button when form is submitting

https://gerrit.wikimedia.org/r/976257

Change 976257 merged by jenkins-bot:

[mediawiki/extensions/ReportIncident@master] Disable submit and back button when form is submitting

https://gerrit.wikimedia.org/r/976257

Suggested QA steps:

  1. Install ReportIncident
  2. Use Google Chrome or Firefox
  3. Load a talk page while logged in to an account with a confirmed email address
  4. Click Report and navigate to the second step
  5. Open Developer Tools (F12) and go to the network tab
  6. For throttling options, choose the slowest option present that isn't the "Offline" preset.
  7. Click submit
  8. The submit and back buttons should be disabled for a short time while the request is being sent.
  9. Make sure to change the throttling options back to their default after the test.

The device needs to be on simulated to be on a slow network so that you can see the buttons disable. On most internet connections, the buttons will not be disabled for long enough the change to be noticeable.

Djackson-ctr subscribed.

Per the ticket Description and QA Steps, I have verified the new code has been implemented and is functioning and displaying as expected...
@Dreamy_Jazz great work once again!!! Appreciate the detailed QA Steps, Thank you sir.


image.png (914×1 px, 104 KB)

image.png (845×1 px, 127 KB)

image.png (861×1 px, 128 KB)

image.png (884×1 px, 125 KB)

image.png (851×1 px, 95 KB)

image.png (900×438 px, 170 KB)

image.png (904×612 px, 170 KB)