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

投稿日：2018年4月12日更新日：2018年4月11日

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>

<%= form_with model: @model, url: any_path, id: 'post-form' do |form| %>

<%= form.submit '送信', id: 'submit-btn' %>

<% end %>

$('#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();を使う点に注意が必要です。

さいごに

form_withでフォームを送信する前に任意の処理を行うサンプルを紹介しました。

参考

rails-ujs と form_with の使い方

[Rails 5.1] ‘form_with’ APIドキュメント完全翻訳

日	月	火	水	木	金	土
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

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

はじめに

form_with

サンプル

さいごに

参考

フォロー

アプリ情報