title: How do I create an interactive form with Simple Form?
body: <p>I have a model (<code>Listing</code>) that has many, many attributes (say 25).</p>
  
  <p>I would like to create an AJAX form that is dynamic based on the input in the form.</p>
  
  <p>Meaning that if a user chooses <code>type=b</code>, they will see other fields that they should see and not ones they shouldn't.</p>
  
  <p>Ideally they should load immediately, with the right content from the db - i.e. in an AJAXy way.</p>
  
  <p>What's the best way to approach this?</p>
  
  <p>Thanks.</p>
  
  <p>Edit: Here is an example of my <code>_form.html.erb</code>. You will notice that I have included 2 <code>if</code> statements that indicate which fields should show if the <code>property_type</code> value chosen is one of those specified:</p>
  
  <pre><code>&lt;%= simple_form_for(@listing) do |f| %&gt;
    &lt;%= f.error_notification %&gt;
  
    &lt;div class="form-inputs"&gt;
      &lt;%= f.input :headline %&gt;
      &lt;%= f.input :price %&gt;    
      &lt;%= f.association :property_type %&gt;
  
      If property_type == "coop"
  
      &lt;%= f.input :maintenance %&gt;
      &lt;%= f.input :coop_deductible %&gt;
      &lt;%= f.input :flip_tax %&gt;
  
      if property_type == "condo"
  
      &lt;%= f.input :common_charges %&gt;
      &lt;%= f.input :taxes %&gt;
    &lt;/div&gt;
  
    &lt;div class="form-actions"&gt;
      &lt;%= f.button :submit %&gt;
    &lt;/div&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p><strong>Edit 2:</strong></p>
  
  <p>This is the Rails form helper that I used - powered by the gem Simple_Form:</p>
  
  <pre><code>&lt;%= simple_form_for @listing, :defaults =&gt; { :wrapper_html =&gt; { :class =&gt; 'form-horizontal' } } do |f| %&gt;
    &lt;%= f.error_notification %&gt;
    &lt;fieldset&gt;
      &lt;%= f.association :listing_category, :label =&gt; "Category: ", :label_html =&gt; { :class =&gt; "control-label"}, :wrapper_html =&gt; { :class =&gt; "controls"} %&gt;
  
      &lt;div style="display: none;" data-show-for="Exclusive"&gt;
          &lt;%= f.association :listing_type %&gt;
        &lt;%= f.association :user %&gt;
        &lt;%= f.association :boro %&gt;
      &lt;/div&gt;
  
      &lt;div style="display: none;" data-show-for="Open"&gt;
        &lt;%= f.association :neighborhood %&gt;    
        &lt;%= f.association :building %&gt;
        &lt;%= f.association :term %&gt;
        &lt;%= f.association :property_type %&gt;
      &lt;/div&gt;
  
      &lt;div class="form-actions"&gt;
      &lt;%= f.button :submit, :class =&gt; "btn btn-primary" %&gt;
      &lt;!-- &lt;button type="submit" class="btn btn-primary"&gt;Save and Continue&lt;/button&gt;
      &lt;button type="reset" class="btn"&gt;Cancel&lt;/button&gt; --&gt;
      &lt;/div&gt;
    &lt;/fieldset&gt;
  
    &lt;% end %&gt;
  </code></pre>
  
  <p>This is the HTML it produced:</p>
  
  <pre><code>&lt;form accept-charset="UTF-8" action="/listings" class="simple_form new_listing" id="new_listing" method="post" novalidate="novalidate"&gt;&lt;div style="margin:0;padding:0;display:inline"&gt;&lt;input name="utf8" type="hidden" value="&amp;#x2713;" /&gt;&lt;input name="authenticity_token" type="hidden" value="1oDfg41Wx/SiPCsvf4qTAcxhFUGSNlhlLfkMy8nHW1E=" /&gt;&lt;/div&gt;
  
                &lt;fieldset&gt;
                  &lt;div class="control-group select optional controls"&gt;&lt;label class="select optional control-label control-label" for="listing_listing_category_id"&gt;Category:&lt;/label&gt;&lt;div class="controls"&gt;&lt;select class="select optional" id="listing_listing_category_id" name="listing[listing_category_id]"&gt;&lt;option value=""&gt;&lt;/option&gt;
  &lt;option value="1"&gt;Exclusive&lt;/option&gt;
  &lt;option value="2"&gt;Open&lt;/option&gt;&lt;/select&gt;&lt;/div&gt;&lt;/div&gt;
  
            &lt;div style="display: none;" data-show-for="Exclusive"&gt;
              &lt;div class="control-group select optional form-horizontal"&gt;&lt;label class="select optional control-label" for="listing_listing_type_id"&gt;Listing type&lt;/label&gt;&lt;div class="controls"&gt;&lt;select class="select optional" id="listing_listing_type_id" name="listing[listing_type_id]"&gt;&lt;option value=""&gt;&lt;/option&gt;
  &lt;/select&gt;&lt;/div&gt;&lt;/div&gt;
              &lt;div class="control-group select optional form-horizontal"&gt;&lt;label class="select optional control-label" for="listing_user_id"&gt;User&lt;/label&gt;&lt;div class="controls"&gt;&lt;select class="select optional" id="listing_user_id" name="listing[user_id]"&gt;&lt;option value=""&gt;&lt;/option&gt;
  &lt;option value="1"&gt;First User&lt;/option&gt;
  &lt;option value="2"&gt;Second User&lt;/option&gt;
  &lt;option value="3"&gt;Third User&lt;/option&gt;
  &lt;option value="4"&gt;Fourth User&lt;/option&gt;
  &lt;option value="5"&gt;Fifth User&lt;/option&gt;&lt;/select&gt;&lt;/div&gt;&lt;/div&gt;
              &lt;div class="control-group select optional form-horizontal"&gt;&lt;label class="select optional control-label" for="listing_boro_id"&gt;Boro&lt;/label&gt;&lt;div class="controls"&gt;&lt;select class="select optional" id="listing_boro_id" name="listing[boro_id]"&gt;&lt;option value=""&gt;&lt;/option&gt;
  &lt;option value="1"&gt;Brooklyn&lt;/option&gt;&lt;/select&gt;&lt;/div&gt;&lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div style="display: none;" data-show-for="Open"&gt;
              &lt;div class="control-group select optional form-horizontal"&gt;&lt;label class="select optional control-label" for="listing_neighborhood_id"&gt;Neighborhood&lt;/label&gt;&lt;div class="controls"&gt;&lt;select class="select optional" id="listing_neighborhood_id" name="listing[neighborhood_id]"&gt;&lt;option value=""&gt;&lt;/option&gt;
  &lt;option value="1"&gt;Prospect Heights&lt;/option&gt;&lt;/select&gt;&lt;/div&gt;&lt;/div&gt;    
              &lt;div class="control-group select optional form-horizontal"&gt;&lt;label class="select optional control-label" for="listing_building_id"&gt;Building&lt;/label&gt;&lt;div class="controls"&gt;&lt;select class="select optional" id="listing_building_id" name="listing[building_id]"&gt;&lt;option value=""&gt;&lt;/option&gt;
  &lt;option value="1"&gt;Trump Towers&lt;/option&gt;&lt;/select&gt;&lt;/div&gt;&lt;/div&gt;
              &lt;div class="control-group select optional form-horizontal"&gt;&lt;label class="select optional control-label" for="listing_term_id"&gt;Term&lt;/label&gt;&lt;div class="controls"&gt;&lt;select class="select optional" id="listing_term_id" name="listing[term_id]"&gt;&lt;option value=""&gt;&lt;/option&gt;
  &lt;/select&gt;&lt;/div&gt;&lt;/div&gt;
              &lt;div class="control-group select optional form-horizontal"&gt;&lt;label class="select optional control-label" for="listing_property_type_id"&gt;Property type&lt;/label&gt;&lt;div class="controls"&gt;&lt;select class="select optional" id="listing_property_type_id" name="listing[property_type_id]"&gt;&lt;option value=""&gt;&lt;/option&gt;
  &lt;option value="1"&gt;Coop&lt;/option&gt;&lt;/select&gt;&lt;/div&gt;&lt;/div&gt;
            &lt;/div&gt;
  
  
      &lt;div class="form-actions"&gt;
                  &lt;input class="btn btn btn-primary" name="commit" type="submit" value="Create Listing" /&gt;
            &lt;!-- &lt;button type="submit" class="btn btn-primary"&gt;Save and Continue&lt;/button&gt;
            &lt;button type="reset" class="btn"&gt;Cancel&lt;/button&gt; --&gt;
                  &lt;/div&gt;
                &lt;/fieldset&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>This is the JS that I included in my <code>listing.js</code> - which corresponds to the file that this form is on <code>app/views/listings/new.html.erb</code></p>
  
  <pre><code>$(document).ready(function({
  
      $('#listing_listing_category_id').on('change', function(){
          var option = $(this).find(':selected');
          $('[data-show-for]').hide(); //And maybe reset?
          $('[data-show-for="+ option.text +"]').show()
      });
  
  });
  </code></pre>
  
  <p>When I chose the option I want, it doesn't show me the fields I want to see.</p>