I was in trouble

――I wanted to set the pre-registered data in the pull-down and select it to automatically fill in the form. ――I tried various articles, but there were many methods that did not work when using the form helper. --There was a way to stop the form helper, but I thought it would be desirable to use the form helper for security.

Thing you want to do

--Register the template data in advance --When selected with the selection command, it is automatically filled in the input form. ――I want to be able to change the numerical value at the time of registration, not just a template

Development environment

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

Implementation details

--Data is registered in advance in the undone_action model (columns are action_name and default_time). --Set undone_actions in the select box --When you select the select box, an event occurs and the saves_name and earned_time of the input form are filled in.

`ruby:new.html.erb`



<%= form_with(model: @savings_record, local: true) do |f| %>
  <div class="form-group>
    <label>My unnecessary behavior</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, "Unnecessary behavior" %>
    <%= f.text_field :savings_name, autofocus: true %>
  </div>

  <div class="form-group">
    <%= f.label :earned_time, "Time required(Minutes)" %>
    <%= f.number_field :earned_time, autofocus: true %>
  </div>

  <div class="actions">
    <%= f.submit "save money" %>
  </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>

Completed form

Select command, before clicking

スクリーンショット 2020-11-03 23.40.07.png

Select command, after clicking

スクリーンショット 2020-11-03 23.43.04.png

Finally

I posted the points that I stumbled upon while creating a portfolio with the aim of changing jobs to a web-based company. I hope it helps someone who has the same problems.

[JAVA] [For beginners] I want to automatically enter pre-registered data in the input form with a selection command.