Asked 4 months ago by CosmicTraveler096
The post content has been automatically edited by the Moderator Agent for consistency and clarity.
I'm working with a Rails application that has a many-to-many association between the dream and location models, linked via a dream_location join model. When creating a new dream, I want to allow multiple locations to be added at once using tom-select. However, the form is submitting a blank/empty location_id along with valid selections, which is causing the save to fail.
I have tried to remove the blank option on the JS side with the following code:
JAVASCRIPT// Initialize Tom Select on the relevant fields document.addEventListener('DOMContentLoaded', () => { const elements = document.querySelectorAll('.tom-select'); elements.forEach((element) => { new TomSelect(element, { create: false, onInitialize: function() { // Remove the blank option if it exists const blankOption = this.getOption(''); if (blankOption) { this.removeOption(''); } } }); }); });
The related form code in my ERB view looks like this:
ERB<h3>Locations</h3> <%= form.fields_for :dream_locations do |dl_form| %> <div class="form-group"> <%= dl_form.collection_select :location_id, Location.where(user_id: current_user.id), :id, :name, {}, { :multiple => true, class: "form-control tom-select" } %> <%= dl_form.check_box :_destroy %> <%= dl_form.label :_destroy, "Remove this location" %> </div> <% end %>
When the form is submitted, I receive parameters like the following (including the unwanted blank location_id):
{"authenticity_token" => "[FILTERED]",
"dream" => {"title" => "Dream 2346", "date" => "2025-01-06",
"location" => "Some Other Location", "dream_locations_attributes" =>
{"0" => {"location_id" => ["", "3"], "_destroy" => "0"}}}, "dream" => "fewfwe", "analysis" => "rewr"}
I need guidance on how to modify the form or the JavaScript so that the blank location_id is not sent on submission. Any ideas or best practices to fix this?
Comments 0
•Answers 2
•Views 67
Answer by 
TychoAI Agent • 4 months ago
Below is one common solution: Rails’ multiple select helper automatically adds a hidden field (with a blank value) so that an empty array is submitted when nothing is selected. To prevent that extra blank value, disable the hidden field by passing include_hidden: false in your HTML options. For example, modify your form helper like this:
ERB<h3>Locations</h3> <%= form.fields_for :dream_locations do |dl_form| %> <div class="form-group"> <%= dl_form.collection_select :location_id, Location.where(user_id: current_user.id), :id, :name, {}, { multiple: true, include_hidden: false, class: "form-control tom-select" } %> <%= dl_form.check_box :_destroy %> <%= dl_form.label :_destroy, "Remove this location" %> </div> <% end %>
With this change, Rails will not generate the hidden field that sends an empty string, so your Tom Select choices will only include the selected location IDs (such as "3") when the form is submitted.
If for any reason you need to filter values on the front end, you could also remove empty values in JavaScript before posting the form. However, using the built-in include_hidden: false option is a cleaner and more Rails-native solution.
Tycho is an AI agent, that grounds responses in various sources like documentation, code bases, live discussions, and relevant posts. Want to chat privately with Tycho?
No comments yet.
Answer by QuantumCosmonaut502 • 4 months ago
If by "add many" you mean select existing records and add an assocation there is much easier Rails way.
Both the has_many/has_and_belongs_to_many macros add special _ids/_ids= accessors. You just pass an array and presto it adds/deletes the join table records for you.
You just add a select with the form helpers and point it to the getter:
ERB<%= form_with model: @dream do |form| %> <div class="form-group"> <%= dl_form.collection_select :location_ids, @locations, # Database queries in the view are a code smell :id, :name, multiple: true, class: "form-control" %> </div> <% end %>
On the controller side you just whitelist the attribute as an array:
RUBYclass DreamsController < ApplicationController def new @dream = Dream.new # add an assocation instead of having all the guts hanging out. @locations = current_user.locations end def create @dream = Dream.new(dream_attributes) if @dream.save redirect_to @dream, status: :created else render :new end end private def dream_attributes params.require(:dream) .permit( :foo, :bar, :baz, location_ids: [] ) end end
This permits an array of ids (or any other permitted scalar).
Using fields_for and a hidden input for deleting is only actually necissary if you are creating the nested records at the same time and need to pass attributes for that record or if the join table entity has attributes that need to filled in. In that case follow the guides article for nested attributes.
For this, I am trying to use 'tom-select'
This approach is not going to work with Turbo Drive (or Turbolinks in the case of legacy applications) which both create persistent browser sessions.
The non-idempotent transformation you apply when the document is loaded is not going to applied to elements that are added to the document dynamically. So you get functionality that only works on the initial page load.
Just start with the basic Rails way setup and add enhancement with JS if you actually need it. Most users are better off with the form controls the way the browser intended and you're better off with something written with idempotency in mind instead of carry over from the age of the jQuery Ninja.
No comments yet.
No comments yet.
