How to hide input on conditions in Formtastic?

Question

I inherited a project that is using ActiveAdmin with Formtastic in Rails. I have very little experience with either of these, but it seems simple enough to do simple tasks.

So, I have been tasked with adding a radio input, but hides the another input if the radio doesn't match a certain value. I've search everywhere and can't seem to find anything on this.

Here is my form:

form do |f|
  f.inputs 'Book Details' do
    f.input :name, required: true
    f.input :has_subtitle, as: radio, required: true
    f.input :subtitle
  end
end

In this form, I need to only show :subtitle, if :has_subtitle is set to true/yes, otherwise they should not see the input (if it's visible it should also be required).

Is this possible to accomplish in Formtastic?

Thanks!

Answer 1

f.input :has_subtitle, as: radio, required: true, { data: { toggle: 'subtitle_input' }}

Then add javascript (this is coffeescript) to a separate file (eg form.js.coffee)

$(document).on 'ready page:load', ->
  $('[data-toggle]').on "change", ->
    $($(this).data('toggle')).toggle($(this).val() == 'show')

You may need to configure this some, depending on the value from the radio button

Then include it in application.js

# application.js
//= require form