We Keep Coding

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

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"
class="form-control"
value=""
onblur="perhour()"
placeholder="0"
/>
<input
name="per_hour_x"
id="per_hour_x"
class="form-control"
onblur="perhour()"
value=""
placeholder="0.00"
/>
Total
<input
name="per_hour_total"
id="per_hour_total"
class="form-control"
value=""
placeholder="0.00"
/>
G-Total
<input
type="text"
class="form-control total-fare"
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>

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" class="form-control total-fare" disabled id="total" value="">
</div>
<div>
per_hour
<input name="per_hour" id="per_hour" class="form-control" value="" onblur="perhour()" placeholder="0">
</div>
<div>
per_hour_x
<input name="per_hour_x" id="per_hour_x" class="form-control" onblur="perhour()" value="" placeholder="0.00">
</div>
<div>
per_hour_total
<input name="per_hour_total" id="per_hour_total" class="form-control" value="" placeholder="0.00">
</div>

Calculation use key up function with a thousand separator format

i want to make a calculation when user key in, the result will show in other field. with format number with thousand separator like 2,500.00
so if i sum 2,500.00 + 2,500.00 the result must be 5,000.00
but my code show 4.00
function isNumberKey(evt) {
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode(key);
if (key.length == 0) return;
var regex = /^[0-9.,\b]+$/;
if (!regex.test(key)) {
theEvent.returnValue = false;
if (theEvent.preventDefault) theEvent.preventDefault();
}
}
function toFloat(z) {
var x = document.getElementById(z);
x.value = parseFloat(x.value).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
}
$( ".fn" ).keyup(function() {
var nmi = $('#nmi').val();
var a = $('#a').val();
var total = parseFloat(nmi) + parseFloat(a);
$("#total").val(parseFloat(total).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input onchange="toFloat('nmi')" type="text" maxlength="10" onkeypress="return isNumberKey(event)" required="required" class="form-control fn" placeholder="RM" name="nmi" id="nmi">
<input onchange="toFloat('a')" type="text" maxlength="10" onkeypress="return isNumberKey(event)" required="required" class="form-control fn" placeholder="RM" name="a" id="a">
<br> total
<input onchange="toFloat('total')" type="text" maxlength="10" onkeypress="return isNumberKey(event)" required="required" class="form-control fn" placeholder="RM" name="total" id="total">

Lets try this one,,, thats works for me "Dial Gtg"
$('input.CurrencyInput').on('blur', function() {
const value = this.value.replace(/,/g, '');
this.value = parseFloat(value).toLocaleString('en-US', {
style: 'decimal',
maximumFractionDigits: 2,
minimumFractionDigits: 2
});
});
$('input.CurrencyInput2').on('blur', function() {
const value = this.value.replace(/,/g, '');
this.value = parseFloat(value).toLocaleString('en-US', {
style: 'decimal',
maximumFractionDigits: 2,
minimumFractionDigits: 2
});
});
$( ".fn" ).keyup(function() {
var a = $('#a').val().replace(/,/g,'');
var b = $('#b').val().replace(/,/g,'');
var total = parseFloat(a) + parseFloat(b);
$("#total_nya").val(parseFloat(total).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="CurrencyInput fn" id="a">
<input class="CurrencyInput2 fn" id="b">
<input class="total_nya" id="total_nya">

When parseFloat('2,500.00') will return 2 because of ,.
parseFloat: parses its argument, and returns a floating point number. If it encounters a character other than a sign (+ or -), numeral (0-9), a decimal point, or an exponent, it returns the value up to that point and ignores that character and all succeeding characters
remove , from value by using replace()
function isNumberKey(evt) {
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode(key);
if (key.length == 0) return;
var regex = /^[0-9.,\b]+$/;
if (!regex.test(key)) {
theEvent.returnValue = false;
if (theEvent.preventDefault) theEvent.preventDefault();
}
}
function toFloat(z) {
var x = document.getElementById(z);
x.value = parseFloat(x.value).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
}
$( ".fn" ).keyup(function() {
var nmi = $('#nmi').val().replace(/,/g,'');
var a = $('#a').val().replace(/,/g,'');
var total = parseFloat(nmi) + parseFloat(a);
$("#total").val(parseFloat(total).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input onchange="toFloat('nmi')" type="text" maxlength="10" onkeypress="return isNumberKey(event)" required="required" class="form-control fn" placeholder="RM" name="nmi" id="nmi">
<input onchange="toFloat('a')" type="text" maxlength="10" onkeypress="return isNumberKey(event)" required="required" class="form-control fn" placeholder="RM" name="a" id="a">
<br> total
<input onchange="toFloat('total')" type="text" maxlength="10" onkeypress="return isNumberKey(event)" required="required" class="form-control fn" placeholder="RM" name="total" id="total">

Simple for your change in code.
$(document).ready(function() {
$('.fn').on('input', function() {
this.value = this.value.match(/^\d+\.?\d{0,2}/);
calculate();
});
});
function calculate() {
var t = 0;
nmi = ($("#nmi").val() ? parseFloat($("#nmi").val()) : 0);
a = ($("#a").val() ? parseFloat($("#a").val()) : 0);
$("#total").val(nmi + a);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" maxlength="10" required="required" class="form-control fn" placeholder="RM" name="nmi" id="nmi">
<input type="text" maxlength="10" required="required" class="form-control fn" placeholder="RM" name="a" id="a">
<br> total
<input type="text" maxlength="10" required="required" class="form-control fn" placeholder="RM" name="total" id="total">

add additional value to the total

I am looking for a way to add the value from (discount) and (quantity) to my total. As for discount part, the customer will need to enter the right code to receiver discount. And for quantity, when clicked at the checkbox, then change the quantity, the total will also follow. Can you guys help me out on this problem?
thanks
(sorry, my English is not good)
function addItemPrice() {
var total = 0;
var count = 0;
for (var i = 0; i < document.myform.item.length; i++) {
if (document.myform.item[i].checked) {
total = (total + document.myform.item[i].value * 1); // another way to convert string to number
count++;
}
}
return total;
}
var sh_prices = new Array();
sh_prices["standard"] = 10;
sh_prices["express"] = 20;
function getAddShipping() {
var shippingPrice = 0;
var theForm = document.forms["myform"];
var shipping = theForm.elements["shipping"]
for (var i = 0; i < shipping.length; i++) {
if (shipping[i].checked) {
shippingPrice = sh_prices[shipping[i].value];
break;
}
}
return shippingPrice;
}
function getCode() {
var theForm = document.forms["myform"];
var discode = theForm.elements["discount"]
if (discode == "UAC123") {
alert("yes");
} else {
alert("no")
}
}
function getTotal() {
var totalPrice = getAddShipping() + addItemPrice();
document.getElementById('Price').innerHTML = "the total price" + totalPrice;
}
<form name="myform">
Sickle $5 <input type="checkbox" name="item" value="5" onclick="getTotal(item)">
<input type="number" name="quantity"><br> Sickle $1 <input type="checkbox" name="item" value="1" onclick="getTotal(item)">
<input type="number" name="quantity" value="1"><br> Sickle $50 <input type="checkbox" name="item" value="50" onclick="getTotal(item)">
<input type="number" name="quantity" value="1"><br> Sickle $5 <input type="checkbox" name="item" value="5" onclick="getTotal(item)">
<input type="number" name="quantity" value="1"><br> Sickle $7 <input type="checkbox" name="item" value="7" onclick="getTotal(item)">
<input type="number" name="quantity" value="1"><br> Standard
<input type="radio" name="shipping" value="standard" onClick="getTotal(shipping)" /> Express
<input type="radio" name="shipping" value="express" onClick="getTotal(shipping)" /> <br> Discount code
<input type="text" name="discount" size=15>
<input type="button" id="code" value="check" onClick="getCode(code)">
<div id="Price">
</div>
</form>

Javascript removes the decimals when adding numbers together

I have this script that adds the 4 numbers together but JS doesn't take into account the original decimal places.
// Initial input form
<form class="weight_form" data-ajax="false" method="post">
<input type="text" class="input_save" placeholder="save as.."/>
<input type="text" id="lf" placeholder="enter LF lbs" value="" onkeyup="myFunction()"/>
<input type="text" id="rf" placeholder="enter RF lbs" value="" onkeyup="myFunction()"/>
<input type="text" id="lr" placeholder="enter LR lbs" value="" onkeyup="myFunction()"/>
<input type="text" id="rr" placeholder="enter RR lbs" value="" onkeyup="myFunction()"/>
<input type="submit" id="sub_save" value="save"/>
// Section to display results
<div id="bottom_section">
<input type="text" id="total" value=""/>
<input type="text" id="cross" value=""/>
<input type="text" id="ls" value=""/>
<input type="text" id="bite" value=""/>
</div>
// JS script to perform action on the fly
<script>
function myFunction() {
var lf = document.getElementById("lf");
var rf = document.getElementById("rf");
var lr = document.getElementById("lr");
var rr = document.getElementById("rr");
var lf = parseInt(lf.value);
var rf = parseInt(rf.value);
var lr = parseInt(lr.value);
var rr = parseInt(rr.value);
var lf_1 = lf*1;
var rf_1 = rf*1;
var lr_1 = lr*1;
var rr_1 = rr*1;
var total = lf_1 + rf_1 + lr_1 + rr_1;
var cross = rf_1 + lr_1 / total;
var ls = lf_1 + lr_1 / total;
var bite = lr_1 - rr_1;
$('#total').val(total);
$('#cross').val(Math.round(cross));
$('#ls').val(Math.round(ls));
$('#bite').val(bite);
};
</script>
If I enter say 20.5 for each input in the "weight_form" (lf, rf, lr, rr) the total is 80 instead of 82. Why does it seem to always round down the value?

To handle floats in your form, use parseFloat instead of parseInt, when parsing your values from the input elements.
Since you're using jQuery, you can simplify myFunction by selecting your fields and parse their values in one line:
var lf = parseFloat($("#lf").val());
var rf = parseFloat($("#rf").val());
var lr = parseFloat($("#lr").val());
var rr = parseFloat($("#rr").val());
Example:
function myFunction() {
var lf = parseFloat($("#lf").val());
var rf = parseFloat($("#rf").val());
var lr = parseFloat($("#lr").val());
var rr = parseFloat($("#rr").val());
var lf_1 = lf * 1;
var rf_1 = rf * 1;
var lr_1 = lr * 1;
var rr_1 = rr * 1;
var total = lf_1 + rf_1 + lr_1 + rr_1;
var cross = rf_1 + lr_1 / total;
var ls = lf_1 + lr_1 / total;
var bite = lr_1 - rr_1;
$('#total').val(total);
$('#cross').val(Math.round(cross));
$('#ls').val(Math.round(ls));
$('#bite').val(bite);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form class="weight_form" data-ajax="false" method="post">
<input type="text" class="input_save" placeholder="save as.." />
<input type="text" id="lf" placeholder="enter LF lbs" value="" onkeyup="myFunction()" />
<input type="text" id="rf" placeholder="enter RF lbs" value="" onkeyup="myFunction()" />
<input type="text" id="lr" placeholder="enter LR lbs" value="" onkeyup="myFunction()" />
<input type="text" id="rr" placeholder="enter RR lbs" value="" onkeyup="myFunction()" />
<input type="submit" id="sub_save" value="save" />
<div id="bottom_section">
<input type="text" id="total" value="" />
<input type="text" id="cross" value="" />
<input type="text" id="ls" value="" />
<input type="text" id="bite" value="" />
</div>
</form>

How to calculate total price & grand total using keyup

hy all ..
I have quetion about jquery keyup
1. how I can calculate total from quantity[] * price[]
2 how I can callculate grantotal from price[]
I have try like this but not working
Thanks
$('input[name="qty[]"').each(function(index, value){
$('input[name="qty[]"').on('keyup',function(){
var tot = $('input[name="price[]"').val() * this.value;
$('input[name="subT[]"').val(tot);
// console.log($('input[name="qty[]"'));
})
});
//});
$('input[name="qty[]').keyup(function () {
var sum = 0;
$('.subT').each(function() {
sum += Number($(this).val());
});
$('#grandtotal').val(sum);
});

Change this
$('input[name="price[]"]')
to
$('input[name="price[]"]').val()
So, it should look like this:
$('input[name="qty[]"]').keyup(function() {
$('input[name="prodid[]"]').each(function() {
var subT = parseFloat($(this).val()) * parseFloat($('input[name="price[]"]').val());
$('input[name="total[]"]').val($(this).val() * $('input[name="price[]"]').val());
});
});

Try
$('input[name="qty[]"]').keyup(function() {
var total = (this.value * $(this).next('[name="price[]"]').val()) || 0;
$(this).next().next('[name="total[]"]').val(total)
var grand = 0;
$('[name="total[]"]').each(function() {
grand += +this.value || 0;
});
$('[name="grand_total"]').val(grand)
}).keyup();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input name="prodid[]" type="hidden" value="116">
<input name="qty[]" type="text" value="1" maxlength="2" class="detailinformation--input qty">
<input name="price[]" type="hidden" value="5">
<input name="total[]" type="hidden" value="">
<input name="prodid[]" type="hidden" value="117">
<input name="qty[]" type="text" value="1" maxlength="2" class="detailinformation--input qty">
<input name="price[]" type="hidden" value="4">
<input name="total[]" type="hidden" value="">
<input name="grand_total" type="text" value="">