How to modify formData on turbo:submit-start

I want to modify any form of my page when they are submitted. I tried to add some data to the form modifying the formData of the formSubmission object:

document.addEventListener('turbo:submit-start', function (event) {
    event.detail.formSubmission.formData.append('input_name', 'example_value');
});

but looks like the fetchRequest object that has the formData that will be submitted is already constructed, so changes in formSubmission object will not change the fetchRequest object. Am I right? How can I achieve to modify the form data via turbo event?

Thanks.

[davidjr82]

So finally I figure out how to make it works. Thanks @michelson for the idea of request.js. At the end, I have modified the fetchRequest body object of the formSubmission object. Just in case it helps someone in the future, here is how I did it:

document.addEventListener('turbo:submit-start', function (event) {
    event.detail.formSubmission.fetchRequest.body.append('input_name', 'example_value');
});

Thanks again!

[mike1o1]

For anybody else coming to this, I was looking for a way to sync some fields on submit. Hooking into the turbo:submit-start seemed like the ideal approach, but it seems like that was too late in the process.

Instead, I just hooked into the normal form submit event and synced the hidden fields there. Then, when turbo:submit-start is fired, the form data is already there.