CODEWITHSUNDEEP
ruby-on-railsforms
mike9182
mike9182

Reputation: 289

Rails Dependent Form Field

I am using the dependent fields rails gem and this video tutorial to try to implement a dependent field in my user signup form. My signup form has a field where the user can select their role (implemented using enums). I want the university field to be hidden by default and only appear if the user selects "staff" as their role. The current behavior is that all the form fields are visible upon load. What am I doing wrong? Any help for a newb would be greatly appreciated! I've read other SO questions but can't seem to get this to work.

Here's my form:

<% provide(:title, 'Sign up') %>
<h1>Sign up</h1>

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <%= form_for(@user) do |f| %>
      <%= render 'shared/error_messages', object: f.object %>
      <%= f.label :name %>
      <%= f.text_field :name, class: 'form-control' %>

      <%= f.label :email %>
      <%= f.email_field :email, class: 'form-control' %>

      <%= f.label :role %>
      <%= f.select(:role, User.roles.keys.map {|role| [role.titleize,role]}, :include_blank => "Please Select")  %>

      <%= content_tag :div, class: 'js-dependent-fields', data: { 'data-select-id': 'user_role', 'data-option-value': 'staff'} do %>
      <%= f.label :university_id%>
      <%= collection_select( :user, :university_id, University.all, :id, :name, prompt: true) %>
      <% end %>

      <%= f.label :password %>
      <%= f.password_field :password, class: 'form-control' %>

      <%= f.label :password_confirmation, "Confirmation" %>
      <%= f.password_field :password_confirmation, class: 'form-control' %>

      <%= f.submit "Create my account", class: "btn btn-primary" %>
    <% end %>
  </div>
</div>

Here's the lower part of my application.js:

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require underscore
//= require dependent-fields
//= require_tree .

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

Upvotes: 0

Views: 807

Answers (1)

Andrew
Andrew

Reputation: 375

Might not be the cause, but your data attribute is appending an extra "data-" block I believe:

<%= content_tag :div, class: 'js-dependent-fields', data: { 'data-select-id': 'user_role', 'data-option-value': 'staff'} do %>
  vv
<%= content_tag :div, class: 'js-dependent-fields', data: { 'select-id': 'user_role', 'option-value': 'staff'} do %>

Upvotes: 1

Related Questions