前提・実現したいこと
Ruby on Railsで、残業時間を記録するシステムを制作しています。
システムにおいて、
- 残業記録の新規登録
- 登録済残業記録の修正
をするフォームを同一ページ内に設置しています。
両フォームにおいて、時間入力用に フォームヘルパー time_select を使用しており、
time_select の「時」「分」欄からJavaScriptで数値を取得し、時間の計算を行っています。
該当のソースコード
erb
1新規登録フォーム 2<div id="new-form"> 3 <%= form_with model: Overtime.new do |form| %> 4 5 <div class="input-group"> 6 <div class="input-group-prepend"> 7 <span class="input-group-text">日付</span> 8 </div> 9 <%= form.date_field :date, class: 'form-control', id: "new-calendar" %> 10 </div> 11 12 <div class="input-group mt-3 input-time"> 13 <div class="input-group-prepend"> 14 <span class="input-group-text">開始時刻</span> 15 </div> 16 <%= form.time_select :work_start_time, {}, required: true %> 17 </div> 18 19 <div class="input-group mt-3 input-time"> 20 <div class="input-group-prepend"> 21 <span class="input-group-text">終了時刻</span> 22 </div> 23 <%= form.time_select :work_end_time, {}, required: true %> 24 </div> 25 26 <div class="input-group mt-3"> 27 <div class="input-group-prepend"> 28 <span class="input-group-text">残業時間</span> 29 </div> 30 <%= form.text_field :work_time, class: 'form-control', id: "new-work-time", readonly: true, required: true %> 31 </div> 32 33 <div class="form-group mt-3"> 34 <%= form.submit '追加', class: 'btn btn-primary btn-block' %> 35 </div> 36 <% end %> 37</div> 38 39 40修正フォーム 41<div id="edit-form"> 42 <%= form_with model: Overtime.new, method: :patch do |form| %> 43 44 <div class="input-group"> 45 <div class="input-group-prepend"> 46 <span class="input-group-text">日付</span> 47 </div> 48 <%= form.date_field :date, class: 'form-control', id: "edit-calendar" %> 49 </div> 50 <small>記録が存在しない日付は選択できません</small> 51 52 <div class="input-group mt-3 input-time"> 53 <div class="input-group-prepend"> 54 <span class="input-group-text">開始時刻</span> 55 </div> 56 <%= form.time_select :work_start_time, {}, required: true %> 57 </div> 58 59 <div class="input-group mt-3 input-time"> 60 <div class="input-group-prepend"> 61 <span class="input-group-text">終了時刻</span> 62 </div> 63 <%= form.time_select :work_end_time, {}, required: true %> 64 </div> 65 66 <div class="input-group mt-3"> 67 <div class="input-group-prepend"> 68 <span class="input-group-text">残業時間</span> 69 </div> 70 <%= form.text_field :work_time, class: 'form-control', id: "edit-work-time", readonly: true, required: true %> 71 </div> 72 73 <div class="form-group mt-3"> 74 <%= form.submit '修正', class: 'btn btn-primary btn-block' %> 75 </div> 76 <% end %> 77</div>
発生している問題・エラーメッセージ
ブラウザの検証機能で確認すると、上記のコードにより、「時」入力欄にはid="overtime_work_start_time_4i"
、「分」入力欄には id="overtime_work_start_time_5i"
というidが付与されています。
フォームが2つあるため、上記のidはそれぞれ2つずつあり、本来一意であるべきidが重複してしまっている状態です。
試したこと
両フォームの「時」「分」入力欄のidが別のものになるよう、
<%= form.time_select :work_start_time, {}, {id: hoge, required: true} %>
としてみたところ、今度は「時」「分」入力欄のidが id="hoge"
と両方とも同じになってしまい、idで両欄の区別をすることができなくなってしまいました。。
つきましては、2つのフォームでidが重複せず、idの「時」入力欄、「分」入力欄に別のidを付与する方法をご教示いただきたいです。