form_for select에서 선택한 값을 기준으로 빈 텍스트 상자 표시

Question

"수표"필드를 기존 수표 가입 템플릿에 추가하려고합니다. 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.이

내 경로 파일은 이제 다음과 같습니다

# 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과 나는 Devise의 견해 등록 파일을 열었습니다 : 응용 프로그램/뷰/궁리/등록/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 콘솔 (User.last)을 체크인하고 : 부서 필드에 사용자 입력 데이터가 입력되었습니다. 나는 그것이 도움이되기를 바랍니다

,

건배!