We Keep Coding

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">

Javascript to calculate input figures from form input

I am trying to create a javascript that calculates the sum of 4 amounts, that is generated from the input fields.
The problem is, I want the Total Invoice Value to start reflecting the value after the user has inputted the Rate 1 and Amount 1 has shown. But it doesnt happen until all the 4 amounts have been generated. The Total Invoice Value reflect only after I input the amount in Rate 4.
The complete code I am working with right now is:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="register" id="myForm" enctype="multipart/form-data" action="register" method="POST">
Qty 1:<input type="number" step="any" name="Qty1" autocomplete="off" id="Qty1" required><br>
Rate 1:<input type="number" step="any" name="Rate1" autocomplete="off" id="Rate1" class="rate" required><br>
Amount 1:<input readonly type="number" step="any" name="Amt1" autocomplete="off" id="Amt1" required><br><br>
Qty 2:<input type="number" step="any" name="Qty2" autocomplete="off" id="Qty2" required><br>
Rate 2:<input type="number" step="any" name="Rate2" autocomplete="off" id="Rate2" class="rate" required><br>
Amount 2:<input readonly type="number" step="any" name="Amt2" autocomplete="off" id="Amt2" required><br><br>
Qty 3:<input type="number" step="any" name="Qty3" autocomplete="off" id="Qty3" required><br>
Rate 3:<input type="number" step="any" name="Rate3" autocomplete="off" id="Rate3" class="rate" required><br>
Amount 3:<input readonly type="number" step="any" name="Amt3" autocomplete="off" id="Amt3" required><br><br>
Qty 4:<input type="number" step="any" name="Qty4" autocomplete="off" id="Qty4" required><br>
Rate 4:<input type="number" step="any" name="Rate4" autocomplete="off" id="Rate4" required><br>
Amount 4:<input readonly type="number" step="any" name="Amt4" autocomplete="off" id="Amt4" required><br><br>
Total Invoice Value:<input readonly type="number" step="any" name="TotalInvoiceValue" id="TotalInvoiceValue" pattern=".{1,}" autocomplete="off" required><br>
</form>
<script>
$('#Rate1').keyup(function(){
var Qty1;
var Rate1;
textone = parseFloat($('#Qty1').val());
texttwo = parseFloat($('#Rate1').val());
var result = textone * texttwo;
$('#Amt1').val(result.toFixed(2));
});
$('#Rate2').keyup(function(){
var Qty2;
var Rate2;
textone = parseFloat($('#Qty2').val());
texttwo = parseFloat($('#Rate2').val());
var result = textone * texttwo;
$('#Amt2').val(result.toFixed(2));
});
$('#Rate3').keyup(function(){
var Qty3;
var Rate3;
textone = parseFloat($('#Qty3').val());
texttwo = parseFloat($('#Rate3').val());
var result = textone * texttwo;
$('#Amt3').val(result.toFixed(2));
});
$('#Rate4').keyup(function(){
var Qty4;
var Rate4;
textone = parseFloat($('#Qty4').val());
texttwo = parseFloat($('#Rate4').val());
var result = textone * texttwo;
$('#Amt4').val(result.toFixed(2));
});
$('#Rate4').keyup(function(){
var Amt1;
var Amt2;
var Amt3;
var Amt4;
textone = parseFloat($('#Amt1').val());
texttwo = parseFloat($('#Amt2').val());
textthree = parseFloat($('#Amt3').val());
textfour = parseFloat($('#Amt4').val());
var result = textone + texttwo + textthree + textfour;
$('#TotalInvoiceValue').val(result.toFixed(2));
});
</script>
I tried to get the javascript to start taking totals from rate 1 itself by adding multiple element name in the #TotalInvoiceValue function like this:
$('#Rate1, #Rate2, #Rate3, #Rate4').keyup(function(){
var Amt1;
var Amt2;
var Amt3;
var Amt4;
textone = parseFloat($('#Amt1').val());
texttwo = parseFloat($('#Amt2').val());
textthree = parseFloat($('#Amt3').val());
textfour = parseFloat($('#Amt4').val());
var result = textone + texttwo + textthree + textfour;
$('#TotalInvoiceValue').val(result.toFixed(2));
});
But it still doesn't work.
I also tried assiging same class to all the Rate inputs like this:
html
<input id="Rate1" class="rate" type="text">
<input id="Rate2" class="rate" type="text">
<input id="Rate3" class="rate" type="text">
<input id="Rate4" class="rate" type="text">
javascript
$('.rate').on('keyup', function() {
let result = 0;
$('.rate').each(function() { result += parseFloat(this.value); });
$('#TotalInvoiceValue').val(result.toFixed(2));
})
And even this is not working for me. Please help.

In the Demo the following was used:
HTMLFormControlsCollection API
<input type="number">
<output></output>
oninput On-event Property
Event Delegation
Note: This is pure JavaScript.
If each input and output element has an initial value:
<input id="N0" type="number" value="0">
...
<input id="N*" type="number" value="0">
<output id="T0">0</output>
Then expressions like this will always be displayed as a number which is important if your event handler listens on an event that has an immediate reaction (ex. input, keypress, etc):
T0.value = N0.valueAsNumber + N1.valueAsNumber + ...N(N).valueAsNumber
Even though the only input the user uses was N0 at the time, N1 thu N(N) is still included in expression because they started off with value="0".
Demo
var sum = document.forms.sum;
var f = sum.elements;
var n0 = f.N0;
var n1 = f.N1;
var n2 = f.N2;
var n3 = f.N3;
var t0 = f.T0;
sum.oninput = add;
function add(e) {
if (e.target.className === "N") {
t0.value = n0.valueAsNumber + n1.valueAsNumber + n2.valueAsNumber + n3.valueAsNumber;
} else {
return false;
}
return false;
}
input {
font: inherit;
display: block;
width: 6ch
}
<form id='sum'>
<input id='N0' type='number' class='N' value='0'>
<input id='N1' type='number' class='N' value='0'>
<input id='N2' type='number' class='N' value='0'>
<input id='N3' type='number' class='N' value='0'>
<output id='T0'>0</output>
</form>

JSFiddle Example
https://jsfiddle.net/o2gxgz9r/47359/
HTML
<div>
Value 1: <input class="val" id="val1">
<br/>
Value 2: <input class="val" id="val2">
<br/>
Value 3: <input class="val" id="val3">
<br/>
Value 4: <input class="val" id="val4">
<br/>
Result: <input class="result">
</div>
JS
$(document).ready(function() {
var handleChange = function() {
var result = 0;
var setResult = true;
$(".val").each(function(){
if($(this).val() > 0) {
result += parseInt($(this).val());
} else {
setResult = false;
}
})
$(".result").val(setResult ? result : '');
};
$(".val").change(handleChange);
});

Thanks for all of your answers. Using your suggestions, this is how my problem got fixed:
HTML:
<form name="register" id="myForm" enctype="multipart/form-data" action="register" method="POST">
Qty :<input type="number" step="any" name="Qty1" autocomplete="off" id="Qty1" required><br>
Rate:<input type="number" step="any" name="Rate1" autocomplete="off" id="Rate1" class="rate" required><br>
Amount :<input readonly type="number" step="any" name="Amt1" autocomplete="off" id="Amt1" class="amt" required><br><br>
Qty :<input type="number" step="any" name="Qty2" autocomplete="off" id="Qty2" required><br>
Rate:<input type="number" step="any" name="Rate2" autocomplete="off" id="Rate2" class="rate" required><br>
Amount :<input readonly type="number" step="any" name="Amt2" autocomplete="off" id="Amt2" class="amt" required><br><br>
Qty :<input type="number" step="any" name="Qty3" autocomplete="off" id="Qty3" required><br>
Rate:<input type="number" step="any" name="Rate3" autocomplete="off" id="Rate3" class="rate" required><br>
Amount :<input readonly type="number" step="any" name="Amt3" autocomplete="off" id="Amt3" class="amt" required><br><br>
Qty :<input type="number" step="any" name="Qty4" autocomplete="off" id="Qty4" required><br>
Rate:<input type="number" step="any" name="Rate4" autocomplete="off" id="Rate4" class="rate" required><br>
Amount :<input readonly type="number" step="any" name="Amt4" autocomplete="off" id="Amt4" class="amt" required><br><br>
JAVASCRIPT:
$('#Rate1').keyup(function(){
var Qty1;
var Rate1;
textone = parseFloat($('#Qty1').val());
texttwo = parseFloat($('#Rate1').val());
var result = textone * texttwo;
$('#Amt1').val(result.toFixed(2));
});
$('#Rate2').keyup(function(){
var Qty2;
var Rate2;
textone = parseFloat($('#Qty2').val());
texttwo = parseFloat($('#Rate2').val());
var result = textone * texttwo;
$('#Amt2').val(result.toFixed(2));
});
$('#Rate3').keyup(function(){
var Qty3;
var Rate3;
textone = parseFloat($('#Qty3').val());
texttwo = parseFloat($('#Rate3').val());
var result = textone * texttwo;
$('#Amt3').val(result.toFixed(2));
});
$('#Rate4').keyup(function(){
var Qty4;
var Rate4;
textone = parseFloat($('#Qty4').val());
texttwo = parseFloat($('#Rate4').val());
var result = textone * texttwo;
$('#Amt4').val(result.toFixed(2));
});
$('.rate').on('keyup', function() {
var result = 0;
var setResult = true;
$('.amt').each(function() {
if($(this).val() > 0) {
result += parseFloat(this.value);
}
});
$('#TotalInvoiceValue').val(result.toFixed(2));
});

javascript set new data value

I have 2 input boxes.
When I input a value into the first one, the javascript function checkMyKad() is triggered.
checkMyKad() gets value in first input box, edits it, and alerts new value.
I want new to be set into second input box. How do I get new value to be shown in 2nd input box?
<div class="form-group" style="color:#0000FF; margin-left:160px;" >
<input type="text" placeholder="Please input value" id="myKadC" maxlength="4" size="10" onchange="checkMyKad()" required>
<input type="text" id="newVal" maxlength="20" size="20"/>
</div>
javascript function
function checkMyKad() {
var mykadC = $('#myKadC').val();
var newVal='Value is : '+'-'+mykadC;
alert(newVal);
$('#newValId').val(newVal);
}

You seem to target the wrong id, it should be $('#newVal')
function checkMyKad() {
var mykadC = $('#myKadC').val();
var newVal='Value is : '+'-'+mykadC;
alert(newVal);
$('#newVal').val(newVal);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group" style="color:#0000FF; margin-left:160px;" >
<input type="text" placeholder="Please input value" id="myKadC" maxlength="4" size="10" onchange="checkMyKad()" required>
<input type="text" id="newVal" maxlength="20" size="20"/>
</div>

You have $('#newValId') instead of $('#newVal')

target id is wrong.
$('#newValId').val(newVal); -> $('#newVal').val(newVal);

Personally I would do something like this:
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div class="form-group" >
<h3>Pure JavaScript</h3>
<input type="text" placeholder="Please input value" maxlength="4" size="10" onchange="checkMyKad(this)" required>
<input type="text" maxlength="20" size="20"/>
</div>
<div class="form-group" >
<h3>Using jQuery</h3>
<input type="text" placeholder="Please input value" maxlength="4" size="10" onchange="checkMyKadJQuery(this)" required>
<input type="text" maxlength="20" size="20"/>
</div>
<script type="text/javascript">
function checkMyKad(element) {
   let oldValue = element.value;
   let newValue = 'Value is : -'+oldValue;
   alert(newValue);
   element.nextElementSibling.value = newValue;
}
function checkMyKadJQuery(element) {
let oldValue = $(element).val();
   let newValue = 'Value is : -'+oldValue;
alert(newValue);
$(element).next().val(newValue);
}
</script>
Doing it like that would allow the functions to be reused.

jQuery Validation 4 fields but only required to fill in one

How do I validate in case when where I have 4 fields and only 1 is required. I want the pop up alert message to come up only when all 4 of the fields are left blank when user tries to save form.
My html looks like this.
<input id="txtWorkPhone" name="txtWorkPhone" data-role="maskedtextbox" required="required" data-mask="(999)-000-0000" class="k-textbox phoneInput"/>
<input id="txtHomePhone" name="txtHomePhone" data-role="maskedtextbox" data-mask="(999)-000-0000" class="k-textbox phoneInput" required="required" />
<input id="txtEmail" name="txtEmail" maxlength="260" required="required" class="k-textbox standardInput" style="width: 54%;" />
<input id="txtCellPhone" name="txtCellPhone" data-role="maskedtextbox" required="required" data-mask="(999)-000-0000" class="k-textbox phoneInput" />
As you can see I marked all the fields are required.. So how should i go about the validation of these fields ?

You can do custom validation as I did. Please check.
$('#submit').click(function () {
var allFilled = true;
$(':input:not(:button)').each(function(index, element) {
if (element.value === '') {
allFilled = false;
}
});
alert(allFilled);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="myForm" id="myForm">
<input id="txtWorkPhone" name="txtWorkPhone" data-role="maskedtextbox" data-mask="(999)-000-0000" class="k-textbox phoneInput"/>
<input id="txtHomePhone" name="txtHomePhone" data-role="maskedtextbox" data-mask="(999)-000-0000" class="k-textbox phoneInput" />
<input id="txtEmail" name="txtEmail" maxlength="260" class="k-textbox standardInput" style="width: 54%;" />
<input id="txtCellPhone" name="txtCellPhone" data-role="maskedtextbox" data-mask="(999)-000-0000" class="k-textbox phoneInput" />
<input type="button" id="submit" name="submit" value="Submit">
</form>

On a button click you can simply do this:-
$('button').on('click', function () {
var isEmpty = $('input[required]').filter(function () {
return $.trim(this.value).length > 0
}).length == 0;
if (isEmpty) {
alert('Empty');
} else {
alert('Valid');
}
});
Now here:-
$('input[required]').filter(function () {
return $.trim(this.value).length > 0
})
Checks for all the inputs having some data entered in it. Next if that .length == 0; that means all of the inputs are empty. If that value is greater than 0 that means atleast one of the inputs out of 4 have some value.
Hope it helps!

<form onsubmit="myFunction()">
<input id="txtWorkPhone" name="txtWorkPhone" data-role="maskedtextbox" required="required" data-mask="(999)-000-0000" class="k-textbox phoneInput"/>
<input id="txtHomePhone" name="txtHomePhone" data-role="maskedtextbox" data-mask="(999)-000-0000" class="k-textbox phoneInput" required="required" />
<input id="txtEmail" name="txtEmail" maxlength="260" required="required" class="k-textbox standardInput" style="width: 54%;" />
<input id="txtCellPhone" name="txtCellPhone" data-role="maskedtextbox" required="required" data-mask="(999)-000-0000" class="k-textbox phoneInput" />
</form>
<script>
function myfunction()
{
if($(#txtWorkPhone).value() === '' && if($(#textHomePhone).value() === '' && if($(#txtEmail).value() === '' && if($(#txtCellPhone).value() === '')
{
// do whatever.
}
}
</script>

how to concatenate two or more text box values in one text box

I want to concatenate two or more text box values in one text box.Here I am getting values using id but that id will be dynamically added it means text box will dynamically added.For dynamically adding text box I am using for loop but am getting the value only the last text box value only becaues for loop executed.I want all text box values.Please help me to get me out.Thank you in advance.
Here is the code for dynamic text box process:
In this am using printwriter object in servlet
int nums=5;
out.println("<input type='text' id='static'>");
int i;
for (i=0;i<nums; i++) {
out.println("<input type='text' Style='width:30px' maxlength='1' id='id"+i+"'onkeyup='sum();'> ");
out.println("<script>function sum(){ alert('id"+i+"'); var txtFirstNumberValue=document.getElementById('id'+i+'').value;var result = document.getElementById('static').value + txtFirstNumberValue;alert(result);if (isNaN(result)){ document.getElementById('static').value = result; }}</script>");
}
but if I use static text box I am getting what I need but I need that in dynamic process.
here is the code for static text box process:
<input type="text" maxlength="1" id="1" onkeyup="sum();"/>
<input type="text" maxlength="1" id="2" onkeyup="sum();"/>
<input type="text" maxlength="1" id="3" onkeyup="sum();"/>
<input type="text" id="4"/>
function sum() {
var txtFirstNumberValue = document.getElementById('1').value;
var txtSecondNumberValue = document.getElementById('2').value;
var txtThirdNumberValue = document.getElementById('3').value;
var result = txtFirstNumberValue + txtSecondNumberValue + txtThirdNumberValue;
if (isNaN(result)) {
document.getElementById('4').value = result;
}
}
Please help me to find out the solution.Thank you in advance.

I would not use inline JavaScript and I would give my elements proper IDs if I really need them otherwise I would use classes.
$(document).ready(function() {
$('.in').on('input',function() {
var allvals = $('.in').map(function() {
return this.value;
}).get().join('');
$('.out').val( allvals );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="in" type="text" maxlength="1" id="i1"/>
<input class="in" type="text" maxlength="1" id="i2"/>
<input class="in" type="text" maxlength="1" id="i3"/>
<input class="out" type="text" id="i4"/>

<script type="text/javascript">
$(document).ready(function(){
var cls = document.getElementsByClassName('test');
var i =0;
var len = cls.length;
var tot = 0;
for(i=0;i<l;i++){
var cur = cls[i].value;
tot = parseInt(cur)+tot;
}
//document.getElementById("id"+cls.length).value = tot; //set the value for last element as the tot var
});
</script>
<body>
<input type="text" maxlength="1" value="1" id="1" class="test"/>
<input type="text" maxlength="1" value="2" id="2" class="test"/>
<input type="text" maxlength="1" value="3" id="3" class="test"/>
</body>

$(document).ready(function() {
$('.in').on('input',function() {
var allvals = $('.in').map(function() { return this.value; }).get().join('');
$('.out').val( allvals );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="in" type="text" maxlength="1" id="i1"/>
<input class="in" type="text" maxlength="1" id="i2"/>
<input class="in" type="text" maxlength="1" id="i3"/>
<input class="out" type="text" id="i4"/>

$(document).ready(function() {
$('.in').on('input',function() {
var allvals = $('.in').map(function() {
return this.value;
}).get().join('');
$('.out').val( allvals );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="in" type="text" id="i1"/>
<input class="in" type="text" id="i2"/>
<input class="in" type="text" id="i3"/>
<input class="out" type="text" id="i4"/>