【初心者向け】予め登録したデータを、選択コマンドで入力フォームに自動入力させたい

困っていたこと

• プルダウンに予め登録したデータをセットして、それを選択すると、フォームに自動入力させたいと思っていた
• いろんな記事を試してみたが、formヘルパーを使用していると上手くいかない方法が多かった
• formヘルパーをやめるなどの方法もあったが、セキュリティのためにformヘルパーを使えることが望ましいと考えた

やりたいこと

• 予め雛形となるデータを登録しておく
• 選択コマンドで選択すると、入力フォームに自動入力される
• 単なるテンプレートではなく、登録時に数値を変えることも可能にしたい

開発環境

ruby '2.6.6'
gem 'rails', '~> 6.0.3', '>= 6.0.3.3'

実装内容

• undone_actionモデル(カラムは、action_nameとdefault_time)には、予めデータが登録されている状態
• undone_actionsをセレクトボックスにセット
• セレクトボックスを選択すると、イベントが発生し、入力フォームのsavings_nameとearned_timeに値が入る

new.html.erb

<%= form_with(model: @savings_record, local: true) do |f| %>
  <div class="form-group>
    <label>My 不要行動</label>
    <select multiple id="my_undone_action" class="form-control" onChange='auto_input()'>
      <option disabled selected value>Choose...</option>
      <% current_user.undone_actions.each do |undone_action| %>
        <option value= "<%= undone_action.action_name %>&<%= undone_action.default_time %>"><%= undone_action.action_name %></option>
      <% end %>
    </select>
  </div>

  <div class="form-group">
    <%= f.label :savings_name, "不要行動" %>
    <%= f.text_field :savings_name, autofocus: true %>
  </div>

  <div class="form-group">
    <%= f.label :earned_time, "所要時間(分)" %>
    <%= f.number_field :earned_time, autofocus: true %>
  </div>

  <div class="actions">
    <%= f.submit "貯金する" %>
  </div>
<% end %>

<script>
  var auto_input = function () {
    var element = document.getElementById("my_undone_action");
    document.getElementById("savings_record_savings_name").value = element.value.split("&")[0];
    document.getElementById("savings_record_earned_time").value = element.value.split("&")[1];
  }
</script>

完成形

選択コマンド、クリック前

選択コマンド、クリック後

　最後に

web系企業に転職を目指して、ポートフォリオ作成中に躓いたポイントを投稿しました。同じ悩みを持った誰かの一助となれば幸いです。