How to modify formData on turbo:submit-start

[davidjr82]

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.

[michelson]

I don't how, but you could take other approaches like:

1. use https://github.com/rails/request.js and modify the payload, and intercept the submit with a stimulus controller
2. add a hidden field on your forms (maybe with a stimulus controller that appends that automatically )

[davidjr82]

Thanks for the ideas @michelson . I will take a look to the request.js to see if I can modify the payload. About the second idea, it was my first shot, but it wouldn't work because the inputs I want to append appear after the render of the form (modifying the DOM), so that's why I want to add the data in the moment that I send the form submission. About using stimulus, I didn't do that because I saw the before-start event, so I thought I could do it directly there.

I was wondering if there is any way to modify the formSubmission data in the event, something like "before-submit-start event" or something like that, or modify the formData somehow, because I don't know the inner core of turbo.

Thanks again!

[michelson]

check this issue #177 it might help

[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.