javascript multiply 2 number show total and gtotal but show only one value?-CodePudding

I am using javascript calculation. multiply 2 numbers: number 1 * number 2 = total and how g-total but working only one value display?

I have need number 1 * number 2 = total and show Gtotal so please help and share a valuable idea...

HTML

<input
  name="per_hour"
  id="per_hour"
  
  value=""
  onblur="perhour()"
  placeholder="0"
/>

<input
  name="per_hour_x"
  id="per_hour_x"
  
  onblur="perhour()"
  value=""
  placeholder="0.00"
/>

Total

<input
  name="per_hour_total"
  id="per_hour_total"
  
  value=""
  placeholder="0.00"
/>

G-Total

<input
  type="text"
  
  id="total"
  disabled
  value="<?= $booking->total_fare ?>"
/>

<script>
  function perhour() {
    var per_hour = document.getElementById("per_hour").value;
    var per_hour_x = document.getElementById("per_hour_x").value;
    var amts = document.getElementById("total").value;
    var totaperhour = Number(per_hour) * Number(per_hour_x);
    var totalamt = Number(totaperhour)   Number(amts);

    $("#per_hour_total").val(totaperhour).toFixed(2); //working
    $("#total").val(totalamt).toFixed(2); //not working
  }
</script>

CodePudding user response：

It should be $('#per_hour_total').val(totaperhour.toFixed(2)); and not $('#per_hour_total').val(totaperhour).toFixed(2);

function perhour() {
  var per_hour = document.getElementById("per_hour").value;
  var per_hour_x = document.getElementById("per_hour_x").value;
  var amts = document.getElementById("total").value;
  var totaperhour = Number(per_hour) * Number(per_hour_x);
  var totalamt = Number(totaperhour)   Number(amts);

  $('#per_hour_total').val(totaperhour.toFixed(2));
  $('#total').val(totalamt.toFixed(2)); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div>
  total
  <input type="text"  disabled id="total" value="">
</div>
<div>
  per_hour
  <input name="per_hour" id="per_hour"  value="" onblur="perhour()" placeholder="0">
</div>
<div>
  per_hour_x
  <input name="per_hour_x" id="per_hour_x"  onblur="perhour()" value="" placeholder="0.00">
</div>
<div>
  per_hour_total
  <input name="per_hour_total" id="per_hour_total"  value="" placeholder="0.00">
</div>