Printable View
Hi, Can i ask some help please..I have textbox that the user will input amount,but the problem is my textbox will not format after the user input the desired amount
example:
the user will input this: 1250
I want that after the user press enter key it will format like this
1,250.00
is this possible ?
Thank you in advance.
Hi jemz,
Yeah, sure it's possible.
Check this script out:
I've included a function to ensure that the users can only enter digits into the text box, as well as a function to convert what was entered into the desired format as soon as focus leaves the text box.HTML Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Format currency example</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<form id="myForm">
<label for="myTextField">Enter Amount (only digits 0-9):</label>
<input id="myTextField" />
</form>
<script>
$(document).ready(function() {
$('#myTextField').keydown(function(event) {
// Allow: backspace, delete, tab, escape, and enter
if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
// Allow: Ctrl+A
(event.keyCode == 65 && event.ctrlKey === true) ||
// Allow: home, end, left, right
(event.keyCode >= 35 && event.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
else {
// Ensure that it is a number and stop the keypress
if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
event.preventDefault();
}
}
});
function formatMoney(num) {
var p = num.toFixed(2).split(".");
return p[0].split("").reverse().reduce(function(acc, num, i, orig) {
return num + (i && !(i % 3) ? "," : "") + acc;
}, "") + "." + p[1];
}
$("#myTextField").on("blur", function() {
if (!$(this).val() ==''){
v = formatMoney(Number($(this).val()));
$(this).val(v);
}
});
$("#myTextField").on("focus", function() {
if (!$(this).val() ==''){
$(this).val('');
}
});
$("#myForm").on("submit", function(){
$("#myTextField").blur();
return false;
})
});
</script>
</body>
</html>
I'm afraid I can't take credit for a lot of this code:
Only numbers method: http://stackoverflow.com/questions/9...x-using-jquery
Currency conversion: http://stackoverflow.com/questions/1...-in-javascript
Nonetheless, I hope it helps.
P.S. Please don't hit "Reply with quote" unless it is necessary :)