Feature Request: Add "hooks" for form helper to modify data before sent

[tomhrtly]

At the moment, to integrate reCAPTCHA v3 with the Inertia form helper, you have to add the reCAPTCHA code to every form in your application like so:

methods: {
    onSubmit() {
        const { grecaptcha } = window;

        grecaptcha.ready(() => {
            grecaptcha.execute('site_key', {
                action: 'submit',
            }).then((token) => {
                this.form.token = token;
                this.form.post('/endpoint');
            });
        });
    },
}

It would be great to be able to add this only once for all forms so that there is no reCAPTCHA duplication. Maybe something like this would work in app.js:

const { grecaptcha } = window;
const form = app.config.globalProperties.$form;

form.onBefore(() => {
    grecaptcha.ready(() => {
        grecaptcha.execute('site_key', {
            action: 'submit',
        }).then((token) => {
            form.token = token;
        });
    });
});

It might be handy to have the events in the form helper to be used as "hooks" as well, mainly because if a Promise is executed in the onBefore which adds another property to the form (in this case the reCAPTCHA token), the form is submitted before the Promise has been resolved.

@reinink I'd be willing to submit a PR for this if an agreement was made on implementation.

[claudiodekker]

Hi @tomhrtly,

This actually already exists in Inertia to some extent, using the transform method, which you can use to modify the data that is being submitted moments before it actually gets sent.

Here's a basic Vue example of what this could looks like. In this situation, I'm excluding the user field, and am instead using it to set an user_id to either the user id or null:

this.form = this.$inertia.form({
    user: this.user
  })
  .transform(({ user, ...data }) => ({
    user_id: user?.id,
    ...data,
  }))

// Somewhere else at a later point..
this.form.post(`/example')

Let me know if this solves your problem!

[tomhrtly]

@claudiodekker this is just what I needed, thanks!