はじめに
フォームを送信する前に処理を行いたいケース（Google Analyticsのイベントのトラッキングなど）があると思います。
今回はform_withを利用してAjax送信する前に何らかの処理を行うサンプルを紹介します。
form_with
form_withはRails5.1から追加されたフォームを作成するためのヘルパーです。
form_withを扱う上で注意すべき点はデフォルトでAjax送信になるということです。送信時にページ遷移したい場合は
local: true
を指定する必要があります。
サンプル
最小限のサンプルコードを下記に記載します。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | <%= 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();
を使う点に注意が必要です。
さいごに
form_withでフォームを送信する前に任意の処理を行うサンプルを紹介しました。
