Develop Reference

HTML Input thousand seperator

I have a input of type text in a HTML form.
<from>
<input type="text" name="price" value="20000">
<button type="submit">Save</button>
</form>
I want the input text to be displayed comma separated on UI and when the form is submitted, I want the actual value.
If I want to write in javascript as
$('form').serialize()
then I should get the value for price as 20000 and not 20,000
Is this possible without writing any methods in javascript which will parse the comma seperated string to a number?

Not possible without javascript methods...Try to use parseInt() and toLocaleString() method here...
var inputValue = parseInt($("input").val());
$("input").val(inputValue.toLocaleString());
console.log(inputValue);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" name="price" value="20000">
<button type="submit">Save</button>
</form>

var number=20000;
document.getElementsByName("price")[0].value = number.toLocaleString();
function getValue()
{
number = +document.getElementsByName("price")[0].value.replace(',', '');
console.log(number);
}
<from>
<input type="text" name="price">
<button type="submit" onclick="getValue()">Save</button>
</form>
For more Details
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

you can achieve like this in php.
$output = 49995;
$followers = number_format( $output , 0 , '.' , ',' );
echo $followers;
I have given js fiddle like Fiddle Demo

Force number input to have two decimal places and ONLY two

How can I format the following input for a price to be forced to have two decimal places and ensure that it allows only two places?
So, for example, if the value is '1', it will be changed to '1.00' automatically, and '1.111' will be changed to '1.11'.
I've already tried step="0.01", but this won't work.
JSFiddle: https://jsfiddle.net/eub68raq/.
HTML:
<input data-number="Quantity must be a number" data-required="Unit price required" min="0" step="0.01" id="unitPrice" value="" type="number" name="unitPrice" placeholder="Unit Price"/>
JS I've tried:-
var number = $('input#unitPrice').val();
$('input#unitPrice').innerHTML = parseFloat(Math.round(number * 100) / 100).toFixed(2);

You can do it like below:-
$(document).ready(function(){
$('input#unitPrice').blur(function(){
var num = parseFloat($(this).val());
var cleanNum = num.toFixed(2);
$(this).val(cleanNum);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input data-number="Quantity must be a number" data-required="Unit price required" min="0" step="0.01" id="unitPrice" value="" type="number" name="unitPrice" placeholder="Unit Price"/>

Try this:
parseFloat(number.toFixed(2));

Using your code for rounding, the thing you want could look like this:
$(document).ready(function(){
$('input#unitPrice').change(function(){
$(this).val(parseFloat(Math.round($(this).val() * 100) / 100).toFixed(2));
});
});
Using keyup for this isn't very lucky choice because the user will not be able to change the input value. As soon as he writes something it will be changed to 2 decimal places. If he tries to delete a digit it will be put back.
If you want a keyup behavior, then correcting the value will have to happen with a delay (by using setInterval for example).

Adding 2 Numbers following onChange in form - Javascript

I want to do something very simple!!
I have a form... I want to enter 2 numbers and have a box that updates with the sum of the two numbers I've inputted.
Unfortunately - the code I'm using seems to see the values as text and just puts them next to each other... so 5+1 becomes 51...
Here is the code:
`
function av(avSelect)
{
var one=avSelect.form.one.value;
var two=avSelect.form.two.value;
var avvy=one+two;
avSelect.form.avvy.value=avvy;
}
</script>
<form name="5">
<br>
Adding<input type="number" id="avvy" value="">
Put a number in:<input type="number" id="one" OnChange="av(this)">
Put a number in:<input type="number" id="two" OnChange="av(this)">
</form>`

Try
var one = parseFloat(avSelect.form.one.value);
var two = parseFloat(avSelect.form.two.value);

var one = parseInt(avSelect.form.one.value);
var two = parseInt(avSelect.form.two.value);
var avvy = one+two;
avSelect.form.avvy.value=avvy;

I've juste made the solution for you:
http://jsfiddle.net/c2dJt/
For the Jquery:
$(document).ready(function(){
$(document).on('change', '.change', function(){
var number = parseFloat($('#one').val()) + parseFloat($('#two').val());
$('#avvy').val(number);
});
});
Fot the HTML:
<form name="5">
Adding<input type="number" id="avvy" value="">
Put a number in:<input type="number" id="one" class="change">
Put a number in:<input type="number" id="two" class="change">
</form>

It is added as a string and not as an integer. The parseInt() function parses a string and returns an integer. This should fix the issue
<script type="text/javascript">
function av(avSelect) {
var one=avSelect.form.one.value;
var two=avSelect.form.two.value;
var avvy=parseInt(one)+parseInt(two);
avSelect.form.avvy.value=avvy;
}
</script>

User Input with document.getElementById from an input box

I am working on making a simple interest calculator but I keep getting Not a Number:
<script type="text/javascript">
function intcal() {
var pr=document.getElementById("P");
var ra=document.getElementById("r");
var ti=document.getElementById("t");
var interest=pr*ra*ti;
document.write(interest);
}
</script>
<h1> Principal </h1>
<Input type="number" id="P" name="Principal" Size="16">
<h1> Rate </h1>
<Input type="number" id="r"name="Rate" Size="16">
<h1> Time </h1>
<Input type="number" id="t" name="Time" Size="16">
<input type="button" onClick=intcal() value="Calculate">

A few problems there. getElementById returns a DOM element. You need to grab the value of the element, which is a string, and then convert it to a number (or cast it):
var pr = +document.getElementById("P").value;
var ra = +document.getElementById("r").value;
var ti = +document.getElementById("t").value;
+ casts the string to a number. Now your multiplication should work.
Also you forgot your quotes around the function call on the onclick event. Oh and read on why document.write is bad practice.
Edit: As Bergi said, multiplication casts a number as well, but in any case since you have variables, you probably want numbers assigned to them.

how to make a calculator but have more than 2 inputs?

here is a link to what im basing my code off of....but i want there to be more than 2 areas to type numbers in if that makes sense...so number 1, number 2, then number 3...etc
LINK
Ive tried to copy everything down but then adding
c=Number(document.calculator.number3.value);
d=Number(document.calculator.number4.value);
<!-- Here user will enter 3rd number. -->
Number 3: <input type="text" name="number3">
<!-- Here user will enter 4th number. -->
Number 4: <input type="text" name="number4">
and changing the result to e=a+b+c+d
but then the calculator stops functioning
any help would be appreciated

Try - http://jsfiddle.net/GmDuE/
HTML
Number 1: <input type="text" name="number1">
Number 2: <input type="text" name="number2">
Number 3: <input type="text" name="number3">
Number 4: <input type="text" name="number4">
JS
<script language="javascript" type="text/javascript">
function multiply(){
a=Number(document.calculator.number1.value);
b=Number(document.calculator.number2.value);
c=Number(document.calculator.number3.value);
d=Number(document.calculator.number4.value);
m=a*b*c*d;
document.calculator.total.value=m;
}
function addition(){
a=Number(document.calculator.number1.value);
b=Number(document.calculator.number2.value);
c=Number(document.calculator.number3.value);
d=Number(document.calculator.number4.value);
m=a+b+c+d;
document.calculator.total.value=m;
}
</script>
etc.