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

サンプル

さいごに

参考

フォロー

アプリ情報