form_withを使ったRails.fireの使い方

form_withを使ったRails.fireの使い方

JS側からsubmitを行う方法として、Rails.fireを使う方法があります。
Rails.fireを使うとajax通信が可能になります。
form_withの中で、local: falseを指定することによって、html.erbがコンパイルされた結果のhtmlに「data-remote="true"」が記述される様になり、ajax通信が可能になります。

• html.erb側

<%= form_with(model: @hoge, url: '', id: 'hoge_form', local: false) do |f| %>
  <%= f.text_field :name, placeholder: 'test' %>
  <%= f.button id: 'hoge_submit' ,type:'button' %>
<% end %>

• js側

import Rails from "@rails/ujs";

$(document).on ('turbolinks:load', function(){
  $('#hoge_submit').on('click',function(e) {

    Rails.fire($("#hoge_form")[0],'submit');
  }
});

• 参考
  • form_withでRails.fireを使う場合
    • https://www.bokukoko.info/entry/2017/12/22/194327
    • https://teratail.com/questions/333494