Is it possible to just update Rails form input field value using turbo frames?

Question

Let's say I have a form built with Rails form builder. It has a text field, and I want to dynamically update the input field's value using AJAX and turbo streams.

Is it possible to update the same text field's value without replacing it with a newly created text field using the text_field helper from the turbo stream view?

This Gorails tutorial has a similar use case, but he is updating the values of a select tag. So, he just updated the options of the select tag using options_for_select helper so the select field remains on the DOM as it is, while only the options are replaced.

I'm curious why updating the field, vs. just the contents, is unacceptable? — Les Nightingill, Jul 22 '23 at 18:39

score 1 · Accepted Answer · answered Jul 22 '23 at 17:09

There is no built in way to do this, but making custom turbo stream actions is very easy:

// app/javascript/application.js

Turbo.StreamActions.update_input = function () {
  this.targetElements.forEach((target) => {
    target.value = this.templateContent.textContent
  });
};

# app/views/users/_form.html.erb

<%= form_with model: @user do |f| %>
  <%= f.text_field :name %>
  <%= f.submit %>
<% end %>

# app/controllers/users_controller.rb

def update
  helpers.fields model: @user do |f|
    render turbo_stream: turbo_stream.action(
     :update_input, f.field_id(:name), "new value"
    )
  end
end

https://turbo.hotwired.dev/handbook/streams#custom-actions

If you need another example:
https://stackoverflow.com/a/76112894/207090

Wow! that's a nice approach. Thanks a lot. – jkvithanage Jul 22 '23 at 21:35 — jkvithanage, Jul 22 '23 at 21:35

Is it possible to just update Rails form input field value using turbo frames?

1 Answers1