Double tilde (~~) operator is removing decimal portion of number - javascript

So all this time I thought I was doing it wrong. But can jQuery read decimals? My first textbox has to multiply the input with .10, the second is .05. But I only get 1 as final result. How can I fix it?
<!DOCTYPE html>
<head>
<title>Test</title>
<script src="../js/jquery-1.11.1.min.js"></script>
<head>
<body>
<input id="first" type="text" />
<script>
$('#first').on('change', function () {
$(this).val($(this).val() * .10);
compute();
});
</script>
<input id="second" type="text" />
<script>
$('#second').on('change', function () {
$(this).val($(this).val() * .05);
compute();
});
</script>
<script>
function compute() {
var first = ~~$('#first').val();
var second = ~~$('#second').val();
var result = $('#result');
var grade = first + second;
result.val(grade);
}
</script>
<input id="result" type="text" readonly />
</body>
</html>

I believe you want to change compute() to this:
function compute() {
var first = parseFloat($('#first').val());
var second = parseFloat($('#second').val());
var result = $('#result');
var grade = first + second;
result.val(grade);
}

Related

Unable to display the details of items

var par = new Array(2);
par.push("Apple");
par.push("Orange");
var nar = new Array("2");
nar.push("red ");
nar.push("dark orange");
var ok = document.getElementById('one').value;
function abc() {
for (var i = 0; i < par.length; i++) {
if (par[i] == ok) {
break;
}
}
document.write(par[i] + " " + "color is " + " " + nar[i]);
}
<!doctype html>
<html>
<head>
</head>
<body>
<label>Enter the name</label>
<input type="text" id="one">
<input type="submit" onclick="abc()" id="on">
</body>
</html>
// In the above code snippets I am trying to display the color of apple and orange by defining the required details in an array but while running the code I am getting output as "undefined color is undefined".I am unable to figure out the exact problem in my code.
In Ist Statement you have used var par =new Array(2); This means it is creating 2 empty slots and then 2 values so creating array of length 4 . And in 2nd one you are using var par =new Array("2"); means ist value s string and then 2 value so creating array of length 3. So you are getting wrong result. Use new Array() this. Also get the value of ok inside abc function
var par =new Array();
par.push("Apple");
par.push("Orange");
var nar= new Array();
nar.push("red ");
nar.push("dark orange");
function abc(){
var ok= document.getElementById('one').value;
for (var i=0;i<par.length;i++){
if(par[i]==ok){
break;
}
}
document.write(par[i]+" "+"color is "+" "+nar[i]);
}
<!doctype html>
<html>
<head>
</head>
<body>
<label>Enter the name</label>
<input type="text" id="one">
<input type="submit" onclick="abc()" id="on">
</body>
</html>
in your code after the loop ends i,j will be 2 and bar[2] or nar[2] will be undefined (accessing element of array with not existing index)
you need to move the write command to loop
for (var i = 0; i < par.length; i++) {
if (par[i] == ok) {
break;
}
document.write(par[i] + " " + "color is " + " " + nar[i]);
}
The problem is you define ok outside the abc() function. At the time you define it (as the pages loads), the input is empty.
When you click on your submit button, ok is still the value of the input as it loaded.
The following should work :
function abc(){
for (var i=0;i<par.length;i++){
var ok= document.getElementById('one').value;
if(par[i]==ok){
break;
}
}
document.write(par[i]+" "+"color is "+" "+nar[i]);
}
<html>
<head>
</head>
<body>
<label>Enter the name</label>
<input type="text" id="one">
<input type="submit" onclick="abc()" id="on">
<script>
var par =new Array("Apple","Orange");
var nar= new Array("red ","dark orange");
var ok= document.getElementById('one').value;
function abc(){
for (var i=0;i<par.length;i++){
if(par[i]==ok){
break;
}
document.write(par[i]+" "+"color is "+" "+nar[i]);
}
}
</script>
</body>
</html>

how to capitalize the 1st letter of input field text while typing by javasccript?

i want to know that when we type the name in input field type text. i want to get the input by user but while typing i want to capitalize the 1st letter that user enter. please help me
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<form name="inputform">
Name: <input name="name" type="text" id="n" onKeyPress="check()">
</form>
<script>
function check()
{
var name=document.getElementById("n");
var uppercase=name.value.charAt(0);
}
</script>
</body>
</html>
As simple as it gets:
function capitalizeFirstLetter(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}; // ^ First letter + The rest of the string.
Use it like this:
function check() {
var name = document.getElementById("n");
var uppercase = capitalizeFirstLetter(name.value);
name.value = uppercase;
}
Or, shorter:
<input name="name" type="text" id="n" onKeyUp="check(this)">
function check(element) {
element.value = capitalizeFirstLetter(element.value);
}
use this function in check method
like this
function capitalize(s) {
// returns the first letter capitalized + the string from index 1 and out aka. the rest of the string
return s[0].toUpperCase() + s.substr(1);
}
function check()
{
var name=document.getElementById("n");
var uppercase = capitalize(name)
}
You can use the Javascript function toUpperCase().
Here you have the code:
document.getElementById("n").addEventListener("keyup",checkinput);
function checkinput(){
var name=document.getElementById("n");
if(name.value.length==1){
var uppercase=name.value.charAt(0).toUpperCase();
name.value=uppercase;
}
}

multiple function in javascript

i want to use multiple function in a script.i am not getting calculated value in second textbox. i dont know what is wrong in my program.
returning no value.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
function fun1()
{
var z=5;
function fun3(x)
{
alert("i am fun3");
var y=x+z;
}
return y;
}
function fun2()
{
var a = document.getElementById("txt1").value;
var result = fun3(a);
document.getElementById("txt2").innerHTML=result;
}
</script>
</head>
<body>
Enter no: <input type="text" value="" id="txt1" onkeydown="fun2();">
Result: <input type="text" value="" id="txt2" />
</body>
</html>
Are you looking for something like this ?
function fun1(a)
{
var z=5, y;
function fun3(x)
{
alert("i am fun3");
y=x+z;
}
fun3(a)
return y;
}
function fun2()
{
var a = document.getElementById("txt1").value;
var result = fun1(a);
document.getElementById("txt2").value=result;
}
EDIT :
I changed : document.getElementById("txt2").innerHtml=result; with document.getElementById("txt2").value=result; as txt2 is an input
If not, please precise your question, I'll edit it as soon as I've more details.
EDIT 2
#Nitish finished by found by himself : jsfiddle.net/nitishkaushik/4sxb9d55/4
this is what i want. and i got it. if anybody want then they can use :)
Enter no:
Result:
<script>
function fun1(a)
{
alert("Debugging 1st level="+a);
var z=5, y;
function fun3(x)
{
alert("Debugging 2nd level="+x);
y= (parseInt(x) + parseInt(z));
alert("Debugging 3rd level="+y);
}
fun3(a)
return y;
}
function fun2(val)
{ var result=0;
alert("value is"+val);
var result = fun1(val);
alert("Debugging 4th level="+result);
document.getElementById("txt2").value=result;
}
</script>

Displaying number with thousand seperator

I have a input field for user to input number. This number will be displayed in span tag as user is typing. And i would like to format this number in span tag with thousand separator.
Currently, it only show exactly what is typing without thousand separator:
JSFiddle
Here is my simplified code:
<!DOCTYPE html>
<html>
<head>
<script>
function charPreview(){
var x = document.getElementById("frm_price").value;
document.getElementById("frm_price_preview").innerHTML = x;
}
</script>
</head>
<body>
<form>
Price: <input type='text' id='frm_price'
onkeyup="charPreview()">
<span id="frm_price_preview"></span>
</form>
</body>
</html>
function charPreview(){
var x = document.getElementById("frm_price").value;
document.getElementById("frm_price_preview").innerHTML = decimalWithCommas(x);
}
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
function decimalWithCommas(n){
var rx= /(\d+)(\d{3})/;
return String(n).replace(/^\d+/, function(w){
while(rx.test(w)){
w= w.replace(rx, '$1,$2');
}
return w;
});
}
<form>
Price: <input type='text' id='frm_price' onkeyup="charPreview()">&nbsp&nbsp&nbsp <span id="frm_price_preview">This is where to show number as user is typing</span>
</form>
An answer without loops.
function charPreview(){
var x = document.getElementById("frm_price").value;
document.getElementById("frm_price_preview").innerHTML = numberWithCommas(x);
}
function numberWithCommas(n) {
var parts=n.toString().split(".");
return parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") + (parts[1] ? "." + parts[1] : "");
}
<form>
Price: <input type='text' id='frm_price' onkeyup="charPreview()">&nbsp&nbsp&nbsp <span id="frm_price_preview">This is where to show number as user is typing</span>
</form>
See also accounting.js which handles this sort of thing quite nicely.

How do I add Thousands separator to my html form

For example i have a textbox, I am entering 12000 and i want it to look like 12,000 in the textbox How would I do this? Im using html to do the textbox
Try something like this
function addCommas(nStr)
{
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
Then use it on your textboxes like so
<input type="text" id="txtBox" onchange="return addCommas(this.value)" />
Hope that helps
Use the jQuery autoNumeric plugin:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Input with separator</title>
<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script type="text/javascript" src="autoNumeric.js"></script>
<script type="text/javascript">
$( document ).ready( function() {
$("#myinput").autoNumeric(
'init', {aSep: ',', mDec: '0', vMax: '99999999999999999999999999'}
);
});
</script>
</head>
<body>
<input id="myinput" name="myinput" type="text" />
</body>
</html>
This is probably a bad idea...
<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>Comma Thousands Input</title>
<style>
label, input, button{font-size:1.25em}
</style>
<script>
// insert commas as thousands separators
function addCommas(n){
var rx= /(\d+)(\d{3})/;
return String(n).replace(/^\d+/, function(w){
while(rx.test(w)){
w= w.replace(rx, '$1,$2');
}
return w;
});
}
// return integers and decimal numbers from input
// optionally truncates decimals- does not 'round' input
function validDigits(n, dec){
n= n.replace(/[^\d\.]+/g, '');
var ax1= n.indexOf('.'), ax2= -1;
if(ax1!= -1){
++ax1;
ax2= n.indexOf('.', ax1);
if(ax2> ax1) n= n.substring(0, ax2);
if(typeof dec=== 'number') n= n.substring(0, ax1+dec);
}
return n;
}
window.onload= function(){
var n1= document.getElementById('number1'),
n2= document.getElementById('number2');
n1.value=n2.value='';
n1.onkeyup= n1.onchange=n2.onkeyup=n2.onchange= function(e){
e=e|| window.event;
var who=e.target || e.srcElement,temp;
if(who.id==='number2') temp= validDigits(who.value,2);
else temp= validDigits(who.value);
who.value= addCommas(temp);
}
n1.onblur= n2.onblur= function(){
var temp=parseFloat(validDigits(n1.value)),
temp2=parseFloat(validDigits(n2.value));
if(temp)n1.value=addCommas(temp);
if(temp2)n2.value=addCommas(temp2.toFixed(2));
}
}
</script>
</head>
<body>
<h1>Input Thousands Commas</h1>
<div>
<p>
<label> Any number <input id="number1" value=""></label>
<label>2 decimal places <input id="number2" value=""></label>
</p></div>
</body>
</html>
You can use the Javascript Mask API
You can try this simple Javascript
<script type="text/javascript">
function addcommas(x) {
//remove commas
retVal = x ? parseFloat(x.replace(/,/g, '')) : 0;
//apply formatting
return retVal.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
</script>
HTML Code
<div class="form-group">
<label>Amount </label>
<input type="text" name="amount" onkeyup="this.value=addcommas(this.value);"class="form-control" required="">
</div>
For user input I would recommend not formatting the value to include a comma. It will be much easier to deal with an integer value (12000), than a string value (12,000) once submitted.
However if you are certain on formatting the value, then as #achusonline has recommended, I would mask the value. Here is a jQuery plugin which would be useful to get this result:
http://digitalbush.com/projects/masked-input-plugin/
adding punctuation or commas of numbers on input change.
html code
<input type="text" onkeyup="this.value=addPunctuationToNumbers(this.value)">
Javascript Code
<script>
function addPunctuationToNumbers(number) {
return number.replace(/(\d{3})(?=\d)/g, "$1,");
}
</script>
<!DOCTYPE html>
<html>
<body>
<h1>On change add pumctuation to numbers</h1>
<input type="text" onkeyup="this.value=addPunctuationToNumbers(this.value)">
<script>
function addPunctuationToNumbers(number) {
return number.replace(/(\d{3})(?=\d)/g, "$1,");
}
</script>
</body>
</html>
You can use very handy JavaScript method, called Intl.NumberFormat:
<script>
//Value formatting
document.getElementById('your-input-id').addEventListener('change', function(event) {
//Check for specific CSS class of your input first
if (event.target.classList.contains('some-css-class')) {
// remove any commas from earlier formatting
const value = event.target.value.replace(/,/g, '');
// try to convert to an integer
const parsed = parseInt(value);
//NumberFormat options
const options = {
style: 'decimal',
maximumFractionDigits: 10,
useGrouping: true,
maximumSignificantDigits: 20,
};
// check if the integer conversion worked and matches the expected value
if (!isNaN(parsed) && parsed == value) {
// update the value
event.target.value = new Intl.NumberFormat('en-GB', options).format(value);
}
}
});
</script>

Categories