title: Rails 4 form: conditional display of fields based on radio button selection
body: <p>First, please excuse me if this question is dumb, I am just starting to wrap my head around Rails, and Javascript &amp; jQuery are a whole new world for me.</p>
  
  <p>I have found the following, similar questions, but simply don't understand how they could apply to my situation:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/18421082/show-hide-div-if-checkbox-selected">Show/hide div if checkbox selected</a></li>
  <li><a href="https://stackoverflow.com/questions/15075262/check-hidden-input-fields-based-on-radio-button-selected">Check Hidden Input Fields Based On Radio Button Selected</a></li>
  <li><a href="https://stackoverflow.com/questions/32503678/show-form-fields-based-on-radio-button-selection">Show form fields based on radio button selection</a></li>
  </ul>
  
  <p>That being said, here is my question.</p>
  
  <p>In my Rails 4 app, I have the following Rails form (I am <strong>NOT</strong> using Simple Form):</p>
  
  <pre><code>&lt;div class="calendar_details"&gt;
    &lt;%= f.label :target_relationship %&gt;
    &lt;%= radio_button_tag(:target_relationship, "B2C", :checked =&gt; true, :onclick=&gt;"showMe('calendar_details_b2c')", {:class =&gt; "radio_button_target_relationship_b2C"}) %&gt;
    &lt;%= label_tag(:target_relationship, "B2C") %&gt;
    &lt;%= radio_button_tag(:target_relationship, "B2B", :onclick=&gt;"showMe('calendar_details_b2b')", {:class =&gt; "radio_button_target_relationship_b2b"}) %&gt;
    &lt;%= label_tag(:target_relationship, "B2B") %&gt;
  &lt;/div&gt;
  
  &lt;div class="calendar_details"&gt;
    &lt;%= f.label :target_country %&gt;&lt;%= f.country_select :target_country, ["United States"] %&gt;
  &lt;/div&gt;
  
  &lt;div id="calendar_details_b2c"&gt;
  
    &lt;div class="calendar_details"&gt;
    &lt;%= f.label :target_gender %&gt;&lt;%= radio_button_tag(:target_gender, "Female") %&gt;&lt;%= label_tag(:target_relationship, "Female") %&gt;&lt;%= radio_button_tag(:target_gender, "Male") %&gt;&lt;%= label_tag(:target_relationship, "Male") %&gt;&lt;%= radio_button_tag(:target_gender, "Both", :checked =&gt; true) %&gt;&lt;%= label_tag(:target_relationship, "Both") %&gt;
    &lt;/div&gt;
    &lt;div class="calendar_details"&gt;
      &lt;%= f.label :target_age_lower_limit %&gt;&lt;%= f.select :target_age_lower_limit, (0..99) %&gt;
    &lt;/div&gt;
    &lt;div class="calendar_details"&gt;
      &lt;%= f.label :target_age_upper_limit %&gt;&lt;%= f.select :target_age_upper_limit, (0..99) %&gt;
    &lt;/div&gt;
    &lt;div class="calendar_details"&gt;
      &lt;%= f.label :target_household_income_lower_limit %&gt;&lt;%= f.select :target_household_income_lower_limit, ['Less than $10,000', '$10,000', '$20,000', '$30,000', '$40,000', '$50,000', '$60,000', '$70,000', '$80,000', '$90,000', '$100,000', '$110,000', '$120,000', '$130,000', '$140,000', '$150,000', '$160,000', '$170,000', '$180,000', '$190,000', '$190,000', '$200,000', 'More than $200,000'] %&gt;
    &lt;/div&gt;
    &lt;div class="calendar_details"&gt;
      &lt;%= f.label :target_household_income_upper_limit %&gt;&lt;%= f.select :target_household_income_upper_limit, ['Less than $10,000', '$10,000', '$20,000', '$30,000', '$40,000', '$50,000', '$60,000', '$70,000', '$80,000', '$90,000', '$100,000', '$110,000', '$120,000', '$130,000', '$140,000', '$150,000', '$160,000', '$170,000', '$180,000', '$190,000', '$190,000', '$200,000', 'More than $200,000'] %&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div id="calendar_details_b2b"&gt;
  
    &lt;div class="calendar_details"&gt;
      &lt;%= f.label :target_company_size %&gt;&lt;%= f.select :target_company_size, ['Self-employed', '1-10 employees', '11-50 employees', '51-200 employees', '201-500 employees', '501-1,000 employees', '1,001-5,000 employees', '5,001-10,000 employees', 'More than 10,000 employees'] %&gt;
    &lt;/div&gt;
    &lt;div class="calendar_details"&gt;
      &lt;%= f.label :target_industry %&gt;&lt;%= f.select :target_industry, ['Art &amp; Entertainment', 'Autos &amp; Vehicles', 'Beauty &amp; Fitness', 'Books &amp; Litterature', 'Business &amp; Industrial', 'Computer &amp; Electronics', 'Finance', 'Food &amp; Drinks', 'Games', 'Hobbies &amp; Leisure', 'Home &amp; Garden', 'Internet &amp; Telecom', 'Jobs &amp; Education', 'Law &amp; Government', 'News', 'Online Communities', 'People &amp; Society', 'Pets &amp; Animals', 'Real Estate', 'Science', 'Shopping', 'Sports', 'Travel']  %&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Based on what users check on the first radio button (either "B2C" or "B2B"), I would like to either display the <code>calendar_details_b2c</code> <code>div</code>, or the <code>calendar_details_b2b</code> <code>div</code>.</p>
  
  <p>I understand I am going to need to hide both <code>div</code>s, then to implement some form of condition, checking which radio button is checked, and finally display the right <code>div</code>.</p>
  
  <p>As you can see, I tried to add an <code>onclick</code> option and some specific classes to my radio buttons, but then I am stuck: I don't know how to build the correct js function, and I don't know where to include it (in the <code>.html.erb</code> file of the form, in the header of the app, in the <code>application.js</code> file?).</p>
  
  <p>—————</p>
  
  <p><strong>UPDATE</strong>: as per Ziv Galili's answer, here is what I have now:</p>
  
  <p>In <code>app/assets/javascript/custom/calendars.js</code>:</p>
  
  <pre><code>$(document).ready(function() {
      $('input[type=radio][name=calendar').change(function () {
        // first: hide all the divs
        $('#calendar_details_b2c').css("display","none");
        $('#calendar_details_b2b').css("display","none");
  
        // then get the div ID to show (I stored it in the "value" of the radio button)
        var fieldToShow = $(this).val();
        // now use jQuery selector and change the display setting of that field
        $("#" + fieldToShow).css("display","block");
      });
  });
  </code></pre>
  
  <p>In <code>application.js</code>, I added <code>//= require_tree ./custom</code> to take the above code into consideration in my app.</p>
  
  <p>In the view where my form is (<code>Calendars#New</code> view), I now have:</p>
  
  <pre><code>&lt;div class="calendar_details"&gt;
      &lt;%= f.label :target_relationship, "Business relationship" %&gt;
      &lt;%= f.radio_button :target_relationship, "calendar_details_b2c", :checked =&gt; true %&gt;
      &lt;%= f.label(:target_relationship, "B2C") %&gt;
      &lt;%= f.radio_button :target_relationship, "calendar_details_b2b", :checked =&gt; false %&gt;
      &lt;%= f.label(:target_relationship, "B2B") %&gt;
    &lt;/div&gt;
  
    &lt;div class="calendar_details"&gt;
      &lt;%= f.label :target_country, "Country" %&gt;&lt;%= f.country_select :target_country, ["United States"] %&gt;
    &lt;/div&gt;
  
    &lt;div id="calendar_details_b2c"&gt;
  
      &lt;div class="calendar_details"&gt;
      &lt;%= f.label :target_gender, "Gender" %&gt;&lt;%= radio_button_tag(:target_gender, "Female") %&gt;&lt;%= label_tag(:target_relationship, "Female") %&gt;&lt;%= radio_button_tag(:target_gender, "Male") %&gt;&lt;%= label_tag(:target_relationship, "Male") %&gt;&lt;%= radio_button_tag(:target_gender, "Both", :checked =&gt; true) %&gt;&lt;%= label_tag(:target_relationship, "Both") %&gt;
      &lt;/div&gt;
      &lt;div class="calendar_details"&gt;
        &lt;%= f.label :target_age_lower_limit, "Age / Lower limit" %&gt;&lt;%= f.select :target_age_lower_limit, (0..99) %&gt;
      &lt;/div&gt;
      &lt;div class="calendar_details"&gt;
        &lt;%= f.label :target_age_upper_limit, "Age / Upper limit" %&gt;&lt;%= f.select :target_age_upper_limit, (0..99) %&gt;
      &lt;/div&gt;
      &lt;div class="calendar_details"&gt;
        &lt;%= f.label :target_household_income_lower_limit, "Household income / Lower limit" %&gt;&lt;%= f.select :target_household_income_lower_limit, ['Less than $10,000', '$10,000', '$20,000', '$30,000', '$40,000', '$50,000', '$60,000', '$70,000', '$80,000', '$90,000', '$100,000', '$110,000', '$120,000', '$130,000', '$140,000', '$150,000', '$160,000', '$170,000', '$180,000', '$190,000', '$190,000', '$200,000', 'More than $200,000'] %&gt;
      &lt;/div&gt;
      &lt;div class="calendar_details"&gt;
        &lt;%= f.label :target_household_income_upper_limit, "Household income / Upper limit" %&gt;&lt;%= f.select :target_household_income_upper_limit, ['Less than $10,000', '$10,000', '$20,000', '$30,000', '$40,000', '$50,000', '$60,000', '$70,000', '$80,000', '$90,000', '$100,000', '$110,000', '$120,000', '$130,000', '$140,000', '$150,000', '$160,000', '$170,000', '$180,000', '$190,000', '$190,000', '$200,000', 'More than $200,000'] %&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  
    &lt;div id="calendar_details_b2b"&gt;
  
      &lt;div class="calendar_details"&gt;
        &lt;%= f.label :target_company_size, "Company size" %&gt;&lt;%= f.select :target_company_size, ['Self-employed', '1-10 employees', '11-50 employees', '51-200 employees', '201-500 employees', '501-1,000 employees', '1,001-5,000 employees', '5,001-10,000 employees', 'More than 10,000 employees'] %&gt;
      &lt;/div&gt;
      &lt;div class="calendar_details"&gt;
        &lt;%= f.label :target_industry, "Industry" %&gt;&lt;%= f.select :target_industry, ['Art &amp; Entertainment', 'Autos &amp; Vehicles', 'Beauty &amp; Fitness', 'Books &amp; Litterature', 'Business &amp; Industrial', 'Computer &amp; Electronics', 'Finance', 'Food &amp; Drinks', 'Games', 'Hobbies &amp; Leisure', 'Home &amp; Garden', 'Internet &amp; Telecom', 'Jobs &amp; Education', 'Law &amp; Government', 'News', 'Online Communities', 'People &amp; Society', 'Pets &amp; Animals', 'Real Estate', 'Science', 'Shopping', 'Sports', 'Travel']  %&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p>However, I can't seem to make this work: when I visit the <code>Calendars#New</code> view, I do see the radio buttons to select either B2C or B2B, but whichever button I select, nothing is displayed below (neither the B2C section nor the B2B section).</p>
  
  <p>What am I missing? </p>
  
  <p>—————</p>
  
  <p><strong>UPDATE 2</strong>: So, I updated my code as Ziv Galili's new comment, ie: paying attention to the name of the button group, which is actually <code>calendar[target_relationship]</code>.</p>
  
  <p>When I did that, and tried to go to my view, I got a <code>execJS::RuntimeError</code>, which made me realize we were using pure JavaScript, while my Rails app seems to be using CoffeeScript.</p>
  
  <p>So, I deleted <code>app/assets/javascript/custom/calendars.js</code>, converted Ziv Galili's code to CoffeeScript and added it to app/assets/javascript/calendars.coffee:</p>
  
  <pre><code>$('input[type=radio][name=calendar[target_relationship]]').change -&gt;
    # first: hide all the divs
    $('#calendar_details_b2c').css 'display', 'none'
    $('#calendar_details_b2b').css 'display', 'none'
    # then get the div ID to show (i stored it in the "value" of the radio button
    fieldToShow = $(this).val()
    # now use jQuery selector and change the display setting of that field
    $('#' + fieldToShow).css 'display', 'block'
    return
  </code></pre>
  
  <p>I also replaced <code>//= require_tree ./custom</code> with <code>//= require_tree .</code> to make sure all my <code>.coffee</code> files were loaded through <code>application.js</code>.</p>
  
  <p>Despite all these code updates, I still do not get the result I am expecting: none of the <code>div</code>s are displayed in my views:</p>
  
  <p><a href="https://i.stack.imgur.com/9drdW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9drdW.png" alt="enter image description here"></a></p>
  
  <p>I must be missing something really, really obvious, but I can't figure out what it is.</p>
  
  <p>Any idea?</p>
  
  <p>—————</p>
  
  <p>Any kind of help would be highly appreciated.</p>