...

View Full Version : Numeric Textbox with format



tqmd1
12-21-2011, 06:45 AM
Dear Experts

I have following codes


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Numeric Textbox Sample</title>

<style type="text/css">
#box1 {width:200px;height:170px;border:1px solid green;background:#e3eeff;padding-top:20px;}

.button {width:100px;margin-top:0px;}

body {
margin:0;
margin-top:100px;
}
</style>

<script language="javascript">

function NumericDotOnly()
{
var key = window.event.keyCode;

if (((key >47) && (key <58)) || (key==46))
window.event.returnValue = true;
else
window.event.returnValue = false;
}

function formatCurrency(num) {
num = num.toString().replace(/\$|\,/g,'');
if(isNaN(num))
num = "0";
sign = (num == (num = Math.abs(num)));
num = Math.floor(num*100+0.50000000001);
cents = num%100;
num = Math.floor(num/100).toString();
if(cents<10)
cents = "0" + cents;
for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
num = num.substring(0,num.length-(4*i+3))+','+
num.substring(num.length-(4*i+3));
return (((sign)?'':'-') + num + '.' + cents);
}


</script>

</head>

<body onload="form2.text1.focus()" >
<center>
<p>I need following format<br>
99,999,999.99<br>
</p>
<div id="box1">
<form name=form2>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td>Amount</td>

<td><input type=text name=text1 size=15 value="" onkeypress="NumericDotOnly

()";onblur="formatCurrency(this.value)"> </td></tr>

<tr><td>Tax</td> <td><input type=text name=text2 size=15 value=""

onkeypress="NumericDotOnly()";onblur="formatCurrency(this.value)"></td></tr>
<tr><td>Result</td><td><input type=text name=text3 size=15 value="" disabled></td></tr>

</table>
<hr>
<input class="button" type=button name=command1 value="Plus"

onclick="form2.text3.value=parseFloat(form2.text1.value)+parseFloat(form2.text2.value)"><br>

<input class="button" type=button name=command8 value="Focus"

onclick="form2.text1.select()";"form2.text1.focus()"><br>
<input class="button" type=reset name=command9 value="Reset">

</form>
</div>

</center>
</body>
</html>


Please help me to apply following format

99,999,999.99

Thanks in advance

Philip M
12-21-2011, 08:54 AM
Here you are:-


<script type = "text/javascript">

function addCommas(nStr) {
nStr = nStr.replace(/[^0-9\.]/g,"");
var rgx = /(\d+)(\d{3})/;
while (rgx.test(nStr)) {
nStr = nStr.replace(rgx, '$1,$2');
}
nStr = "$" + nStr; // if $ prefix required
if (nStr.indexOf('.') == -1) { // if whole number add .00
nStr = nStr + ".00";
}
nStr = nStr.replace(/(\.\d)$/,"$10"); // if only one DP add another 0
return nStr;
}

alert (addCommas("999999999.99"));
</script>


Before a man speaks it is safe to assume that he is a fool. After he speaks it is seldom necessary to assume. - H.L. Mencken 1880-1956, American Editor, Author, Critic, Humorist

chump2877
12-21-2011, 06:33 PM
I think this is more or less what you are after (only tested in Firefox):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Numeric Textbox Sample</title>
<style type="text/css">
#box1 {width:200px;height:170px;border:1px solid green;background:#e3eeff;padding-top:20px;}
.button {width:100px;margin-top:0px;}
body {margin:0;margin-top:100px;}
</style>
<script type="text/javascript">
var amount = '';
var tax = '';

function NumericDotOnly(inputObj, e)
{
var isAmount = inputObj.id == "amountVal";
var e = (!e) ? window.event : e;
var key = e.keyCode;
if ((key < 48 || key > 57) && key != 8 && key != 110 && key != 190 || ((key == 110 || key == 190) && ((isAmount) ? amount : tax).indexOf('.') != -1))
{
inputObj.value = (isAmount) ? amount : tax;
}

if (isAmount)
{
amount = inputObj.value;
}
else
{
tax = inputObj.value;
}
}

function formatCurrency(inputObj)
{
if (inputObj.id == "amountVal")
{
amount = convertToFloat(inputObj.value);
}
else
{
tax = convertToFloat(inputObj.value);
}
inputObj.value = (inputObj.value != '') ? addCommas(convertToFloat(inputObj.value)) : '';
}

function convertToFloat(num)
{
return (num != '') ? parseFloat(num.replace(/,/g, "")).toFixed(2) : num;
}

function addCommas(num)
{
var numParts = num.split('.');
var numArr = numParts[0].split('').reverse();
var newArr = [];
var count = -1;
for (var i=0; i<numArr.length; i++)
{
if (i % 3 == 0)
{
newArr[++count] = ',';
}
newArr[++count] = numArr[i];
}
return newArr.reverse().join('').replace(/((.+?)(,?))$/, '$2') + '.' + numParts[1];
}

function findSum()
{
document.form2.text3.value = (document.form2.text1.value != '' && document.form2.text2.value != '') ? addCommas((parseFloat(document.form2.text1.value.replace(/,/g, "")) + parseFloat(document.form2.text2.value.replace(/,/g, ""))).toFixed(2)) : '';
}

function giveFocus()
{
document.form2.text1.select();
document.form2.text1.focus();
}

window.onload = giveFocus;
</script>
</head>
<body>
<center>
<p>I need following format<br>
99,999,999.99<br>
</p>
<div id="box1">
<form name=form2>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>Amount</td>
<td><input id="amountVal" type="text" name="text1" size="15" value="" onkeyup="NumericDotOnly(this, event)" onblur="formatCurrency(this)" onfocus="this.value = amount" /></td>
</tr>
<tr>
<td>Tax</td>
<td><input type="text" id="taxVal" name="text2" size="15" value="" onkeyup="NumericDotOnly(this, event)" onblur="formatCurrency(this)" onfocus="this.value = tax" /></td>
</tr>
<tr>
<td>Result</td>
<td><input type="text" name="text3" size="15" value="" disabled="disabled" /></td>
</tr>
</table>
<hr>
<input class="button" type="button" name="command1" value="Plus" onclick="findSum()" /><br>
<input class="button" type="button" name="command8" value="Focus" onclick="giveFocus()" /><br>
<input class="button" type="reset" name="command9" value="Reset" />
</form>
</div>
</center>
</body>
</html>

tqmd1
12-24-2011, 06:09 AM
Dear Sir chump2877,

Thanks for helping, when I run your codes then nothing is entered in any of textboxes. Cursor moves at start position.

Here are your codes


<td><input id="amountVal" type="text" name="text1" size="15" value="" onkeyup="NumericDotOnly(this, event)" onblur="formatCurrency(this)" onfocus="this.value = amount" /></td>


I modify it as


<td><input id="amountVal" type="text" name="text1" size="15" value="" onblur="formatCurrency(this)" onfocus="this.value = amount" /></td>



Removed this codes from your codes


onkeyup="NumericDotOnly(this, event)"



Now data is entered into textboxes including character data

Please modify your codes to accept only numeric type of data

Thanks

chump2877
12-24-2011, 08:08 AM
when I run your codes then nothing is entered in any of textboxes. Cursor moves at start position.

I dont understand what you are saying here.


Removed this codes from your codes

Why would you remove this code?


Now data is entered into textboxes including character data

Please modify your codes to accept only numeric type of data

When you removed a portion of my code, you removed the capability to essentially validate characters (as numeric) as they are typed into the text boxes. Put the code back in and it will work correctly.

tqmd1
12-24-2011, 08:38 AM
Sir,

Simply copy your code into aaa.html and run.
You will see textboxes are not accepting any type of data.

When I try to enter any data then control moves to at beginning position.

Wish you good luck

chump2877
12-24-2011, 08:43 AM
What browser are you using? I have just tested my code in the latest versions of Firefox, IE, Opera, and Chrome, and it works fine in all of them.

tqmd1
12-24-2011, 08:48 AM
Sir I am using Internet Explorer 8.
I have tested again but the problem is still exists.

chump2877
12-24-2011, 08:53 AM
Just tested in IE8 and it works there as well...Are you sure you have your browser configured to allow JS to run from local files (Intranet settings)? You will have to do that until you can upload the script to an actual web server.

Edit:
And you HAVE TO use the original code that I posted in this thread. Do NOT use the version of the code that you have recently modified.

Philip M
12-24-2011, 10:01 AM
To answer the question you sent by PM :(, you cannot add numbers which have been converted to strings by adding commas. You need to retain these in numeric form.

Here you are:-


<html>
<head>
<script type = "text/javascript">

function addCommas(nStr) {
nStr = nStr.replace(/[^0-9\.]/g,"");
nStr = Number(nStr).toFixed(2); // remove excess decimals
var rgx = /(\d+)(\d{3})/;
while (rgx.test(nStr)) {
nStr = nStr.replace(rgx, '$1,$2');
}
if (nStr.indexOf('.') == -1) { // if whole number add .00
nStr = nStr + ".00";
}
nStr = nStr.replace(/(\.\d)$/,"$10"); // if only one DP add another 0
return nStr;
}

var x1;
var x2;

function show() {
var totalStr = (x1 + x2).toString();
totalStr = addCommas(totalStr);
document.form1.text3.value = totalStr;
}

</script>

<head>
<body>
<center>
<form name ="form1">
<input type=text name=text1 size=15 value="" onblur="x1 = Number(this.value) || 0; this.value=addCommas(this.value)"><br>
<input type=text name=text2 size=15 value="" onblur="x2 = Number(this.value) || 0; this.value=addCommas(this.value)"><br>
<input type=text name=text3 size=15 value="" disabled><br>
<input type=button value="Show" onclick="setTimeout(show,10)">
</form>
</center>
</body>
</html>

tqmd1
12-24-2011, 10:15 AM
Sir Philip M,

According to your codes.

When I press SHOW button it displays correct answer.

But....

When I change values into both textboxes and again press SHOW button

Then...

It displays .00 instead of correct answer.

Please review while changing values of textboxes.

Philip M
12-24-2011, 11:04 AM
Sir Philip M,

According to your codes.

When I press SHOW button it displays correct answer.

But....

When I change values into both textboxes and again press SHOW button

Then...

It displays .00 instead of correct answer.

Please review while changing values of textboxes.

You are trying to edit "numbers" which have already been formatted into strings with commas. If the user wishes to change the value entered he must re-enter the new value completely.


<input type=text name=text1 size=15 value="" onfocus = 'this.value = "" ' ; onblur="x1 = Number(this.value); this.value=addCommas(this.value)"><br>
<input type=text name=text2 size=15 value="" onfocus = 'this.value = "" '; onblur="x2 = Number(this.value); this.value=addCommas(this.value)"><br>

Philip M
12-24-2011, 01:42 PM
Here is an improved version which truncates excess decimal places (so 2.999 is truncated to 2.99 and not rounded to 3.00) rather than rounds them, which may give rise to apparant errors:-



<html>
<head>
<script type = "text/javascript">

function addCommas(nStr) {
var rgx = /(\d+)(\d{3})/;
while (rgx.test(nStr)) {
nStr = nStr.replace(rgx, '$1,$2');
}
if (nStr.indexOf('.') == -1) { // if whole number add .00
nStr = nStr + ".00";
}
nStr = nStr.replace(/(\.\d)$/,"$10"); // if only one DP add another
return nStr;
}

var x1;
var x2;

function show() {
var totalStr = ((x1*1) + (x2*1)).toString();
totalStr = addCommas(totalStr);
document.form1.text3.value = totalStr;
}

function truncate(x) { // truncate to 2DP
x = x.replace(/[^0-9\.]/g,"");
x = x *100;
if (x < 0) {
x = Math.ceil(x)/100;
return x.toString();
}
else {
x = Math.floor(x)/100;
return x.toString();
}
}

</script>

<head>
<body>
<center>
<form name ="form1">
<input type=text name=text1 size=15 value="" onfocus = 'this.value = "" ' ; onblur="x1 = truncate(this.value) || 0; this.value=addCommas(x1)"><br>
<input type=text name=text2 size=15 value="" onfocus = 'this.value = "" '; onblur="x2 = truncate(this.value) || 0; this.value=addCommas(x2)"><br>
<input type=text name=text3 size=15 value="" disabled><br>
<input type=button value="Show" onclick="setTimeout(show,25)">
</form>
</center>
</body>
</html>


Note: the <center> tag is deprecated and you should use CSS styling to position page elements.

tqmd1
12-26-2011, 06:13 AM
Sir, you codes work fine but I want to ask you
is there any way to remove this line of code

onfocus = 'this.value = ""

If user moves cursor accross textboxes then values in textboxes are removed then he has to enter value again.

If user edits value and press show button then it must accept new values for calculation.

Philip M
12-26-2011, 09:18 AM
Sir, you codes work fine but I want to ask you
is there any way to remove this line of code

onfocus = 'this.value = ""

If user moves cursor accross textboxes then values in textboxes are removed then he has to enter value again.

If user edits value and press show button then it must accept new values for calculation.

I thought I had explained, you cannot edit the values after they have been formatted with commas as you desire.
It is not a case of the user "moving the cursor over the textbox". The user must click on it for focus to be placed there.

tqmd1
12-26-2011, 10:34 AM
Dear Sir,

Please check these codes, even works fine if user edit data anytime. Your codes were very short, so it will be better if your code work like these.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Numeric Textbox Sample</title>

<style type="text/css">
#box1 {width:200px;height:170px;border:1px solid green;background:#e3eeff;padding-top:20px;}

.button {width:100px;margin-top:0px;}

body {
margin:0;
margin-top:100px;
}
</style>

<script language="javascript">

function validate(evt)
{
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
var backslsh = key;
var chck = String.fromCharCode( key );

var regex = /[0-9]|\./;
if( !regex.test(chck) ) {
theEvent.returnValue = false;
if(theEvent.preventDefault) theEvent.preventDefault();
}
}


function addCommas(nStr)
{
nStr = Number (nStr);
nStr = Math.round(nStr*100)/100;
nStr += '';
var x = nStr.split('.');
var x1 = x[0];
var x2 = x.length > 1 ? '.' + x[1] : '.00';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1+x2;

}
function addTotal(p,q){
p = p.split(',');
q = q.split(',');
var p1=0;
var q1=0;
for (i=0; i<10; i++){
if(p[i]){
p1=p1+p[i];
}
if(q[i]){
q1=q1+q[i];
}
}
p1=parseFloat(p1);
q1=parseFloat(q1);
var z=p1+q1;
return addCommas(z);
}
</script>

</head>

<body onload="form2.text1.focus()" >
<center>
<p>I need following format<br>
99,999,999.99<br>
</p>
<div id="box1">
<form name=form2>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td>Amount</td>

<td><input type=text name=text1 size=15 value="" onkeypress='validate(event)' onblur="form2.text1.value=addCommas(form2.text1.value)"> </td></tr>

<tr><td>Tax</td> <td><input type=text name=text2 size=15 value="" onkeypress='validate(event)' onblur="form2.text2.value=addCommas(form2.text2.value)"></td></tr>
<tr><td>Result</td><td><input type=text name=text3 size=15 value="" disabled></td></tr>

</table>
<hr>
<input class="button" type=button name=command1 value="Plus" onclick="form2.text3.value=addTotal(form2.text1.value,form2.text2.value)"><br>

<input class="button" type=button name=command8 value="Focus" onclick="form2.text1.select()";"form2.text1.focus()"><br>
<input class="button" type=reset name=command9 value="Reset">

</form>
</div>

</center>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum