I have a Listing model that has many attributes (say 25).
I would like to create an AJAX form that will be dynamic based on the input on the form.
Assuming that if the user selects type=b , they will see other fields that they should see, and not those that they should not.
Ideally, they should load right away, with the correct content from db, i.e. using AJAXy.
What is the best way to approach this?
Thanks.
Edit: Here is an example of my _form.html.erb . You will notice that I have included 2 if statements indicating which fields should show if property_type selected:
<%= simple_form_for(@listing) do |f| %> <%= f.error_notification %> <div class="form-inputs"> <%= f.input :headline %> <%= f.input :price %> <%= f.association :property_type %> If property_type == "coop" <%= f.input :maintenance %> <%= f.input :coop_deductible %> <%= f.input :flip_tax %> if property_type == "condo" <%= f.input :common_charges %> <%= f.input :taxes %> </div> <div class="form-actions"> <%= f.button :submit %> </div> <% end %>
Edit 2:
This is the Rails form helper I used - powered by gem Simple_Form:
<%= simple_form_for @listing, :defaults => { :wrapper_html => { :class => 'form-horizontal' } } do |f| %> <%= f.error_notification %> <fieldset> <%= f.association :listing_category, :label => "Category: ", :label_html => { :class => "control-label"}, :wrapper_html => { :class => "controls"} %> <div style="display: none;" data-show-for="Exclusive"> <%= f.association :listing_type %> <%= f.association :user %> <%= f.association :boro %> </div> <div style="display: none;" data-show-for="Open"> <%= f.association :neighborhood %> <%= f.association :building %> <%= f.association :term %> <%= f.association :property_type %> </div> <div class="form-actions"> <%= f.button :submit, :class => "btn btn-primary" %> </div> </fieldset> <% end %>
This is the HTML he produced:
<form accept-charset="UTF-8" action="/listings" class="simple_form new_listing" id="new_listing" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="1oDfg41Wx/SiPCsvf4qTAcxhFUGSNlhlLfkMy8nHW1E=" /></div> <fieldset> <div class="control-group select optional controls"><label class="select optional control-label control-label" for="listing_listing_category_id">Category:</label><div class="controls"><select class="select optional" id="listing_listing_category_id" name="listing[listing_category_id]"><option value=""></option> <option value="1">Exclusive</option> <option value="2">Open</option></select></div></div> <div style="display: none;" data-show-for="Exclusive"> <div class="control-group select optional form-horizontal"><label class="select optional control-label" for="listing_listing_type_id">Listing type</label><div class="controls"><select class="select optional" id="listing_listing_type_id" name="listing[listing_type_id]"><option value=""></option> </select></div></div> <div class="control-group select optional form-horizontal"><label class="select optional control-label" for="listing_user_id">User</label><div class="controls"><select class="select optional" id="listing_user_id" name="listing[user_id]"><option value=""></option> <option value="1">First User</option> <option value="2">Second User</option> <option value="3">Third User</option> <option value="4">Fourth User</option> <option value="5">Fifth User</option></select></div></div> <div class="control-group select optional form-horizontal"><label class="select optional control-label" for="listing_boro_id">Boro</label><div class="controls"><select class="select optional" id="listing_boro_id" name="listing[boro_id]"><option value=""></option> <option value="1">Brooklyn</option></select></div></div> </div> <div style="display: none;" data-show-for="Open"> <div class="control-group select optional form-horizontal"><label class="select optional control-label" for="listing_neighborhood_id">Neighborhood</label><div class="controls"><select class="select optional" id="listing_neighborhood_id" name="listing[neighborhood_id]"><option value=""></option> <option value="1">Prospect Heights</option></select></div></div> <div class="control-group select optional form-horizontal"><label class="select optional control-label" for="listing_building_id">Building</label><div class="controls"><select class="select optional" id="listing_building_id" name="listing[building_id]"><option value=""></option> <option value="1">Trump Towers</option></select></div></div> <div class="control-group select optional form-horizontal"><label class="select optional control-label" for="listing_term_id">Term</label><div class="controls"><select class="select optional" id="listing_term_id" name="listing[term_id]"><option value=""></option> </select></div></div> <div class="control-group select optional form-horizontal"><label class="select optional control-label" for="listing_property_type_id">Property type</label><div class="controls"><select class="select optional" id="listing_property_type_id" name="listing[property_type_id]"><option value=""></option> <option value="1">Coop</option></select></div></div> </div> <div class="form-actions"> <input class="btn btn btn-primary" name="commit" type="submit" value="Create Listing" /> </div> </fieldset> </form>
This is the JS that I included in my listing.js , which corresponds to the file on which this form is located at app/views/listings/new.html.erb
$(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() }); });
When I selected the option that I want, it does not show me the fields that I want to see.