空のテキストボックスをform_for selectから選択した値に基づいて表示します。

Question

フィールド「department」を既存のdeviseサインアップテンプレートに追加しようとしています。私は、dept1、dept2 ....、not_listedのような部門のリストからなるドロップダウンを実装しようとしています。 not_listedを選択すると、ユーザーがカスタム部門を入力し、部門の値をNot Listedではなくデータベースに格納できるテキストボックスを表示したいとします。

ここにコードがあります。

<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> 

私はjQueryを使って良くないです。私が間違っているところを指摘できる人がいますか？

Answer 1

私のために働く解決策はここにあり、私はそれをテストしました。いくつかの行のコードを追加して変更するだけで、うまくいくでしょう。

最初にフィールド部門を追加してモデル：rails g migration User department:stringとrun db:migrateを追加しました。

は、その後、私は（考案者の1を拡張する）カスタム登録コントローラを作った：

マイルートファイルは次のようになります

# 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：

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

その後、私は工夫を生成しましたビュー：rails generate devise:viewsと私はデビーズのビューの登録ファイルを開きました：アプリ/新しいフォームフィールドを追加するビュー/工夫/登録/ new.html.erb：

<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> 

とコードの最後のスニペットはjQueryのである：（あなたがapplication.jsに追加することができます）

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

rails console（User.last）をチェックインしました。：departmentフィールドにユーザー入力のデータが入力されました。私はそれが役に立てば幸い

、

乾杯！