Select_tag rails, динамически отображать значение перед отправкой

Question

У меня есть форма, показывающая некоторые доступные банки, которые я могу выбрать, используя select_tag. Выбранный банк сохраняется в params [: bank], когда я отправляю форму

. Я хочу динамически отображать информацию о выбранном банке перед отправкой. В основном, если я выбрал «Банк 1», я хочу отобразить информацию о банке 1. Если я выберу Банк 2, я хочу отобразить информацию о Банке 2. И когда я счастлив, я отправляю.

Вот мой код

<%= form_tag final_payments_path, method: :get do %>

  <%= select_tag "bank", options_from_collection_for_select(Bank.active, "id", "name") %>

  <%= button_tag( class: "btn-continue-displayed mt-3") do %>
   <i class="fas fa-caret-left"></i><p>Approve</p>
  <% end %>
<% end %>

Как я могу динамически найти выбранную опцию перед отправкой и отображением информации?

МойПервым шагом было добавление onchange: «alert (this.value)» в мой тег select. Это работает и показывает идентификатор. Если я изменяю и ставлю

 options_from_collection_for_select(Bank.active, "IBAN", "name")

, это показывает предупреждение с IBAN. Что является хорошим началом.

Есть ли способ, которым я могу поместить в значение 3 элемента (id, IBAN и SWIFT) вместо одного?

Большое спасибо за вашу помощь

Answer 1

Вы можете найти идентификатор банка через js:

$('#select_tag_id').on('change', function () {
    let bank_id = $(this).val();
});

bank_id будет содержать идентификатор выбранного банка.

rout.rb:

  get "/selected_bank" => 'your_controller#show_info'

Тогда:

$('#select_tag_id').on('change', function () {
      let bank_id = $(this).val();
      $.ajax({
          data: {bank_id: bank_id},
          url: '/selected_bank',
          type: 'GET'
      });
  });

Ваш контроллер:

def show_info
  @bank = Bank.find(params[:bank_id])
  respond_to { |format| format.js }
end

_info.html.erb:

<div class="info">
  <p>
    Id:
    <%= @bank.id %>
  </p>
  <p>
    Name:
    <%= @bank.name %>
  </p>
</div>

show_info.js.erb:

$('.some-class-on-page').html("<%= j(render 'info') %>");