Radio buttons in Ruby on Rails don't combine well with join tables and the need to have several in a page. This presentation and associated code show a demo with two ways to solve this, one in pure RoR, the other adds in JS and SCSS to make the end result prettier.

1. Multiple radio buttons
Aka join table nightmares

2. Multiple radio buttons
● Scenario and schema
● Rails collection_radio_buttons
● Rails solution
● Rails + SCSS + JS solution
● Links

3. Scenario and schema

4. Scenario
A typical context that needs multiple radio button options on a single page
● Multiple users adding review feedback
● Multiple things to be reviewed
Example sites with these capabilities
● TripAdvisor
○ Hotels
○ Restaurants
● GoodReads
○ Books

5. Book Review Schema
Note to self: review join table architecture

6. Rails collection_radio_buttons

7. <input type="radio" value="2" name="user[books_user][score]" id="user_books_user_score_2">

8. Rails collection_radio_buttons
Rails provides a helper, collection_radio_buttons
<%= @books.each do |book| %>
<%= f.fields_for book.books_users.create do |ff| %>
<%= f.collection_radio_buttons( :score, BooksUser.scores, :id) %>
<% end %>
<% end %>
https://apidock.com/rails/v4.0.2/ActionView/Helpers/FormOptionsHelper/collection_radio_buttons

9. Rails solution

11. View
<%= form_for(@user, html: { method: :put }) do |f| %>
...
<% @books.each do |book| %>
<%= f.fields_for "books_user][#{book.id}" do |ff| %>
<%= ff.collection_radio_buttons :score, BooksUser.scores, :last, :last do |rb| %>
<span title=<%= rb.object[0].humanize %>><%= rb.radio_button %></span>
<% end %>
...
Put > update
Build hidden field
Use span for inline

12. Chrome debugger > elements tab

13. Chrome debugger > network tab > form data

14. Form param syntax - best practice?
Is the param syntax correct / best practice?
● I have no idea
User[books_user][4][score] or User[books_user][user_id][4][score] or … ?
● Possible to build any syntax you want
● As built:
○ Succinct
○ Straightforward to parse in the controller

15. Controller
def update
book_params[:books_user].each do |param|
next unless param.last[:score]&.present?
BooksUser.create(user_id: @user.id, score: param.last[:score].to_i,
book_id: param.first.to_i)
end
redirect_to user_path(@user)
end
def book_params
params.require(:user).permit(books_user: :score)
end

16. View / controller - best practice?
Is it correct / best practice to use edit / put / update?
● I have no idea
The controller code creates join entries
● Natural fit would be new / post / create, BUT
● Create optimised for single create, not multiple
● Both the books and the user already exist
○ We’re only gluing them together with a join table entry

17. Rails + SCSS + JS solution
(without collection_radio_buttons)

19. View
<% @books.each do |book| %>
<%= f.fields_for "books_user][#{book.id}" do |ff| %>
<td class=”book-score” book=<%= book.id %>>
<!-- CSS uses right-to-left, so star index is reversed, ie from 4 to 0 -->
<% star_index = 4 %>
<% 5.times do %>
<span class=”icon” onClick=”clickStar()” score=<%= star_index
%>></span>
<% star_index -= 1 %>>
<% end %>
...
Stash the book id for JS to find
JS entry point

20. SCSS
.book-score {
unicode-bidi: bidi-override;
direction: rtl;
}
.icon.scored:before, .icon.scored ~ span:before,
.icon.hover:before, .icon.hover ~ span:before {
content: “f005”
color: steelblue;
}
Apologies for missing credit
https://www.w3docs.com/snippets/css/what-does-the-css-tilde-selector-mean.html

21. JS
function clickStar() {
var name = “user[books_user][“ + bookId + “][score]”
var input = document.createElement(“input”)
input.setAttribute(“type, “hidden”, “name”, name, “value”, score)
oldScore.classList.remove(“scored”)
event.target.classList.toggle(“scored”)
}

22. Links

23. Links
Collection radio buttons
https://apidock.com/rails/v4.0.2/ActionView/Helpers/FormOptionsHelper/collection_radio_buttons
Githup repo (public)
https://github.com/egglestn/multiple
Heroku live demo
https://multiple-radio-buttons.herokuapp.com/