We Keep Coding

How to Add Currency Format to Result

I want to convert the result into currency format, I have tried many ways but it is not resolved. I'm using jQuery Mask.
This is the result:
HTML Code:
<script src="assets/js/jquery.mask.js"></script>
<div class="container mt-3">
<form method="POST" action="">
<div class="form-group">
<label>Number 1</label>
<input type="text" class="form-control uang" placeholder="0" id="number1" onkeypress="return OnlyNumber(event)" onkeyup="Calculate();">
</div>
<div class="form-group">
<label>Number 2</label>
<input type="text" class="form-control uang" placeholder="0" id="number2" onkeypress="return OnlyNumber(event)" onkeyup="Calculate();">
</div>
<div class="form-group">
<label><strong>(Number 1) + (Number 2)</strong></label>
<p><strong>Result <span id="result">0</span></strong></p>
</div>
</form>
</div>
JavaScript Code:
function Calculate() {
var Number1 = document.getElementById('number1').value.replace(/\./gi,"");
var Number2 = document.getElementById('number2').value.replace(/\./gi,"");
var HitResult = Number(Number1) + Number(Number2);
if (!isNaN(HitResult)) {
document.getElementById('result').innerHTML = HitResult;
}
}
function OnlyNumber(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
return true;
}
}
Another JS in main.js
$(document).ready(function(){
$( '.uang' ).mask('#.##0', {reverse: true});
})

Thanks #TobiasSchnier for the reference given, I'm using this answer to solve the case.
By adding this code .toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".") in the specified variable.
For more details like this:
function Calculate() {
var Number1 = document.getElementById('number1').value.replace(/\./gi,"");
var Number2 = document.getElementById('number2').value.replace(/\./gi,"");
var HitResult = Number(Number1) + Number(Number2);
if (!isNaN(HitResult)) {
document.getElementById('result').innerHTML = HitResult.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}
}
Use this: https://stackoverflow.com/a/2901298/14553270

auto formatting 10 digits phone number as entered in the input field

In the logic is for auto formatting 10 digits phone number into the following format (xxx) 234-3456
<div class="field-group" style="align-items: center;">
<div>
<se-singleselect selected="{{phoneItem.phoneTypeId}}" fieldvalue="phoneTypeId" fieldname="name" desc="Phone Type" datasrc="{{_phoneTypes}}" id="phoneTypeSelect"></se-singleselect>
</div>
<div>
<input type="text" id="phoneNumber" class="phone" name="phoneNumber" maxlength="14" placeholder="(xxx) xxx-xxxx" on-input="_allowNumbersCharsOnly" on-change="_formatPhoneNumber" value="{{phoneItem.phoneNumber::input}}">
</div>
</div>
JavaScript logic to format
_formatPhoneNumber(digit) {
let number = digit.target.value.replace(/[^\d]/g, '')
if (number.length == 10) {
number = number.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3");
}
console.log(number) // (123) 456-6789
}
console.log shows the correct format in Console.

Have you tried by replacing the line
console.log(number)
With
Document.getElementById("phoneNumber").value = number
?

Since I have very less contribution in forum thus replying with an answer.
let phoneNumber = document.getElementById('phoneNumber');
phoneNumber.addEventListener('change',_formatPhoneNumber);
phoneNumber.addEventListener('keyup',_formatPhoneNumber);
function _formatPhoneNumber(evt) {
let number = evt.target.value.replace(/[^\d]/g, '')
if (number.length == 10) {
number = number.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3");
}
//console.log(number) // (123) 456-6789
evt.target.value = number;
}
<div class="field-group" style="align-items: center;">
<div>
<se-singleselect selected="{{phoneItem.phoneTypeId}}" fieldvalue="phoneTypeId" fieldname="name" desc="Phone Type" datasrc="{{_phoneTypes}}" id="phoneTypeSelect"></se-singleselect>
</div>
<div>
<input type="text" id="phoneNumber" class="phone" name="phoneNumber" maxlength="14" placeholder="(xxx) xxx-xxxx" on-input="_allowNumbersCharsOnly" on-change="_formatPhoneNumber" >
</div>
</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">

document.getElementById.value not working

I have a html page that has input fields for the user to enter the quantity of fruits. On key press/ key up, it is suppose to call the javascript file method and checks if it is a digit. If it is not a digit, the textbox field will be cleared. However, my textbox is not cleared when i tried to enter a non numerical value. Is there something missing in my code?
Html
<div class="form-group ">
<label class="control-label " for="name"> Name </label>
<input class="form-control" id="name" name="name" type="text" /> <span class="help-block" id="hint_name"> Enter your name </span>
</div>
<div class="form-group ">
<label class="control-label" for="apple"> Apple ( 69cents ) </label>
<input class="form-control form-control-input" id="apple" name="apple" type="text" autocomplete="off" onkeyup="isNumber(this,event)" /> <span class="help-block" id="hint_number"> Enter Qty </span>
</div>
<div class="form-group ">
<label class="control-label" for="orange"> Orange ( 59cents ) </label>
<input class="form-control form-control-input" id="orange" name="orange" type="text" autocomplete="off" onkeyup="isNumber(this,event)" /> <span class="help-block" id="hint_number1"> Enter Qty </span>
</div>
<div class="form-group ">
<label class="control-label" for="banana"> Banana ( 39cents ) </label>
<input class="form-control form-control-input" id="banana" name="banana" type="text" autocomplete="off" onkeyup="isNumber(this,event)" /> <span class="help-block" id="hint_number2"> Enter Qty </span>
</div>
Javascript
function isNumber(idValue, evt) {
evt = (evt) ? evt : window.event;
var sum = 0;
var costOfApple = 0;
var costOfOrange = 0;
var costOfBanana = 0;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
document.getElementById('idValue.id').value = "";
document.getElementById('totalCost').value = "NaN";
$("#invalid-alert").fadeTo(2000, 500).slideUp(500, function() {
$("#invalid-alert").slideUp(500);
});
} else {
costOfApple = document.getElementById('apple').value * 69;
costOfOrange = document.getElementById('orange').value * 59;
costOfBanana = document.getElementById('banana').value * 39;
sum = (Number(costOfApple) + Number(costOfOrange) + Number(costOfBanana)) / 100;
document.getElementById('totalCost').value = "$" + (sum).toFixed(2);
}
}

Problem statement is
document.getElementById('idValue.id').value = "";
You are passing string 'idValue.id' to the function and the element with ID doesn't exists, thus the code is not working and you must be getting error in the browser console.
As idValue refers to element which invoke the event handler. You can just use it directly to set its property.
idValue.value = ""

I thinks
document.getElementById('idValue.id').value = "";
should be
document.getElementById(idValue.id).value = "";
or
idValue.value = "";
and , It's good to console.dir( idValue ) in isNumber function!
test please!

you are passing this to a function , and this is here the input you should use it as an object not as a string.
don’t do that :
document.getElementById('idValue.id').value = "";
try this instead
document.getElementById(idValue.id).value = "";

$(document).on('change', 'input', function() {
if($('#Id').val() == "" ) {
// Do something
}
});
OR
document.getElementById(yourID).value = "";

Confused on ordering of function calls and debugging

I am trying to debug a function call in my JSP program and really confused on the ordering of how things worked. I am using NetBeans. When I run the project in debug mode, it goes into my '$("#searchEFT").mouseup(function ()' function and trace through all of it. 'searchEFT' is a button that I am using to access my servlet. When I process the page and then click the 'searchEFT' button, it hits the function call based on getting the right alert but doesn't trace in the debug. Why is it doing that? Is the first call of the function on load setting up the check when the user does the mouseclick?
This function is outside of the '$(document).ready(function ()' at the top and the function call is after the button declaration in the JSP.
EDIT: here is the JSP code:
<head>
<script>
$(document).ready(function ()
{
$(function ()
{
$("#CMDCreationDate").datepicker({
dateFormat: "yy-mm-dd"
});
});
}) ;
window.onbeforeunload = confirmExit;
function confirmExit()
{
alert("Alert-- leaving this page.");
}
function numbersonly(myfield, e, dec) {
//function to check that only numeric values are entered
var key;
var keychar;
if (window.event)
key = window.event.keyCode;
else if (e)
key = e.which;
else
return true;
keychar = String.fromCharCode(key);
// control keys
if ((key == null) || (key == 0) || (key == 8) || (key == 9) || (key == 13) || (key == 27))
return true;
// numbers
else if ((("0123456789").indexOf(keychar) > -1))
return true;
// decimal point jump
else if (dec && (keychar == ".")) {
myfield.form.elements[dec].focus();
return false;
} else
return false;
}
</script>
</head>
<body>
<header>
<?audit suppress oracle.ide.xml.validation-error?>
<div class="floatL appTTL">SAMS - EFT Schedule Number Search/Update Screen</div>
<div id="navWrap">
<nav class="floatR">
<ul>
<li>
Home
</li>
<li>
Search
</li>
<li>
Help
</li>
<li>
Help
</li>
</ul>
</nav>
</div>
<div class="clear"></div>
</header>
<main class="mainWrapper">
<form id="formID" method="POST" action="EFTscreen?action=searchEFT" >
<div class="commandcontainer">
<div id="divBox">
<h1 class="formTTL">Please Enter Schedule Number/Contract Year or either Schedule
Status/Creation Date value</h1>
<label class="labelTTL">Schedule Number</label>
<label class="labelTTL3">Contract Year</label>
<label class="labelTTL3">Status</label>
<label class="labelTTL">Creation Date</label>
<br/>
<input id="CMDScheduleNumber" name="CMDScheduleNumber" type="number" class="textsmall" maxlength="5"
value="${ScheduleNum}" onKeyPress="return numbersonly(this, event)"/>
<input id="CMDContractYear" name="CMDContractYear" type="number" class="textsmall" maxlength="4"
value="${ContractYear}" onKeyPress="return numbersonly(this, event)"/>
<select size="1" id="CMDSchedStatus" name="CMDSchedStatus" class="combosmall">
<c:forEach items="${statusList}" var="current">
<option value="${current}"
<c:if test="${current == Status}"> selected="selected"</c:if>
>${current}</option>
</c:forEach>
</select>
<input id="CMDCreationDate" name="CMDCreationDate" type="text" class="textsmall"
value="${CreationDate}" maxlength="10"/>
<br/>
<button id="searchEFT" class="btn smBtn">Search</button>
</div>
<div id="divButton">
<button id="searchMEFTS" type="submit" formaction="EFTscreen?action=searchMEFTS&screen=mainEFT"
class="btn midBtn">Update Schedule Status</button>
<button id="clearMenu" type="submit" formaction="EFTscreen?action=clearMenu"
class="btn midBtn Space">Return to Menu</button>
</div>
<div id="clear"></div>
</div>
<article class="divBoxdet">
<fmt:formatNumber var="trdettotal" value="${detResults.getTOTAL_AMOUNT()}" pattern="$##,###,##0.00"/>
<label class="labelTTLdet floatL">
Schedule Number
<input id="txtScheduleNumber" type="number" class="textdet"
value="${detResults.getSCHEDULE_NUMBER()}" readonly/>
</label>
<label class="labelTTLdet floatL">
Contract Year
<input id="txtContractYear" type="number" class="textdet"
value="${detResults.getEFT_CONTRACT_YEAR()}" readonly/>
</label>
<label class="labelTTLdet floatL">
Date Created
<input id="txtCreationDate" type="text" class="textdet"
value="${detResults.getCREATION_DATE()}" readonly/>
</label>
<div class="clear"></div>
<br/>
<br/>
<label class="labelTTLdet floatL">
Num of Records
<input id="txtNumRecords" type="number" class="textdet"
value="${detResults.getNUM_OF_PAY_RECORDS()}" readonly/>
</label>
<label class="labelTTLdet floatL">
Status
<br/>
<input id="txtStatus" type="text" class="textdet"
value="${detResults.getSTATUS()}" maxlength="2"/>
</label>
<label class="labelTTLdet floatL">
Status Date
<input id="txtStatusDate" type="text" class="textdet"
value="${detResults.getSTATUS_DATE()}" maxlength="10"/>
</label>
<div class="clear"></div>
<br/>
<br/>
<label class="labelTTLdet floatL">
Schedule Total
<input id="txtScheduleTotal"
type="text" class="textdet" value="${trdettotal}" readonly/>
</label>
<label class="labelTTLdet floatL">
Schedule Post Date
<input id="txtPostDate" type="text" class="textdet"
value="${detResults.getSCHEDULE_POST_DATE()}" maxlength="10"/>
</label>
<label class="labelTTLdet floatL">
Reel Number
<input id="txtReelNumber" type="text" class="textdet"
value="${detResults.getREEL_NUMBER()}" maxlength="8"/>
</label>
<div class="clear"></div>
<br/>
<br/>
<button id="pullMEFTD"
class="btn largeBtn Space floatL">Update Schedule Payment Status</button>
<script>
$("#searchEFT").mouseup(function ()
{
var Cmd_Sched_Number = $('#CMDScheduleNumber').val();
var schedLen = Cmd_Sched_Number.length;
//var Cmd_Contract_Year = document.getElementById("CMDContractYear").value;
var Cmd_Contract_Year = $('#CMDContractYear').val();
var yearLen = Cmd_Contract_Year.length;
//var Cmd_Status = document.getElementById("CMDSchedStatus").value;
var Cmd_Status = $('#CMDSchedStatus').val();
var statStr = Cmd_Status.replace(/\s/g, "");
var statLen = statStr.length;
//var Cmd_Creation_Date = document.getElementById("CMDCreationDate").value;
var Cmd_Creation_Date = $('#CMDCreationDate').val();
var createLen = Cmd_Creation_Date.length;
if ((schedLen > 0 && yearLen === 0) || (schedLen === 0 && yearLen > 0))
{
alert("Schedule Number and EFT Contract Year must be both populated");
}
;
if ((statLen === 0) && (createLen === 0) && (schedLen === 0) && (yearLen === 0))
{
var r = confirm("Are you sure you want to pull all EFT schedule numbers?");
if (r === false)
{
alert("Please enter information in any of the command line fields");
return false;
}
else
{
$('#formID').submit();
}
} ;
});
$("#pullMEFTS").mouseup(function ()
{
var Det_Sched_Number = $('#txtScheduleNumber').val();
var detschedLen = Det_Sched_Number.length;
//var Cmd_Contract_Year = document.getElementById("CMDContractYear").value;
var Det_Contract_Year = $('#txtContractYear').val();
var detyearLen = Det.length;
var Det_Status = $('#txtStatus').val();
if (detschedLen > 0)
{
alert("Schedule Number not found. Please investigate");
}
;
if ( holdStatus.matches("RP") ||
holdStatus.matches("VP") ||
holdStatus.matches("CP") )
{
alert("User can only update schedule number in NP status");
}
});
</script>
</article>
</form>
</main>
</body>
Thanks

The line:
$("#searchEFT").mouseup(function ()
is the function call that sets the mouseup handler; it is not the mouseup handler itself.
If you want to break inside the mouseup handler then you need to set a breakpoint somewhere inside the handler function itself, e.g.,
// First executable line of the mouseup handler
var Cmd_Sched_Number = $('#CMDScheduleNumber').val();
Unrelated, but I would break up the handler function into much smaller pieces, roughly:
function getFormData() {
return {
number: $('#CMDScheduleNumber').val().trim(),
year: $('#CMDContractYear').val().trim(),
status: $('#CMDSchedStatus').val().replace(/\s/g, '').trim(),
date: $('#CMDCreationDate').val().trim()
};
}
function invalidNumberAndYear(formData) {
return ((formData.number !== '') && (formData.year === '')) ||
((formData.year !== '') && (formData.number === ''));
}
function isPullAll(formData) {
return formData.number === '' &&
formData.year === '' &&
formData.status === '' &&
formData.date === '';
}
function searchEftMouseup(e) {
e.preventDefault();
var formData = getFormData();
if (invalidNumberAndYear(formData)) {
alert('Schedule Number and EFT Contract Year must be both populated');
return;
}
if (isPullAll(formData)) {
if (confirm('Are you sure you want to pull all EFT schedule numbers?')) {
$('#formID').submit();
} else {
alert('Please enter information in any of the command line fields');
}
}
}
$('#searchEFT').on('mouseup', searchEftMouseup);
This allows small stuff to be thought about easily, and begins to reveal your validation needs, and suggests a shape for your remaining code.
(Most of which, btw, was not relevant to the question–it's good to post only the minimum amount necessary to help people understand the issue :)