How to use stimulus to switch the message of turbo_confirm of form

1

hello. I’d like to switch with a button that clicks on the turbo_confirm message that is displayed when submitting a rails form.
The view is as below.

<%= form_with(url: entries_path, id: "entry_form", method: :post, 
    data: { controller: "confirmation" } ) do |f| %>
  <div>
    <%= button_tag type: 'submit', name: "pre_flg", value: "1",
         data: { action: "click->confirmation#confirm_1", "confirmation-target": "button_1", message: t(".pre_entry_confirm") } do %>
      <span class="text-xl">
        pre_entry
      </span>
    <% end %>
  </div> 

  <div>
    <%= button_tag type: 'submit', name: "pre_flg", value: "0",
         data: { action: "click->confirmation#confirm_2", "confirmation-target": "button_2", message: t(".entry_confirm") } do %>
      <span class="text-xl">
        entry
      </span>
    <% end %>
  </div>
<% end %>

The stimulus controller is below.

import { Controller } from '@hotwired/stimulus'

export default class extends Controller {
  static targets = [ "button_1", "button_2" ]
  confirm_1(event) {
    console.log(this.button_1Target.dataset.message)
    if (!(this.element.dataset.turbo_confirm = this.button_1Target.dataset.message)) {
      event.preventDefault()
    }
  }
  confirm_2(event) {
    console.log(this.button_2Target.dataset.message)
    if (!(this.element.dataset.turbo_confirm = this.button_2Target.dataset.message)) {
      event.preventDefault()
    }
  }
}

Unfortunately the above stimulus controller did not display a confirm prompt.
I’d like to assign this.button_#Target.dataset.message to data-turbo_confirm element, what should I do?
If there is a different way to implement the feature, please let me know.
I’d appreciate it if you could give me some advice :man_bowing:

2

If I understand correctly what you are trying to accomplish, you can do this without adding a stimulus controller using the form attribute on the button.

- <%= form_with(url: entries_path, id: "entry_form", method: :post,
-             data: { controller: "confirmation" } ) do |f| %>
+ <%= form_with(url: entries_path, id: "entry_form", method: :post ) do |f| %>
  <div>
-   <%= button_tag type: 'submit', name: "pre_flg", value: "1",
-                  data: { action: "click->confirmation#confirm_1", "confirmation-target": "button_1", message: t(".pre_entry_confirm") } do %>
+     <%= button_tag type: 'submit', name: "pre_flg", value: "1", form: { data: { turbo_confirm: t(".pre_entry_confirm") } } do %>
      <span class="text-xl">
        pre_entry
      </span>
    <% end %>
  </div>

  <div>
-   <%= button_tag type: 'submit', name: "pre_flg", value: "0",
-                  data: { action: "click->confirmation#confirm_2", "confirmation-target": "button_2", message: t(".entry_confirm") } do %>
+   <%= button_tag type: 'submit', name: "pre_flg", value: "0", form: { data: { turbo_confirm: t(".entry_confirm") } } do %>               
      <span class="text-xl">
        entry
      </span>
    <% end %>
  </div>
<% end %>
3

thank you for the advice. You probably understand what I want to do. But unfortunately with the method you suggested, pressing either button didn’t show the confirm prompt and didn’t even submit the form. When I click it, nothing happens. :sob:
Does it stop working if add a form attribute to the button that submits in form_with? :thinking: