Rails hidden field in form - ruby-on-rails

Question

I have a has_many, through: relationship in my Rails application.
Groups Model
class Group < ApplicationRecord
has_many :usergroups
has_many :users, through: :usergroups
end
User Model
class User < ApplicationRecord
has_many :groups, through: :usergroups
end
Usergroups Model
class Usergroup < ApplicationRecord
belongs_to :user
belongs_to :group
end
In my route http://localhost:3000/usergroups/new I have this form.
<%= form_with(model: usergroup, local: true) do |form| %>
<div class="field">
<%= form.label :user_id %>
<%= form.text_field :user_id, id: 'user', data: { autocomplete_source: User.order(:email).map(&:email) } %>
</div>
<div class="field">
<%= form.label :group_id %>
<%= form.text_field :group_id, id: 'group', data: { autocomplete_source: Group.order(:group_name).map(&:group_name) } %>
</div>
<%= form.submit %>
<% end %>
I am using jQuery autocomplete to search for these fields with the data attribute being whatever the user is entering into the User and Group field.
Since I need the user_id and the group_id to be able to add these users I am running into an issue because it is populating the user_email and group_name instead of the user_id and group_id. How can I add these users with the email and group name or add a hidden field with the id based on the group_name and user_email they add?

Answer 1

You can set the value of the selected option using select event listener for each combo box, but before that, you need to get the id of group and email:
Form:
// Update the 'data' attribute for both text fields, so you will get the id and value:
<%= form_with(model: usergroup, local: true) do |form| %>
<div class="field">
<%= form.label :user_id %>
<%= f.hidden_field :user_id %>
<%= form.text_field :user_id, id: 'user', data: { autocomplete_source: User.order(:email).map{ |item| {id: item.id , value: item.email} } } %>
</div>
<div class="field">
<%= form.label :group_id %>
<%= f.hidden_field :group_id %>
<%= form.text_field :group_id, id: 'group', data: { autocomplete_source: Group.order(:group_name).map{ |item| {id: item.id , value: item.group_name } } } %>
</div>
<%= form.submit %>
<% end %>
Javascript:
//below events can be combined into one
$("#user").autocomplete({
// suppose ui represents the returned value
select: function( event, ui ) {
$("#user").attr('data-selected-id', ui.item.id);
// to set a hidden field
$('[name="usergroup[user_id]"]').val(ui.item.id);
console.log(ui.item);
return false;
}
});
$("#group").autocomplete({
// ui.item represents the returned object { id: # , value: ''}
select: function( event, ui ) {
this.value = ui.item.value;
$("#group").attr('data-selected-id', ui.item.id);
// to set a hidden field
$('[name="usergroup[group_id]"]').val(ui.item.id);
console.log(ui.item);
return false;
}
});