#17 Dependent Form Fields


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


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

    $(document).ready(function() {
_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 almost 2 years 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] said 6 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 6 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] said 6 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])
#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 }
    render :new 
    #format.html { render :new }
    #format.json { render json: @createcampaign.errors, status: :unprocessable_entity }

kobaltz PRO said 6 months ago:

Have you tried doing something like

    $(document).on('turbolinks:load', function() {

instead of the

$(document).ready(function() {

[email protected] said 6 months ago:

i guess no more help?

Login to Comment