提交表单前根据下拉列表的值变化动态填写表单字段答案

【问题标题】：Dynamically fill form fields according to value change of a dropdown before submitting form提交表单前根据下拉列表的值变化动态填写表单字段
【发布时间】：2015-12-20 07:19:07
【问题描述】：

我正在处理一个 RoR 项目的订单表格，并希望用数据库中的现有客户信息填写买家信息。所以我需要从下拉列表（选择字段）中选择一个客户名称，然后用所选客户的信息填写买家信息字段（姓名、电话、电子邮件、地址等）。

因此我的问题是，这样做的首选做法是什么？我的想法类似于使用 GET 方法进行 Ajax 调用以获取 json 格式数据，然后使用 jQuery 填写或更改买家信息字段。实现这个功能是正确的“rails way”吗？

顺便说一句，整个订单表格是 simple_form，买家信息字段都在 simple_fields_for 部分。如果这有帮助。

【问题讨论】：

标签： ruby-on-rails ajax simple-form

【解决方案1】：

执行此操作的“标准”方式是通过 ajax（只需向您的 users#show 操作发送 JSON 请求，它应该会返回您请求的用户数据——我稍后会写）。

从你的问题看来，你应该做点别的。

用数据库中现有的客户信息填写买家信息

这是不好的做法——它会导致你的数据库中出现重复的条目。

这样做的方式是利用 Rails 中的 associations 允许您将customer 与新的买家信息关联：

#app/models/order.rb
class Order < ActiveRecord::Base
   belongs_to :customer #-> requires "customer_id" in "orders" table
end

#app/models/customer.rb
class Customer < ActiveRecord::Base
   has_many :orders
end

这将在您的order 上创建一个关联的customer 对象：@order.customer，它将返回您其他数据库表中的数据。

您必须确保为新的 Order 对象填充 customer_id 参数：

#app/controllers/orders_controller.rb
class OrdersController < ApplicationController
   def new
      @customers = Customer.all
      @order = Order.new
   end

   def create
      @order = Order.new order_params
      @order.save
   end

   private

   def order_params
      params.require(:order).permit(:customer_id, :etc, :etc)
   end
end

#app/views/orders/new.html.erb
<%= form_for @order do |f| %>
   <%= f.collection_select :customer_id, @customers, :id, :name %>
   <%= f.submit %>
<% end %>

您也可以通过上述代码使用您所要求的内容。

您基本上需要向您的 customers#show 操作发送 Ajax (JSON) 请求，这会将特定 customer 的相关字段返回给您的 JS：

#app/controllers/customers_controller.rb
class CustomersController < ApplicationController
   respond_to :json, :html, only: :show

   def show
      @customer = Customer.find params[:id]
      respond_with @customer
   end
end

#app/assets/javascripts/application.js
$(document).on("change", "select#customer_id", function(e){
   $.ajax({
      url: "customers",
      dataType: "json",
      data: { id: $(this).val() },
      success: function(data){
         // Output returned data in form
      }
   });
});

【讨论】：

【解决方案2】：

如果您想根据用户的选择来填充表单，那么您绝对需要使用某种 javascript 解决方案。进行 AJAX 调用，或者如果可行（即，您没有太多客户可以以这种方式序列化，这不是安全或性能问题），您可以将客户数据作为 json 预加载到前端 javascript 中，例如所以（在你看来）：

<script>
   var customerData = JSON.parse(<%= @customers.to_json %>);
</script>

然后让所选用户的数据根据该变量中的数据填充表单。

这将带来更快、更流畅的用户体验，并且在每次用户更改该选择框的值时不必进行 AJAX 调用的后端更容易。

【讨论】：