質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

1回答

1251閲覧

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

t.togashi

総合スコア22

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

0グッド

0クリップ

投稿2020/05/02 13:55

編集2020/05/05 09:12

前提・実現したいこと

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を付与する方法をご教示いただきたいです。

参考にした情報

time_selectの使用例

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

winterboum

2020/05/05 09:02

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

2020/05/05 09:13

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

回答1

0

わからん、、、、
「フォームが2つある」のformって「form.time_select」のことですか?
「<%= form_with model」のことではなく。
form.time_select は formではなく、formの中の入力要素なのでいくつあろうと関係ないです。
「上記のidはそれぞれ2つずつあり」とありますが、無いと思うのですが。
"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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

winterboum

2020/05/05 13:25

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問