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表单都有方法从关联或记录集合中创建选择，复选框和单选按钮。

这是传统方法：

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

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

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

执行此操作的一种方法是执行以下请求：

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。

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

1 个答案: