We Keep Coding

Accept input field value x>0 [ allow float in range 0<x<=1 ]

My input field should accept all non zero positive value as float. In range ** x > 0**
I don't understand how can I tell html to do that? each time if a try a float to fix minimum (like 0.5) it will ignore all less than that (like 0.005 < 0.5).
So how can I allow this wide range ? ( i feel problem with this range : 0 < x < 1 , other floats in x >1 are good).
This is what I tried
<input type="number" [formControl]="pQuantity" class="form-control" id="qt" placeholder="Enter quantity"
name="pqt" min="1" step="any" required>

Keep "min" to be the minimalistic value that you might need. Keep "step" to such a value which covers all the values.
For example: (if the lowest value you take is 0.005)
<input type="number" [formControl]="pQuantity" class="form-control" id="qt" placeholder="Enter quantity"
name="pqt" min="0.005" step="0.001" required>

You can use the onkeyup attribute
<input type="number" onkeyup="if(this.value<=0){this.value = 1}">
Or you could simply set the min value to something like this 0.0000001
<input type="number" min=0.0000001>

Range Slider with direct number input

Is it possible to utilise a range slider in a form field and also allow a user to input the value through typing a number, i.e. having input type="range" and input type="number" on the same form field with the one utilised overriding the other?
Ok, so in response to the below here is my code:
<label for="monday">Monday Sales Target - $<span id="monday"></span></label>
<input type="range" min="0" max="5000" id="monday" name="monday" value="0" step="50" oninput="showValue1(this.value)" />
JavaScript:
function showValue1(newValue) {
document.getElementById("monday").innerHTML=newValue;
}
At the moment the range slider changes and outputs the number selected at the end of the label however some users are complaining that the slider is too fiddly and would like to enter the number directly through a number input. Is this possible?

You can make the range value change according to the input value using onkeyup event with the input, here's what you will need:
HTML:
JS:
function changeRangeValue(val){
document.getElementById("range").value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
showValue1(val);
}
Demo:
function showValue1(newValue) {
document.getElementById("monday").innerHTML= newValue;
}
function changeRangeValue(val){
document.getElementById("range").value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
showValue1(val);
}
function changeInputValue(val){
document.getElementById("number").value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
showValue1(val);
}
<input type="number" id="number" min="0" max="5000" onkeyup="changeRangeValue(this.value)"/>
<br />
<label for="monday">Monday Sales Target - $<span id="monday"></span></label>
<input type="range" min="0" max="5000" id="range" name="monday" value="0" step="50" oninput="changeInputValue(this.value)" />
Note:
You can't set the same id for multiple elements in HTML.

AJAX set max in number (spinner) field from variable

I am trying to set the "max" setting in a number input field. I have successfully set the default value to my variable available_seats using:
<input type="number" min="" max="" step="1" name="available_seats" id="available_seats"/>
and
$('input[name="available_seats"]').val(response.available_seats);
However, I am having a lot of trouble setting the min and max settings. Here's what I've tried;
$('#available_seats').spinner('option', 'max', data.available_seats);
That doesn't work. Any ideas?

The input has attributes so set the attributes.
$("#available_seats")
.attr("min", 10)
.attr("max", 20)
.val(15);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" min="" max="" step="1" name="available_seats" id="available_seats"/>

Javascript to calculate input field values and show 2 decimal place accuracy

I understand this may be a repeat question but I have been searching for ages and cant figure out why this isnt working.
I have 3 input fields, Subtotal, Vat and Total: I want to be able to populate the VAT and Total inpur fields with values when there is a value inputted in Subtotal and to show 2 decimal palces after. So:
4 would be 4.00
4.5 would be 4.50
HTML code for the input field:
<input name="subtotal" id="subtotal" type="number" maxlength="20" min="0" placeholder="00.00" onchange="vatCalculation();" />
<input name="vat" id="vat" type="number" maxlength="20" min="0" placeholder="00.00" readonly="true" />
<input name="total" id="total" type="number" maxlength="20" min="0" placeholder="00.00" readonly="true" />
And the javascript code I have at the moment is:
function vatCalculation() {
var subtotal = document.getElementById('subtotal').value;
var vat = parseFloat(parseFloat(subtotal) * parseFloat(0.2)).toFixed(2);
var total = parseFloat(parseFloat(subtotal) + parseFloat(vat)).toFixed(2);
document.getElementById('vat').value = vat;
document.getElementById('total').value = total;
}
I cant see where I am going wrong. When I enter 10 in the 'subtotal'input field the 'VAT' and 'Total' fields change to 2 and 12. But I want them to show 2.00 and 12.00. Screenshot below:
SOLUTION:
When using Firefox the input field of type="number" dont seem to work with javascript calculation. Workaround is to change it to a type="text" Like J Santosh as mentioned below and it works.

Found the issue . It is with <input type='number'> you change it to <input type='text'>
Working Fiddle
Input Type Number is not accepting decimals
Reference -1
Reference-2

Is this what you want? If so, you were pretty close. You just needed to add
document.getElementById('subtotal').value = parseFloat(subtotal).toFixed(2);
to your code as well.
function vatCalculation() {
var subtotal = document.getElementById('subtotal').value;
var vat = parseFloat(parseFloat(subtotal) * parseFloat(0.2)).toFixed(2);
var total = parseFloat(parseFloat(subtotal) + parseFloat(vat)).toFixed(2);
document.getElementById('subtotal').value = parseFloat(subtotal).toFixed(2);
document.getElementById('vat').value = vat;
document.getElementById('total').value = total;
}
<input name="subtotal" id="subtotal" type="text" maxlength="20" min="0" placeholder="00.00" onchange="vatCalculation();" />
<input name="vat" id="vat" type="text" maxlength="20" min="0" placeholder="00.00" readonly="true" />
<input name="total" id="total" type="text" maxlength="20" min="0" placeholder="00.00" readonly="true" />

(2.399).toFixed(2); will give you 2.40
But if you need 2.39 try
parseInt(2.399 * 100)/100

How to create slider with decimal values using html

I want to create a slider showing decimal values like 0.0 to 0.1 using html or html5.

Add step="0.1" in your input range tag like this: <input type="range" min="0.1" max="1.0" step="0.1" value="1"> Example:
document.getElementById("scale").oninput = function() {
document.getElementById("spanscale").innerHTML = this.value;
}
<input type="range" min="0.1" max="3.0" step="0.1" value="1" id="scale">Scale:<text id="spanscale" style="inline">1</text>
If you want to show a decimal place in integer numbers you can add this piece of code in the value output: Number(this.value).toFixed(1)
document.getElementById("scale").oninput = function() {
document.getElementById("spanscale").innerHTML = Number(this.value).toFixed(1);
}
<input type="range" min="0.1" max="3.0" step="0.1" value="1.0" id="scale">Scale:<text id="spanscale" style="inline">1.0</text>

It sounds like you want an input field that the user can click arrows to increment/decrement a value in steps of 0.1. If that's the case, you want to use an HTML5 numeric input element:
<input type="number" min="0" max="1" step="0.1" value="0.5" />
Find out more here at HTML5 Goodies.

As you precise HTML5, then you can use the new input type range :
<input type="range" name="things" min="1" max="10">
Demonstration
Be aware that it doesn't work on IE9-,though.

For setting this dynamically using JavaScript:
document.getElementById("my_slider").setAttribute("step", "0.1");