Optionally serialize form or partial form when invoking command

[cmer]

By adding data-turbo-command-serialize-form="true" to any HTML tag with a data-turbo-command, the closest form values will be serialized and included in the payload sent to the server.

Alternatively, one can specify a CSS selector to send a subset of a form in the payload. For example: data-turbo-command-serialize-form=".foo" or data-turbo-command-serialize-form="#foo" will only serialize the form input elements contained within the selector.

On the server side, the form values can be accessed via params or controller.params, just like one would normally do if a form was submitted.

[hopsoft]

Been sitting on this one for a while, but will turn my attention back to it soon. Thanks for being patient.

[cmer]

Sounds good! I know you initially had reservations about this pattern, but I still think it's one worth having. It makes building truly reactive forms so much easier.

[hopsoft]

@cmer You'll be excited to know that I'm putting some attention on this; though, my solution for it is a bit different than what you have here.

[cmer]

Awesome, @hopsoft ! I can't wait to see what you're cooking up!

[hopsoft]

I haven't forgot about this request and PR. I've just been pulled away from much TurboBoost work of late given some of my day job responsibilities. I hope to revisit this in the new year though.

[cmer]

Looking forward to it!

[hopsoft]

I haven't stood up my PR for this yet, but I have run into a requirement for attaching the form.

FWIW: Here's an Example stimulus controller that I currently attach to the element that invokes the command.

Note

I'm planning to bake something like this into the lib with an opt-in attribute.

import ApplicationController from './application_controller'

export default class extends ApplicationController {
  attachFormData(event) {
    this.element.dataset.form = this.formJSON
  }

  get form() {
    return this.element.closest('form')
  }

  get formData() {
    if (!this.form) return {}
    return Object.fromEntries(new FormData(this.form))
  }

  get formJSON() {
    return JSON.stringify(this.formData)
  }
}

[hopsoft]

Update: The new monorepo has a very elegant solution for this. You can serialize form elements from anywhere on the DOM from multiple parents. They don't even need to be contained within a form. Will have something you can play around with soon.

[cmer]

Thanks for the update, @hopsoft! Where can I see an example of your implementation?