【Rails】Railsのform_withでリセットボタンを設定

はじめに

Rails のform_withを使用して検索フォームを実装するにあたり、リセットボタンの実装方法について調べました。

HTMLではinputタグでtype="reset"を指定すれば簡単にリセットボタンを作成できます。

<form>
  <input type="reset" value="リセット">
</form>

form_withでもtype属性にresetを設定できるのでしょうか。

使用環境

• Ruby 2.7
• Rails 6.1
• Bootstrap 4.0

type="reset"を生成するヘルパーはなさそう

form_withでは様々なフォーム要素を生成するヘルパーメソッドがあります。
(例)

<%= form.text_field :title %>
<%= form.check_box :pet_dog %>
<%= form.radio_button :age, "child" %>
<%= form.text_area :message, size: "70x5" %>
<%= form.hidden_field :parent_id, value: "foo" %>
<%= form.password_field :password %>
<%= form.number_field :price, in: 1.0..20.0, step: 0.5 %>
<%= form.range_field :discount, in: 1..100 %>
<%= form.date_field :born_on %>
<%= form.time_field :started_at %>
<%= form.datetime_local_field :graduation_day %>
<%= form.month_field :birthday_month %>
<%= form.week_field :birthday_week %>
<%= form.search_field :name %>
<%= form.email_field :address %>
<%= form.telephone_field :phone %>
<%= form.url_field :homepage %>
<%= form.color_field :favorite_color %>

送信ボタンを生成はform.submitがあります。
（class には Bootstrap を使用しています。）

<%= form.submit "検索する", class: 'btn btn-info btn-block my-3' %>

#=> HTML出力
<input type="submit" name="commit" value="検索する"　class="btn btn-info btn-block my-3" data-disable-with="検索する">

この送信ボタンのtype属性がresetで生成できるヘルパーを調べて見たのですが、見つかりませんでした。（form.resetのように定義して生成できればよかったのですが...。）

参考 :　Railsガイド

解決策

1. jQueryの.reset()を使うと簡単に生成できる

入力した値を初期値にリセットする

（注）reset()を使用する場合、あらかじめ値が入力されているフォームはその値に戻るため、フォームが空にはなりません。
初期値が空の状態のフォームに値を入力して、やっぱり「リセットしたい！」という時にリセットボタンを押下すると初期値の空の状態に戻ります。

HTML出力

<form id="post_search">
  <label for="q_user_name_or_content_cont">キーワード</label>
  <input type="search" id="q_user_name_or_content_cont">
</form>

<button type="button" id="reset-button">リセット</button>

iQuery

$(function(){
  $('#reset-button').on('click', function(){
    $('#post_search')[0].reset();
  });
});

これでid="post_search"を持つフォームのフィールドの値が一括リセットされます。

2. jQueryのval('')を使用して、空にする

リセットボタンを押下した場合に、フォームに空の値を挿入する
HTML出力

<form id="post_search">
  <label for="q_user_name_or_content_cont">キーワード</label>
  <input type="search" id="q_user_name_or_content_cont">
</form>

<button type="button" id="reset-button">リセット</button>

iQuery

$(function(){
  $('#reset-button').on('click', function(){
    $('input[type="search"]').val('');
  });
});

これでinput[type="search"]を持つフォームのフィールドが空になります。

まとめ

僕の実装の場合は検索ボタン押下後ページ遷移しても検索フォームにキーワードを残しているので、フィールドのvalueに値が挿入されている状態になっています。そのためval('')として空を挿入しました。

リセットボタンで初期値に戻したい場合 => reser()
リセットボタンでフォームの値を空にしたい => val('')

のような使い方で良いのかな？と思います。