Форма выбора Rails: отображение и использование значения формы выбора перед отправкой?

Question

Я работаю над многошаговой формой для оформления заказа.В нем у меня есть два селектора для стран доставки и услуг доставки.После выбора страны отображаются все услуги доставки для данного места и веса.Когда заказ размещен, все записывается в модель.Все детали процесса доставки выполняются с помощью многоэтапной формы, следующей за Райаном Бейтсом # 217 Многоэтапные формы

Селектор службы доставки заполняется через вызов ajax javascript после выбора страны доставки.Я следовал этим двум урокам Динамические поля выбора с Rails 4 и Город-государство зависимой страны .

$(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, это может быть?Как мне это сделать?

Теперь у меня есть то, что форма заполняется через json, созданный действием update_shipping контроллера заказов, насколько я понимаю.

Заранее спасибо!

Answer 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.
});