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 >
  <label  for="service">Service Name</label>
  <div >
      <select  name="service_id" id="service">
        <option 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 >
  <label  for="trucking">Trucking</label>
  <div >
    <select  name="trucking_id" id="trucking">
      <option 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 >
  <label >Service Price</label>
  <div >
    <input type="text"  id="srvPrice" required readonly>
    <div >
      Please make a selection on Service Option.
    </div>
  </div>
</div>
<div >
  <label >Trucking Price</label>
  <div >
    <input type="text"  id="trkPrice" readonly>
  </div>
</div>
<div >
  <label >Total Price</label>
  <div >
      <input type="text"  id="totalPrice" required readonly>
      <div >
         Please make a selection on Service Option.
      </div>
  </div>
</div>

CodePudding user response：

Maybe you can just use the replace function on both strings before adding them up. (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace) So just variableName.replace("Rp ", "")

CodePudding user response：

if the Number is written in text format e.g. number = "5", then you can use parseInt(number) to convert it to integer, then you will be able to treat it as a normal number. Example:

let text = "5", x = 10;
console.log(parseInt(text) 10);

CodePudding user response：

 let text = "10";
 console.log(parseInt(text) 10);