フォームヘルパー time_select へのidの設定

前提・実現したいこと

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が付与されています。

フォームが２つあるため、上記のidはそれぞれ２つずつあり、本来一意であるべきidが重複してしまっている状態です。

試したこと

両フォームの「時」「分」入力欄のidが別のものになるよう、
<%= form.time_select :work_start_time, {}, {id: hoge, required: true} %> としてみたところ、今度は「時」「分」入力欄のidが id="hoge" と両方とも同じになってしまい、idで両欄の区別をすることができなくなってしまいました。。

つきましては、2つのフォームでidが重複せず、idの「時」入力欄、「分」入力欄に別のidを付与する方法をご教示いただきたいです。

参考にした情報

time_selectの使用例

winterboum

2020/05/05 09:02

「フォームが２つあるため」とありますが載せられている view には一つしか無いです。問題が有る所は省略無く載せてください.

t.togashi

2020/05/05 09:13

ありがとうございます。問題箇所のコードを省略せずに記載しました。よろしくお願いいたします。

行動規範の内容に同意します

回答1件

わからん、、、、
「フォームが２つある」のformって「form.time_select」のことですか？
「<%= form_with model」のことではなく。
form.time_select　は　formではなく、formの中の入力要素なのでいくつあろうと関係ないです。
「上記のidはそれぞれ２つずつあり」とありますが、無いと思うのですが。
"overtime_work_start_time_4i" "overtime_work_start_time_5i" と
"overtime_work_end_time_4i" "overtime_work_end_time_5i"
では？　似てますが違いますよね。
ですから「idが重複」してはいない。

元のものでどんな問題が生じたのでしょう？

投稿2020/05/05 10:55

winterboum

総合スコア23567