#17 Dependent Form Fields

Summary

Using unobtrusive javascript, we can hide certain fields on forms based on the selected values of other fields.
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 about 2 years ago on Dependent Form Fields :

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] said 10 months ago on Dependent Form Fields :

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 10 months ago on Dependent Form Fields :

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] said 10 months ago on Dependent Form Fields :

<%#= 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 10 months ago on Dependent Form Fields :

Have you tried doing something like

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

instead of the

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

[email protected] said 10 months ago on Dependent Form Fields :

i guess no more help?

Login to Comment