根据从 form_for 选择的值显示空文本框

Question

我正在尝试将附加字段“部门”添加到现有的设计注册模板。我正在尝试实现一个下拉列表，其中包含一个部门列表，如 dept1、dept2 ....、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。

然后我制作了自定义注册控制器（扩展了 Devise 的）：

# 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

更新

我的路由文件现在是这样的：

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

然后我生成了 Devise 视图：rails generate devise:views，并从 app/views/devise/registrations/new.html.erb 打开了 Devise 的视图注册文件以添加新的表单字段：

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

最后一个sn-p的代码是jQuery：（可以添加到application.js中）

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

我检查了 rails 控制台 (User.last)，并且 :department 字段填充了来自用户输入的数据。

希望对你有帮助

干杯！