如何在单击按钮时使表单中的多个输入显示为不同表单上的选择选项值？

Question

这是我关于堆栈溢出的第一个问题，所以请耐心等待。

我创建了一个供用户填写的表格，有一个选择框（用于选择您的国家）和三个输入字段（邮政编码、城市和街道地址）。

现在，当提交此表单（单击按钮）时，我希望此信息在我的其他表单的选择框中显示为单个选项值。

有人可以帮助我吗？我试图到处查找，但找不到任何答案。

这是用户必须填写的第一个表单的 HTML.erb：

<div id="custom-form-field-wrapper">
      <h2>Leveringsadresse</h2>
      <a id="toggle-address-button"> Add address </a>
      <div class="custom-form-field" id="address-form-field">
      <%= render 'addresses/form' %>
      <a id="cancel-address-button"> Cancel </a>
      </div>

      <div class="custom-form-field" id="order-form-field">
      <%= render 'form', order: @order %>
      </div>
</div>

这是地址表单的渲染代码：

<%= simple_form_for current_user.addresses.new do |f| %>
 <%= f.input :country, priority: ['Norway'], label: false %>
 <%= f.input :zip_code, :placeholder => 'Postnr', :maxlength => '4', label: false %>
 <%= f.input :city, :placeholder => 'By', label: false %>
 <%= f.input :street_address, :placeholder => "Gateadresse", label: false %>
 <%= f.button :submit, 'Legg til' %>
<% end %>

这是另一个选择表单的 HTML.erb，我希望显示新的选项值：

  <%= form_tag orders_path, id: 'payment-form' do %>
  <span class="payment-errors"></span>
  <div class="form-group" id="velg_leveringsadresse">
  <%= select_tag 'address', options_for_select(current_user.addresses.all.collect { |a| [a.full_address, a.id] }), class: 'form-control', prompt: 'Leveringsadresse' %>
  </div>

Answer 1

Rails 和 Simple form 都具有从关联或记录集合创建选择、复选框和单选按钮的方法。

• http://guides.rubyonrails.org/form_helpers.html#making-select-boxes-with-ease
• https://github.com/plataformatec/simple_form#associations

---

这是传统的做法：

<%= simple_form_for @order, id: 'payment-form' do |f| %>
  #... more fields
  <%= f.association :delivery_address, 
    collection: current_user.addresses, 
    prompt: "Velg leveringsaddresse", 
    label_method:  :street_address
  %>
<% end %>

请注意，您需要在模型中创建一个关系来支持它：

class Order
  has_one :delivery_address, class: "Address"
end

以及向 Order 添加列的迁移：

rails g AddDeleveryAddressToOrder delivery_address:references

您可以重复这些步骤来添加单独的帐单邮寄地址。

---

请注意，如果您打算让用户异步执行所有操作，即用户在模式对话框或订单的其他部分中输入地址#new 页面，您需要在用户创建新地址时刷新输入.

一种方法是请求：

GET /users/:user_id/addresses.json # Note that you actually have to implement it! 

首先我们可以给输入添加一个路径，告诉它从哪里获取数据：

<%= simple_form_for @order, id: 'payment-form' do |f| %>
  #... more fields
  <%= f.association :delivery_address, 
    collection: current_user.addresses, 
    prompt: "Velg leveringsaddresse", 
    label_method:  :street_address,
    data: {
      path: user_addresses_path(user: current_user)
    }
  %>
<% end %>

然后我们设置一个处理程序，它可以获取数据并呈现一组新的选项。

$("#payment-form").on('refresh', function(){
  var $add_select = $(this).find('input[name="order[delivery_address]"]');
  var promise = $.getJSON($add_select.data('path'));
  // transform JSON data to a series of `<option>` elements
  promise.pipe(function(addresses){
    return $.map(addresses, function(address){
      var el = $("<option>"+ address["street_address"] +"</option>");
      el.val(address["id"]);
      return el;
    });
  });
  // replace contents of select with new options
  promise.done(function(options){
    $add_select.empty().append(options);
  });

  return false;
});

请注意，我们正在为非标准 refresh 事件设置侦听器。当POST /addresses 的 AJAX 处理程序完成时，您将触发该事件：

$("#address_form").on('submit', function(){
  var $form = $(this);
  var promise = $.post($form.attr('action'), $form.serializeArray());
  promise.done(function(){
    $("#payment-form").trigger('refresh');
  });
}); 

有关如何将其与 rails ujs 处理程序集成的说明，请参阅 working with javascript in rails。