#17 Dependent Form Fields
9-2-2015

Summary

Using unobtrusive javascript, we can hide certain fields on forms based on the selected values of other fields.
8
rails javascript view 4:19

Summary

Gemfile    gem 'jquery-turbolinks'
    gem 'dependent-fields-rails'
application.js    //= require jquery.turbolinks
    //= require underscore
    //= require dependent-fields

    $(document).ready(function() {
      DependentFields.bind()
    });
_form.html.erb    <%= f.input :extended_profile, id: 'user_extended_profile' %>
    <%= content_tag :div, class: 'js-dependent-fields', data: { 'checkbox-id': 'user_extended_profile', 'checkbox-value': 'true'} do %>
      <%= f.input :twitter_handle %>
      <%= f.input :facebook_handle %>
      <%= f.input :github_handle %>
    <% end %>
Schwad said over 1 year ago:

I'm bookmarking this episode the next time I want to enable or disable things in forms on an application... Currently I'd just whip in some JS with a few listeners that toggles things from enabled to disabled.... But I'd much more prefer this! Thanks!

[email protected] PRO said about 2 months ago:

I am using rails 4 and i am not able to see the checkbox option ... i installed the simple form and try exactly as you have and i am not able to see the check box option

kobaltz PRO said about 2 months ago:

Can you post relevant code and also check to see if you have any JS errors in the Developer Tool Console of the browser? This should all work regardless of using simple_form .

[email protected] PRO said about 2 months ago:

<%#= f.hidden_field :campcategory %>

<%= f.input :extended_profile, id: 'user_extended_profile' %>
    <%= content_tag :div, class: 'js-dependent-fields', data: { 'checkbox-id': 'user_extended_profile', 'checkbox-value': 'true'} do %>
        <%= f.input :city %>
        <%= f.input :state %>
        <%= f.input :zipcode %>
    <% end %>

Database Fields:
Createcampaign(id: integer, campcategory: integer, categoryname: string, camptitle: string, campdescription: string, decisionmaker: string, city: string, state: string, zipcode: string, country: string, created_at: datetime, updated_at: datetime, category_id: integer, image: string, user_id: integer, admin: boolean, cached_votes_up: integer, cached_votes_down: integer, cached_votes_score: integer, county: string, campaigntype: integer, reason: string, organizername: string, organizerid: integer, protestlocation: string, gatheringrules: string, restricteditems: string, parking: string, startdate: date, enddate: date*, extended_profile: boolean) *

controller function:
```
def create

@users = User.all

@createcampaign = Createcampaign.new(createcampaign_params)
   @citystate = ZipCodes.identify(params[:zipcode])
  logger.log(@citystate)
#respond_to do |format|
  if @createcampaign.save
    @createcampaign = Createcampaign.where(:user_id => current_user.id).last

    #redirect_to event_build_path(event_id: @event.id, id: Wicked::FIRST_STEP)
     redirect_to campaignstep_path(createcampaign_id: @createcampaign.id, id: :interest), notice: 'Createcampaign was successfully created.'
    #format.html { redirect_to after_createcampaign_path, notice: 'Createcampaign was successfully created.' }
    #render :render_wizard
    #format.json { render :show, status: :created, location: @createcampaign }
  else
    render :new 
    #format.html { render :new }
    #format.json { render json: @createcampaign.errors, status: :unprocessable_entity }
  #end
end

kobaltz PRO said about 2 months ago:

Have you tried doing something like

    $(document).on('turbolinks:load', function() {
      DependentFields.bind()
    });

instead of the

$(document).ready(function() {
DependentFields.bind()
});

[email protected] PRO said about 2 months ago:

i guess no more help?

Login to Comment