Is it possible multiple select on form with checkboxes?

I am trying to implement multiple select checkboxes in form.
For example: product can be produced in 4 colors. I need checkboxes for every color on product form.
I have read docs about Phoenix.HTML.Form, but I have found only select/4 and checkbox/3.
It is not very suitable if there are a lot of cases. And checkbox/3 is only for 1 case.

Does someone know if there something like select + checkbox in Phoenix?
Thanks!

1 Like

If you’ve got a constrained set of choices and it’s more than two of them, I think you’d be better off to use a radio button control. Just a suggestion, of course.

2 Likes

@Onor.io, thanks for suggestion!
This list will be changed in future :frowning:

1 Like

Since Phoenix is simialr to Rails does this help?

2 Likes

Thanks, @eDev! I will try and be back with results :wink:

1 Like

I’ve done this, in a potentially somewhat different scenario, managing a many-to-many relationship where (in your case) the available colors would be stored in a separate table / model; see my post on the phoenix-talk list for details:

https://groups.google.com/forum/#!topic/phoenix-talk/wZOkFkef2TE

I hope it might provide some additional insight :slight_smile:

3 Likes

@jwarlander, thank you!
I was thinking about something similar, and here is working solution :slight_smile:

1 Like

After reading @jwarlander answer, I have created a simple application with multiple checkboxes.

I am using Ecto 2.0 and Phoenix 1.2 there.

Product -< ProductColor >- Color
Product -< ProductSize >- Size

When you go to Product form (edit) you can see checked checkboxes of current product.

I am using:

  • Repo.insert_all/3 to insert new relation(s) in intermediate table if new checkboxes were checked.
  • Repo.delete_all/2 to delete existing relation(s) in intermediate table if checkboxes were unchecked.

So I have only one insert and(or) delete for multiple checkbox (if there were new checks or unchecks).

I will be glad if you will criticize it! Maybe there is more elegant and proper solution.

6 Likes