Using JavaScript to display checkboxes in simple_form

Question

I have a simple_form form where users select multiple options via checkboxes. However since there are so many options, the form is cluttered with checkboxes.

I wanted to know if there was a cleaner way to display this. For example, I am thinking about having a "Vegetables" and "Fruits" button, and then when you click on it, a pop up appears where you can then select the checkboxes. I suppose I can do this with JavaScript, but I am not sure about how to implement the code.

Here is a sample of some of my code (using an Act as Taggable gem).

<%= f.input:tag_list, label: "Fruit", as: :check_boxes, collection: [ "Apples", "Peaches", "Oranges" ] %>

<%= f.input:tag_list, label: "Vegetables", as: :check_boxes, collection: [ "Potatoes", "Corn", "Broccoli" ] %>

I was thinking about using a dropdown menu, but you can only select one.

Any help would be appreciated.

Answer 1

Your question isn't clear. You wanted JavaScript to display checkboxes and at the last you want a dropdown with multiple selects.

Anyway I think you can use drop-down with multiple select options

Here is an example drop-down list which can be used to select multiple items at once

<select id="cars" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Have a look into the below link to get more info on multiple select and how you can process the form after multiple selects https://www.w3schools.com/tags/att_select_multiple.asp

Answer 2

I think you can use javascript to accomplish this. Add a hidden field/modal/popup code in the form, add a button/inline-link that opens that hidden field/modal/popup which will show all the options.

Ex: I'm adding a hidden field, you can add a modal/popup(just make sure it's in form )

<%= simple_form_for ... %>

  // This is shown
  <%= f.input :tag_list, label: "Fruit", as: :check_boxes, collection: [ "Apples", "Peaches", "Oranges" ] %>

  <button class="showFruitsBtn">Show More Fruits</button>

  <div class="hiddenFruits">
    <%= f.input :tag_list, label: "Fruit", as: :check_boxes, collection: [ "Banana", "Mango", "Rest of fruits" ] %>
  </div>

<% end %>

Then in JS

const showFruitsBtn = document.getElementById('showFruitsBtn');
const hiddenFruits = document.getElementById('hiddenFruits');

hiddenFruits.style.display = "none";

showFruitsBtn.addEventListener('click', () => {
  // Toggle hide
});

If you're using some reference/model/large array say fruitsArr = ["Apples", "Peaches", "Oranges", "Banana", "Mango", "Rest of fruits"] , then you can do something like this:

  // show this initially
  <%= f.input :tag_list, label: "Fruit", as: :check_boxes, collection: fruitsArr.all[0..3] %>

  <button class="showFruitsBtn">Show More Fruits</button>

  <div class="hiddenFruits">
    <%= f.input :tag_list, label: "Fruit", as: :check_boxes, collection: fruitsArr.all[3...] %> // Endless arrays
  </div>