How to show/hide parts of a form based on if a checkbox is checked

Question

I want to show or hide form fields based on whether or not a checkbox is checked. I have no idea where to begin to make this work with eex.

<%= form_for @changeset, @action, fn f -> %>
  <div class="form-group">
    <%= label f, :white_label, class: "control-label" %>
    <%= checkbox f, :white_label, class: "checkbox" %>
    <%= error_tag f, :white_label %>
  </div>

  <div class="form-group">
    <%= label f, :logo, class: "control-label" %>
    <%= text_input f, :logo, class: "form-control" %>
    <%= error_tag f, :logo %>
  </div>

  <div class="form-group">
    <%= label f, :color, class: "control-label" %>
    <%= text_input f, :color, class: "form-control" %>
    <%= error_tag f, :color %>
  </div>
<% end %>

score 1 · Accepted Answer · answered Aug 27 '19 at 05:05

Unless you are using LiveView which I doubt, you should use javascript to interactively change the layout of the page.

EEx is a server-side template rendering engine. It produces HTML and sends it to the browser. That’s it.

Although one might use Ajax calls back to the server to re-render the page and re-send it back to the browser, usually this kind of tasks in solved on the client side, directly in the browser, with a help of javascript. Depending on what javascript library you prefer to use, the code for solutions is rather different, so you probably should look up the internets for “show / hide elements on the page with javascript” or like.

This SO answer shows how it’s to be done with vanilla javascript.

How to show/hide parts of a form based on if a checkbox is checked

1 Answers1