已解决

Question

我正在使用<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js"></script>，我想对两个数字求和并将其显示在刀片中。

逻辑

我隐藏了输入商品价格的隐藏输入字段
我有可供用户选择的下拉选项
当用户选择任何选项时，我的产品价格应为该期权价格，并将结果总计返回给用户。

代码

laravel

<!--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-->

JavaScript：

<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>

PS：我知道我的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>中获取隐藏的输入值 div显然不成功，然后尝试添加我的下拉菜单值。

问题

我该如何更改才能在我的设备中获取隐藏的输入值页面加载时totalPriceInTotal格？
如何在其中添加我的期权价值？

注意：对于我的期权部分，我无法将我的期权价格添加到totalPriceInTotal部分中，因为我需要将该值作为购物车的ID，因此我将价格添加到了value=""之类的期权中，可能我需要帮助在我可以实际将其与我的产品价格相加之前，删除此价格附近的文本。

提前谢谢。

Answer 1

我建议给隐藏字段一个数据属性，例如

<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）}}

然后，您可以将两个值都添加并添加到彼此，然后将它们附加到“ totalPriceInTotal” div（这是一个糟糕的名字恕我直言^^）

如果添加无效，请使用

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

目前，我不确定到底是什么对您不起作用，因此，如果您需要更多帮助，请告诉我！

Answer 2

已解决

因此，我必须在控制器中添加功能以获取下拉选项的价格，这是我的最终代码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>

希望这可以帮助其他人。

通过Laravel中的JavaScript计算价格

逻辑

代码

问题

2 个答案:

已解决