Rails 5: пересчитать сумму выбранного поля

Question

Я пытаюсь отобразить сумму выбранного поля, например 12 multiplied by the price.

В настоящее время я могу отобразить сумму один раз, но когда происходит событие изменения, общая сумма не обновляется в предварительном просмотре.

Мой текущий код:

<script>

$(function() {

  $.ajax({
    url: '<%= preload_wine_path(@wine) %>',
    dateTyp: 'json',
    success: function(data) {

      $.each(data, function(arrID, arrValue) {

      });

      $('#reservation_start_date').datepicker({
        dateFormat: 'dd-mm-yy',
        minDate: 2,
        maxDate: '5d',
        beforeShowDay: $.datepicker.noWeekends,
        onSelect: function(selected) {
          $('#preview').show();
          $('#btn_book').attr('disabled', false);

          var bottles = document.getElementById("bottles").value;
          var total = bottles * <%= @wine.price %>

          $('#reservation_bottles').text(bottles);
          $('#reservation_total').text(total);    
        }
      });
    }
  });
});

</script>

Я также пытался добавить addEventListener('onChange'), но я все еще сталкиваюсь с той же проблемой.

Answer 1

Я обновил код и нашел его в качестве рабочего решения.

<script>

$(function() {

  $.ajax({
    url: '<%= preload_wine_path(@wine) %>',
    dateTyp: 'json',
    success: function(data) {

      var bottles = document.getElementById("bottles").value;
      var total = bottles * <%= @wine.price %>
      $('#reservation_bottles').text(bottles);
      $('#reservation_total').text(total);

      $('#reservation_start_date').datepicker({
        dateFormat: 'dd-mm-yy',
        minDate: 2,
        maxDate: '5d',
        beforeShowDay: $.datepicker.noWeekends,
        onSelect: function(selected) {
          $('#preview').show();
          $('#btn_book').attr('disabled', false);

          $('#bottles').on('click', function() {
          var bottles = $(this).val();
          var total = bottles * <%= @wine.price %>

          $('#reservation_bottles').text(bottles);
          $('#reservation_total').text(total.toFixed(2));

          });
        }
      });
    }
  });
});

</script>

Answer 2

Попробуйте:

$(".bottles").on("change", function() {
   $.ajax({
    url: '<%= preload_wine_path(@wine) %>',
    dateType: 'json',
    success: function(data) {

          var bottles = $(this).val();
          var total = bottles * <%= @wine.price %>

          $('#reservation_bottles').text(bottles);
          $('#reservation_total').text(total);    
        }
      });
    }
  });
});