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

Question

前提・実現したいこと

Ruby on Railsで、残業時間を記録するシステムを制作しています。
システムにおいて、

• 残業記録の新規登録
• 登録済残業記録の修正

をするフォームを同一ページ内に設置しています。
両フォームにおいて、時間入力用に フォームヘルパー time_select を使用しており、
time_select の「時」「分」欄からJavaScriptで数値を取得し、時間の計算を行っています。

該当のソースコード

新規登録フォーム
<div id="new-form">
  <%= form_with model: Overtime.new do |form| %>

    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">日付</span>
      </div>
      <%= form.date_field :date, class: 'form-control', id: "new-calendar" %>
    </div>

    <div class="input-group mt-3 input-time">
      <div class="input-group-prepend">
        <span class="input-group-text">開始時刻</span>
      </div>
      <%= form.time_select :work_start_time, {}, required: true %>
    </div>

    <div class="input-group mt-3 input-time">
      <div class="input-group-prepend">
        <span class="input-group-text">終了時刻</span>
      </div>
      <%= form.time_select :work_end_time, {}, required: true %>
    </div>

    <div class="input-group mt-3">
      <div class="input-group-prepend">
        <span class="input-group-text">残業時間</span>
      </div>
      <%= form.text_field :work_time, class: 'form-control', id: "new-work-time", readonly: true, required: true %>
    </div>

    <div class="form-group mt-3">
      <%= form.submit '追加', class: 'btn btn-primary btn-block' %>
    </div>
  <% end %>
</div>


修正フォーム
<div id="edit-form">
  <%= form_with model: Overtime.new, method: :patch do |form| %>

    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">日付</span>
      </div>
      <%= form.date_field :date, class: 'form-control', id: "edit-calendar" %>
    </div>
    <small>記録が存在しない日付は選択できません</small>

    <div class="input-group mt-3 input-time">
      <div class="input-group-prepend">
        <span class="input-group-text">開始時刻</span>
      </div>
      <%= form.time_select :work_start_time, {}, required: true %>
    </div>

    <div class="input-group mt-3 input-time">
      <div class="input-group-prepend">
        <span class="input-group-text">終了時刻</span>
      </div>
      <%= form.time_select :work_end_time, {}, required: true %>
    </div>

    <div class="input-group mt-3">
      <div class="input-group-prepend">
        <span class="input-group-text">残業時間</span>
      </div>
      <%= form.text_field :work_time, class: 'form-control', id: "edit-work-time", readonly: true, required: true %>
    </div>

    <div class="form-group mt-3">
      <%= form.submit '修正', class: 'btn btn-primary btn-block' %>
    </div>
  <% end %>
</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の使用例

Comments

[winterboum]

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

[t.togashi]

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

Answer 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が重複」してはいない。

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

Comments

[t.togashi]

説明が悪く申し訳ありません。
以下のページ、ブラウの検証機能 consoleにて問題の発生が確認できます。

https://intense-atoll-05047.herokuapp.com/users/1

[winterboum]

ですからどういう問題でしょうか。
確認するにも、
どういう手順でどうやると、どうなってほしいのに、どうなる
という情報がないと確認にならない