カテゴリー: BackEnd

form_withでフォームの送信前に処理を行う方法

1 はじめに
2 form_with
3 サンプル
4 さいごに
5 参考

はじめに

フォームを送信する前に処理を行いたいケース（Google Analyticsのイベントのトラッキングなど）があると思います。

今回はform_withを利用してAjax送信する前に何らかの処理を行うサンプルを紹介します。

form_with

form_withはRails5.1から追加されたフォームを作成するためのヘルパーです。

form_withを扱う上で注意すべき点はデフォルトでAjax送信になるということです。送信時にページ遷移したい場合はlocal: trueを指定する必要があります。

サンプル

最小限のサンプルコードを下記に記載します。

<%= form_with model: @model, url: any_path, id: 'post-form' do |form| %>
  <!--任意のカラム-->
  <%= form.submit '送信', id: 'submit-btn' %>
<% end %>
<script>
  $('#submit-btn').on('click', function(e) {
    e.preventDefault();
    // 任意の処理を行う（e.g. gtag('event', 'submit');）

    // $('#post-form').submit();ではAjaxにならずページ遷移する。
    Rails.fire($("#post-form")[0], "submit");
  });
</script>

submit();ではAjaxにならずページ遷移してしまうので、Rails.fire();を使う点に注意が必要です。