How to convert string to integer then sum in javascript

Question

I have two text boxes that will have currency strings in them which I then need to sum from the two text boxes into the total text box

srv_trk

but, the result an error like this: how to fix this?

total_price

how to delete rupiah so that srvPrice and trkPrice return to integer and the total is not error?

the code:

<script>
  const rupiah = (number)=>{
    return new Intl.NumberFormat("id-ID", {
      style: "currency",
      currency: "IDR"
    }).format(number);
  }
</script>
<script type="text/javascript">
  $("#service").change(function(){
    var element = $("option:selected", this);
    var srvPrice = element.attr("srvPrice");
    var trkPrice = $('#trkPrice').val();
    var total = Number(trkPrice) + Number(srvPrice);

    $('#srvPrice').val(rupiah(srvPrice));
    $('#totalPrice').val(rupiah(total));
  });
</script>
<script type="text/javascript">
  $("#trucking").change(function(){
    var element = $("option:selected", this);
    var trkPrice = element.attr("trkPrice");
    var srvPrice = $('#srvPrice').val();
    var total = Number(trkPrice) + Number(srvPrice);

    $('#trkPrice').val(rupiah(trkPrice));
    $('#totalPrice').val(rupiah(total));
  });
</script>

<div class="form-group row">
  <label class="col-sm-4 col-form-label" for="service">Service Name</label>
  <div class="col-sm-8">
      <select class="form-control selectric" name="service_id" id="service">
        <option srvPrice="" selected>Select an Option</option>
        @foreach ($service as $s)
          @if(old('service_id') == $s->service_id)
          <option value="{{ $s->service_id }}" {{ old('service_id') == $s->service_id ? 'selected' : '' }} srvPrice="{{ $s->service_price }}">{{ $s->service_name }}</option>
          @else
          <option value="{{ $s->service_id }}" srvPrice="{{ $s->service_price }}">{{ $s->service_name }}</option>
          @endif
        @endforeach
      </select>
  </div>
</div>
<div class="form-group row">
  <label class="col-sm-4 col-form-label" for="trucking">Trucking</label>
  <div class="col-sm-8">
    <select class="form-control selectric" name="trucking_id" id="trucking">
      <option trkPrice="" selected>Select an Option</option>
      @foreach ($trucking as $t)
        @if(old('trucking_id') == $t->trucking_id)
        <option value="{{ $t->trucking_id }}" {{ old('trucking_id') == $t->trucking_id ? 'selected' : '' }} trkPrice="{{ $t->trucking_price }}">{{ $t->trucking_name }}</option>
        @else
        <option value="{{ $t->trucking_id }}" trkPrice="{{ $t->trucking_price }}">{{ $t->trucking_name }}</option>
        @endif
      @endforeach
    </select>
  </div>
</div>

<div class="form-group row">
  <label class="col-sm-4 col-form-label">Service Price</label>
  <div class="col-sm-8">
    <input type="text" class="form-control" id="srvPrice" required readonly>
    <div class="invalid-feedback">
      Please make a selection on Service Option.
    </div>
  </div>
</div>
<div class="form-group row">
  <label class="col-sm-4 col-form-label">Trucking Price</label>
  <div class="col-sm-8">
    <input type="text" class="form-control" id="trkPrice" readonly>
  </div>
</div>
<div class="form-group row">
  <label class="col-sm-4 col-form-label">Total Price</label>
  <div class="col-sm-8">
      <input type="text" class="form-control" id="totalPrice" required readonly>
      <div class="invalid-feedback">
         Please make a selection on Service Option.
      </div>
  </div>
</div>

Answer 1

You can simply achieve this with a single line of code by using String.replace() method along with parseInt()

Live Demo :

const servicePrice = 'Rp 550.000,00';
const truckingPrice = 'Rp 100.000,00';

const totalPrice = parseInt(servicePrice.replace('Rp', '').trim()) + parseInt(truckingPrice.replace('Rp', '').trim());

console.log(totalPrice);