title: Calculating prices by javascript in laravel
body: <p>I'm using <code>laravel</code> and I want to sum two numbers and show it in my blade.</p>
  
  <h2>Logic</h2>
  
  <ol>
  <li>I have hidden input field which is holding my product price</li>
  <li>I have drop-down options which users can select</li>
  <li>When users select any of the options my product price should sum to
  that option price and return the result as total to users.</li>
  </ol>
  
  <h2>Codes</h2>
  
  <p><code>&lt;!--hidden field of product price--&gt;</code></p>
  
  <pre><code>&lt;input type="hidden" id="harga" name="harga" value="{{$product-&gt;price}}"&gt;
  </code></pre>
  
  <p><code>&lt;!--div to show total price--&gt;</code></p>
  
  <pre><code>&lt;div id="totalPriceInTotal"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><code>&lt;!--my options--&gt;</code></p>
  
  <pre><code>&lt;select name="attr[]" class="form-control"&gt;
    &lt;option value=""&gt;{{ __('Select') }}&lt;/option&gt;
    @foreach($optioncollection as $suboption)
      &lt;option value="{{$suboption-&gt;id}}"&gt;{{$suboption-&gt;title}} - {{ __('Rp') }} {{ number_format($suboption-&gt;price, 0) }}&lt;/option&gt;
    @endforeach
  &lt;/select&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>&lt;script&gt;
    $(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('&lt;p&gt;Cost: Rp '+nf.format(shipingcostnumber)+'&lt;/p&gt;');
          }
        });
    });
  &lt;/script&gt;
  </code></pre>
  
  <blockquote>
    <p>PS: I am aware that my JavaScript code is wrong, what I'd tried to do
    here was to getting my hidden input value in my <code>totalPriceInTotal</code>
    div which obviously was unsuccessful and then try to add my drop-down
    values into it.</p>
  </blockquote>
  
  <h2>Questions</h2>
  
  <ol>
  <li>What should I change to get my hidden input value in my
  <code>totalPriceInTotal</code> div when page loads?</li>
  <li>How do I add my options value into it?</li>
  </ol>
  
  <p>Note: for my options part i cannot add my options prices into <code>value=""</code> part because i need that value to be id for my cart so I added the price in options like <code>{{ number_format($suboption-&gt;price, 0) }}</code> probably i need help to remove texts around this price before i can actually sum it with my product price.</p>
  
  <p>thanks in advance.</p>