【问题标题】：Calculating prices by javascript in laravel在laravel中通过javascript计算价格
【发布时间】：2018-12-13 12:32:08
【问题描述】：

我正在使用laravel，我想将两个数字相加并显示在我的刀片中。

逻辑

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

代码

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

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

<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 然后尝试添加我的下拉列表价值观。

问题

我应该改变什么来获得我的隐藏输入值页面加载时totalPriceInTotal div？
如何将我的选项值添加到其中？

注意：对于我的选项部分，我无法将我的选项价格添加到 value="" 部分，因为我需要将该值作为我的购物车的 ID，所以我在选项中添加了价格，例如 {{ number_format($suboption->price, 0) }} 可能我需要帮助来删除周围的文本这个价格在我可以实际与我的产品价格相加之前。

提前致谢。

【问题讨论】：

标签： javascript php laravel

【解决方案1】：

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

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

目前我不确定什么对你不起作用，所以如果你需要更多帮助，请告诉我！

【讨论】：

【解决方案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>

希望这可以帮助其他人。

【讨论】：