Display empty textbox based on selected value from form_for select

Question

I am trying to add additional field "department" to the existing devise signup template. I am trying to implement a drop-down which consists a list of departments like dept1, dept2...., not_listed. When not_listed is selected I want to display the textbox where a user can enter custom department and store the value of department in database rather than Not Listed.

Here is the code.

<div class="border-form-div">

<h3 class="text-center">Create a new account</h3>

<%= form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f| %>
  <%= devise_error_messages! %>

  <div class="form-group">
    <%= f.email_field :email, :autofocus => true, :placeholder => "Email address", class: "form-control", required: false %>
  </div>

  <div class="form-group">
    <%= f.password_field :password, :placeholder => "Password", class: "form-control", required: false %>
  </div>

  <div class="form-group">
    <%= f.password_field :password_confirmation, :placeholder => "Confirm password", class: "form-control", required: false %>
  </div>

  <div class="form-group">
    <%= f.select :department, options_for_select(["dept1", "dept2", "dept3", "dept4", "Not Listed"]), class: "form-control", html: { id: "dept-id"}  %>
  </div>

  <div>
    <ul><%= f.text_field :department, :placeholder => "enter your department", html: {id: "not_listed_1"} %></ul>
  </div>

  <script>
    $(document).ready(function(){
    $('#dept-id').change(function() {
      var selected = $(this).val();
      if(selected == 'Not Listed'){
        $('#not_listed_1').show();
      }
      else{
        $('#not_listed_1').hide();
      }
    });
    });
  </script>
  <br>

  <div class="text-center">
    <div class="form-group">
      <%= f.submit "Sign up", :class => "btn btn-primary", :id => "page[sign_up]" %>
      <%= link_to "Cancel", new_user_session_path, class: "btn btn-default", :id => "page[cancel]" %>
    </div>
  </div>

I am not good with jquery. Can some one point me where I am going wrong?

Answer 1

Here is the solution which works for me and I tested it. You will just need to add and modify couple of lines of code, and it will work for you.

First I added field department to devise model: rails g migration User department:string and run db:migrate .

Then I made custom registration controller (which extends Devise's one):

# app/controllers/registrations_controller.rb
class RegistrationsController < Devise::RegistrationsController

  private

  def sign_up_params
    params.require(:user).permit(:department, :email, :password, :password_confirmation)
  end

  def account_update_params
    params.require(:user).permit(:department, :email, :password, :password_confirmation, :current_password)
  end
end

UPDATE

My route file looks like this now:

devise_for :users, :controllers => { registrations: 'registrations' }

Then I generated Devise views: rails generate devise:views and I opened Devise's views registration file from: app/views/devise/registrations/new.html.erb to add new form fields:

    <div class="form-group">
      <%= f.select :department, options_for_select(["dept1", "dept2", "dept3", "dept4", "Not Listed"], :selected => f.object.department), class: "form-control" %>
    </div>

    <div id="show_dep" style="display: none">
    Please enter your department: <br />
      <%= f.text_field :department, :placeholder => "enter your department", html: {id: "#show_dep"} %>
    </div>

And the last snippet of code is jQuery: ( You can add to application.js )

jQuery(function () {
    $("#user_department").change(function () {
        if ($(this).val() == "Not Listed") {
            $("#show_dep").show();
        } else {
            $("#show_dep").hide();
        }
    });
});

I checked in rails console,( User.last ), and :department field was populated with data from users input.

I hope it helps,

Cheers!