Rails используя javascript - изменяя выпадающие значения, меняйте значения text_field и затем автоматически вычисляйте

Question

Я застрял с одной проблемой.У меня есть один выпадающий список с именем продукта.Я хочу, выбрав товар, изменить его цену (hidden_field), а затем ввести количество товара (text_field), рассчитать totalPrice (text_field) этого товара

Вот мой файл вида выглядит как

<%= form_for @product_fills, url: product_fills_path , method: :post do |f| %>
    <div class="col-xs-4 col-sm-2">
      <div class="form-group has-feedback">
        <%= f.collection_select(:product_id, @products,:id,:name , {include_blank: '-- Active Nozzle --'}, {class:'form-control', id: 'product_select' }) %>
      </div>
    </div>
    <div class="col-xs-4 col-sm-2">
      <div class="form-group has-feedback">
        <%= hidden_field_tag 'price' , id: 'prices'  %>         
        <%= f.text_field :quantity ,   class:'form-control', placeholder: 'Quantity', id: 'quantity' %>
      </div>
    </div>

    <div class="col-xs-4 col-sm-2">
      <div class="form-group has-feedback">
        <%= f.text_field :amount , required: true, autocomplete: 'off', class:'form-control', placeholder: 'Amount', id: 'total_price' %>
      </div>
    </div>

<% end %>

и вот мой код JavaScript

<script>

  $(document).ready(function() {

      var price =  <%= @price %>
// Change value by changing drop down vlaues
      $("#product_select option").filter(function() {
        if $(this).val(<% @products %>) == $("#prices").val(price){
            return $("#product_select").val()
          }
        }      
      $("#product_select").on("change", function() {
          $("#prices").val(price);
      });


// Calculation
    $('#quantity').on('keyup', function(e) {
      var quantity = $(this).val();
      $('#total_price').val((price * quantity).toFixed(2));
    });

  });

</script>

мой контроллер выглядит следующим образом

def new

   @products = Product.where(id: @product_ids, active: true )
   @products.each do |product|
      puts "Product_PRICE: #{product.product_price}"
      @price = product.product_price
    end

end

Здесь функция расчета работает нормально (она принимает одно значение цены),Но в раскрывающемся списке товаров у меня столько значений, сколько нужно, изменив стоимость товара, чтобы вычислить соответствующую общую цену товара.

Answer 1

I Исправлена ​​эта проблема, передавая значения массива как для раскрывающегося списка (товар), так и для text_field (цена), а также изменяя выбранный индекс значения раскрывающегося списка, значение индекса цены также изменялось функцией изменения.

Здесь мой jquery выглядит как

    <script>
          $(document).ready(function() {
              var price =  <%= @price.compact! %>
        // Change values by changing drop down vlaues
            $(".product_select").on("change", function() {
              var id = this.selectedIndex - 1
              $(".prices").val(price[id]);
              var selectedPrice = price[id];
        // Calculation
                $('#quantity').on('keyup', function(e) {
                  var quantity = $(this).val();
                  $('#total_price').val((selectedPrice * quantity).toFixed(2));
                });
             });
          });

   </script>

и изменен в контроллере

 def new
    @product_ids = []
    @price = []

    @products = Product.where(id: @product_ids, active: true )
    @products.each do |product|
      @price[product.id] = product.product_price
    end
 end

Answer 2

Существует некоторая опечатка с вашим синтаксисом jQuery,

1 => поле количества должно иметь числовой тип, однако вам необходимо проанализировать это значение как целое с помощью parseInt()

2 =>pice также должен быть проанализирован с parseFloat()

3 => Не уверен с $ ("опция # product_select"). filter (function () {...}), он также содержит некоторую опечатку.

Изменить выбранный тег на

   <%= f.select :product_id, options_for_select(@products.map{ |p| [p.name, p.id, {'data-price'=>p.product_price}] }), :include_blank => '-- Active Nozzle --', class: 'form-control', id: 'product_select'%>

Настройка скрипта

<script>

  $(document).ready(function() {

      //var price =  "<%= @price %>";
     // Change value by changing drop down vlaues
      //$("#product_select option").filter(function() {
        //if($(this).val(<% @products %>) == $("#prices").val(price)){
            //return $("#product_select").val()
          //}
        //}      
      $("#product_select").change(function() {
        var price  = $(this).data("price");
        $("#prices").val(price);
      });


    // Calculation
    $('#quantity').on('keyup', function(e) {
      var price = parseFloat($("#prices").val());
      var quantity = parseInt($(this).val());
      $('#total_price').val((price * quantity).toFixed(2));
    });

  });

</script>

Пожалуйста, проверьте его, он должен работать.