Расчет цены по javascript в laravel

Question

Я использую laravel, и я хочу сложить два числа и показать его в моем клинке.

Logic

1. У меня есть скрытое поле ввода, в котором указана цена моего продукта
2. У меня есть раскрывающиеся опции, которые пользователи могут выбрать
3. Когда пользователи выбирают любой из вариантов, цена моего продукта должна составлять эту цену опциона и вернуть результат как общее значение пользователям.

Коды

<!--hidden field of product price-->

<input type="hidden" id="harga" name="harga" value="{{$product->price}}">

<!--div to show total price-->

<div id="totalPriceInTotal"></div>

<!--my options-->

<select name="attr[]" class="form-control">
  <option value="">{{ __('Select') }}</option>
  @foreach($optioncollection as $suboption)
    <option value="{{$suboption->id}}">{{$suboption->title}} - {{ __('Rp') }} {{ number_format($suboption->price, 0) }}</option>
  @endforeach
</select>

JavaScript:

<script>
  $(document).ready(function() {
      var optionprice = document.getElementById('harga').val();

      $.ajax({
        success:function(data) {
          // var optionprice = $(#attr).val();
          var shipingcost = parseFloat(data)+parseFloat(optionprice);
          var shipingcostnumber = shipingcost;
          var nf = new Intl.NumberFormat('en-US', {
              maximumFractionDigits:0, 
              minimumFractionDigits:0
          });
          $('#totalPriceInTotal').append('<p>Cost: Rp '+nf.format(shipingcostnumber)+'</p>');
        }
      });
  });
</script>

PS: я знаю, что мой код JavaScript неправильный, что я пытался сделать здесь нужно было получить мое скрытое значение ввода в моем totalPriceInTotal div, который, очевидно, был неудачным, а затем попробуйте добавить мой раскрывающийся список значения в него.

Вопросы

1. Что я должен изменить, чтобы получить скрытое значение ввода в моем totalPriceInTotal div при загрузке страницы?
2. Как мне добавить в него значение моих опций?

Примечание: для моей части опций я не могу добавить свои цены опционов в value="" часть, потому что мне нужно, чтобы это значение было идентификатором для моей корзины, поэтому я добавил цену в опциях типа {{ number_format($suboption->price, 0) }}, вероятно, мне нужна помощь, чтобы удалить тексты вокруг эту цену, прежде чем я смогу суммировать ее с ценой моего продукта.

заранее спасибо.

Answer 1

решаемые

Так что мне нужно было добавить функцию в мой контроллер, чтобы получить цены на раскрывающиеся опции, и вот мой окончательный код I commented my parts for better understanding

<script>
  $(document).ready(function() {
    // if option is not selected shows product price
    $('#totalPriceInTotal').empty();
    var productprice = $('#harga').val();
    var shipingcost = parseFloat(productprice);
    var shipingcostnumber = shipingcost;
    var nf = new Intl.NumberFormat('en-US', {
        maximumFractionDigits:0, 
        minimumFractionDigits:0
    });
    $('#totalPriceInTotal').append('Rp '+nf.format(shipingcostnumber)+'');

    // if option is selected will sum product price and option price
    $('select[name="attr[]"]').on('change', function() {
      var productprice = $('#harga').val();
      var optionprice = $(this).val();
      if(optionprice) {
        $.ajax({
          url: '{{ url('admin/getoptionprice') }}/'+encodeURI(optionprice),
          type: "GET",
          dataType: "json",
          success:function(data) {
            $('#totalPriceInTotal').empty();
            var shipingcost = parseFloat(data)+parseFloat(productprice);
            var shipingcostnumber = shipingcost;
            var nf = new Intl.NumberFormat('en-US', {
                maximumFractionDigits:0, 
                minimumFractionDigits:0
            });
            $('#totalPriceInTotal').append('Rp '+nf.format(shipingcostnumber)+'');
          }
        });
      }else{
       // if user decided to back to default and not using any option price will back to normal
        $('#totalPriceInTotal').empty();
        var productprice = $('#harga').val();
        var shipingcost = parseFloat(productprice);
        var shipingcostnumber = shipingcost;
        var nf = new Intl.NumberFormat('en-US', {
            maximumFractionDigits:0, 
            minimumFractionDigits:0
        });
        $('#totalPriceInTotal').append('Rp '+nf.format(shipingcostnumber)+'');
      }
    });
  });
</script>

Надеюсь, это поможет другим.

Answer 2

Советую дать скрытому полю атрибут данных, например,

<input type="hidden" id="harga" name="harga" data-price="{{$product->price}}">

Тогда в JavaScript вы можете сделать это:

$('#harga').data('price');

Вы можете сделать то же самое для выпадающего списка, хотя я не до конца понимаю, что это делает

{{$ suboption-> id}} "> {{$ suboption-> title}} - {{__ ('Rp')}} {{number_format ($ suboption-> price, 0)}}

Затем вы можете взять оба значения и добавить их друг к другу, а затем добавить их в div "totalPriceInTotal" (это ужасное имя imho ^^)

Если добавление не работает, просто используйте

$('#totalPriceInTotal').val() = '<p>Cost: Rp ' + calculatedPrice + '</p>';

На данный момент я не уверен, что именно вам не подходит, поэтому, если вам нужна дополнительная помощь, пожалуйста, дайте мне знать!