Rails 选择表单：在提交之前显示和使用选择表单值？答案

【问题标题】：Rails select form: displaying and using select form value before submit?Rails 选择表单：在提交之前显示和使用选择表单值？
【发布时间】：2019-05-21 22:36:33
【问题描述】：

我正在为下单流程制作一个多步骤表单。在其中，我有两个用于运输国家和运输服务的选择器。选择国家后，将显示给定地点和重量的所有运输服务。下订单后，所有内容都会写入模型。所有运输详细信息流程均通过 Ryan Bates #217 Multistep Forms 之后的多步骤表单完成

运输服务选择器是在选择运输国家后通过 javascript ajax 调用填充的。我遵循了这两个教程Dynamic select boxes with Rails 4 和Dependent country city state。

$(document).on("change", "#lands_select", function(event){
  $.ajax({
    url: "/carts/update_shipping/" + event.target.value,
    type: "GET"
  })
});

update_shipping.js.erb

$("#shippingservices_select").empty()
  .append("<%= escape_javascript(render(:partial => @shippingservices)) %>");

_shippingservice.html.erb

<option value="<%= shippingservice.id %>"><%= shippingservice.name.titleize %></option>

除此之外，我还想显示与在表单下方的两个选择器中所做的选择相关的运费以及计算出的总运费。

购物车的小计成本在购物车模型中计算，在订单模型中为订单计算。

我该怎么做？由于这两个值尚未写入订单数据库，但我必须显示第二个选择器选择的结果价格，该选择器位于运输服务表内，但由于订单已被写入但我无法通过订单实例调用它多变的。我的猜测是我必须这样做以适应 ajax 调用，可能是这样吗？我该怎么做？

据我所知，我现在所拥有的是通过订单控制器的 update_shipping 操作生成的 json 填充表单。

提前致谢！

【问题讨论】：

成本是取决于某些东西还是只是 shippingservices 表中的一列？
@Vasilisa。嘿 Vasilisa 很高兴收到你的来信。运输成本将在运输服务表的列中。所有额外成本（例如包装）都已包含在表中的此值中。我需要获取此值并以某种方式将其添加到购物车模型中计算的 cart.subtotal，并将其显示在运输购物车页面上以及通过订单控制器的订单创建部分。提交订单后，我可以依赖写入订单表的值，但在此过程中，我认为我需要 javascript + AJAX + 一种添加值的方法。
我知道如何进行 ajax 调用来替换 div，但在这里我将更改数据加载到其他形式的表单中。将两者结合起来目前超出了我的能力范围。
我想我必须在现有 ajax 调用的 on change 调用中添加另一个 js 函数，但我不知道如何使用与第二个函数中的选择相关的值。我希望我能清楚地表达自己。

标签： javascript jquery ruby-on-rails ajax ruby-on-rails-3

【解决方案1】：

您可以在数据属性中传递该列：

<option value="<%= shippingservice.id %>" data-cost="<%= shippingservice.cost %>"><%= shippingservice.name.titleize %></option>

然后通过类似JS的方式显示

$(document).on("change", "#shippingservices_select", function(event){
  var cost = $(event.target).data('cost');
  $("#some_cost_div").html(cost);
  // maybe add to total etc.
});

【讨论】：

感谢您的回复。我几乎可以正常工作了。使用[s.name.titleize, s.id, {'data-price' => s.price}] 和$(document).on("change", "#shippingservices_select", function(event){ var price = $(event.target).data('price'); $("#shipping_cost").html(price); // maybe add to total etc. }); 和Shipping: €<div id="shipping_cost"></div> 他在页面中打印出price。我怎样才能获得价值？
我检查了一下，发生了一些奇怪的事情。我在加载的 DOM 中获得了数据价格，但在通过 ajax 获取的部分中却没有。为什么会这样？
通过指定渲染操作的所有选项来优化 update_shipping.js.erb 的视图后，现在一切正常，我终于可以确认答案正常。非常感谢您的帮助 Vasfed 我学到了一些新东西！！！