Multiple select form with checkboxes

Standard way would be to use the multi select helper from Phoenix.

Ooook. If you don’t want to use it, just write up the normal HTML.

Out of curiosity does anyone use the multi_select input? I’ve seen it in the phoenix docs and on wc3 but nowhere else.

Is there something you’re supposed to do with it on the front end to make it look like a checkbox group or does it always look like a bugged out select?

Btw, I managed to make something like a checkbox group with the phoenix.form and some js but I doubt its best practice.

I did miss that your question included checkboxes, I don’t really understand what that is. Multi select is a drop down that lets you select multiple items in the list, and checkboxes are their on individual thing. If you want to display a checkbox next to each selected item in the list that’s just a CSS thing.

I’m sure you’ve seen forms where you have multiple checkboxes that you can select. Like in an advanced search section. I was trying to do something similar but have the form be dynamically created with the relevant values. This is very similar (identical) to what a multiple_select does, I just wanted it to be a group of checkboxes rather than a multi select input.

It seemed kind of obvious that something like this would be standard, but it seems it isn’t.

Let’s take a step back and look at the actual problem you’re trying to solve, cause I think the focus on multi select has confused things. Is the thing you’re trying to do simply to have N check boxes in the form, where the number and label of each is dynamic?

Yes, but I also want all of the checked values to be sent back as a single value like with a multiple_select.

It looks like this:

image255×167 3.44 KB

And I want to be able to select any number of them and have the list of selected values be sent back as a single values.

Right now, I have a hidden text input where I add the ids with an onclick function. This works well enough but I’m sure it isn’t best practice.

This looks like a radio_button to me, not a checkbox.

You can only choose one option in radio button, at least in html.

It seems like OP wants to have check boxes so user can choose multiple options?

You group multiple checkboxes using the name option.

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" checked>
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music">
    <label for="music">Music</label>
  </div>
</fieldset>

It seems like that’s how phoenix do it but within a schema list look up (e.g. name="user[famous]" ).

<input checked="checked" id="user_famous" name="user[famous]" type="checkbox" value="true">

If you have a lot of checkboxes, I would suggest you use multiple_select from phoenix.

I know it is possible because I have done that before with Rails and SimpleForm…

This example is a many_to_many relationship between User and Role. The point is to use simple input and specify the name of the checkbox as user[roles_ids][] with square brackets at the end.

    <%= for role <- @roles do %>
      <label>
        <%= role.name %>:
        <input name="user[roles_ids][]" type="checkbox" value="<%= role.id %>">
      </label>
    <% end %>

And that is the log from the request (with stripped csrf token) when I select roles 1 and 2.

[debug] Processing with DemoWeb.UserController.create/2
  Parameters: %{"_utf8" => "✓", "user" => %{"name" => "hello", "roles_ids" => ["1", "2"]}}
  Pipelines: [:browser]

As You can see, I get a list of ids

As a side note, it’s possible to add a check value to checkbox like this…

checked="<%= user_has_role?(@user, role)%>"

… as mentionned in this old post Many to many checkbox form - #4 by josevalim