f.number_fieldの初期値
f.number_fieldの初期値
f.number_fieldの初期値を設定する際に調べたことを自分の備忘録としてこちらにまとめます。
下記のようなセレクトボックスの場合に検索後に、検索に選択したセレクトボックスの内容をそのままにする際は、[selected]オプションを付与することで、クライアントから送られてきたパラメーターをサーバー側で受け取りその値をselectedに渡すことで、最初からセレクトボックスが選択されたHTMLをレスポンスすることで実現できた。(コードは、以下参照)
= form_with url: search_calculate_cooking_time_cooking_informations_path, local: true do |f|
.form-group
= f.collection_select :fish_kind, @fishes, :kind, :kind, { include_blank: '魚の種類(必須)', selected: params[:fish_kind] }, {class: 'search_select_form'}
= f.collection_select :cooking_name, @cookings, :name, :name, { include_blank: '料理の種類(必須)', selected: params[:cooking_name]}, {class: 'search_select_form'}
= button_tag type: 'submit', class: 'btn btn-primary search_button' do
i.fas.fa-search
数値入力ボックスの場合も以下のようにサーバーにリクエストを送った後にレスポンスされてブラウザに表示される場合も数値入力の欄に入力した数値が残ったままにしたいと思ったが、ドキュメントを見たり記事を調べても[f.collection_select]の[selected]オプションのように初期値を設定するやり方が見つからなかった。
数値入力ボックスに値を入れてサーバーに送りレスポンスされると以下のように数値入力ボックスがリセットされて最初に入れた数値が残らない状態になる。
= form_with url: calculate_cooking_time_cooking_informations_path do |f|
= render partial: 'shared/flash_message'
.form-group
= f.label :count, '調理する魚の数:'
= f.number_field :count, min: 1, placeholder: '料理する魚の数(必須)', class: 'calculate-fish-count-form text-center'
.form-group
= f.label :let_foodstuff_capacity, '食材を寝かせられるキャパシティ:'
= f.number_field :let_foodstuff_capacity, min: 1, step: 0.5, placeholder: '匹数(必須)', class: 'calculate-cooking-capacity-form mt-2 text-center'
.form-group
= f.label :cookware_capacity, '調理機材のキャパシティ:'
= f.number_field :cookware_capacity, min: 1, step: 0.5, placeholder: '匹数(必須)', class: 'calculate-cooking-capacity-form mt-2 text-center'
.form-group
= hidden_field_tag :fish_kind, @fish_kind
= hidden_field_tag :cooking_name, @cooking_name
= f.submit '合計の料理時間は?', class: 'btn btn-primary calculate-cooking-time-button mt-2'
そもそも数値入力ボックスに値が入ったHTMLは、どのようになっているのか開発者ツールで確認したところ以下のようになっていた。
<input min="1" placeholder="料理する魚の数(必須)" value="5" class="calculate-fish-count-form text-center" type="number" name="count" id="count">
[value]属性に値を渡すことで、数値入力ボックスに値が入った状態になる。
上記のことから下記のように[value]オプションにクライアントから送られてきたパラメーターを渡すことで、[value]に値が入ったHTMLをレスポンスしてブラウザ上では、入力した数値が入ったままの状態になる。
= form_with url: calculate_cooking_time_cooking_informations_path do |f|
= render partial: 'shared/flash_message'
.form-group
= f.label :count, '調理する魚の数:'
= f.number_field :count, min: 1, placeholder: '料理する魚の数(必須)', value: params[:count], class: 'calculate-fish-count-form text-center'
.form-group
= f.label :let_foodstuff_capacity, '食材を寝かせられるキャパシティ:'
= f.number_field :let_foodstuff_capacity, min: 1, step: 0.5, placeholder: '匹数(必須)', value: params[:let_foodstuff_capacity], class: 'calculate-cooking-capacity-form mt-2 text-center'
.form-group
= f.label :cookware_capacity, '調理機材のキャパシティ:'
= f.number_field :cookware_capacity, min: 1, step: 0.5, placeholder: '匹数(必須)', value: params[:cookware_capacity], class: 'calculate-cooking-capacity-form mt-2 text-center'
.form-group
= hidden_field_tag :fish_kind, @fish_kind
= hidden_field_tag :cooking_name, @cooking_name
= f.submit '合計の料理時間は?', class: 'btn btn-primary calculate-cooking-time-button mt-2'
