I have an input filed where the user can enter some numbers. I want to limit the user to enter only thousands.
.
on the image, the user can enter other numbers even if the step is 1000.
onblur is executed when you lose the focus, so try this :
function autoThousand(){
var input = document.getElementById('thousand');
if (input.value%1000 !== 0 ){
input.value-=input.value%1000;
}
}
<input type="number" id="thousand" onblur="autoThousand();" step="1000">
This will round all number inputs to multiples of their step value, when they lose focus. It uses traditional rounding, where it rounds 1499 down to 1000 and 1500 up to 2000. (You can remove the commented line of code to always round down.)
This is one of those "add it and forget it" bits of code, where you just need to add inputs of type number, with a limit, and it will automatically round them all for you.
document.querySelectorAll("input[type=number][limit]").forEach(function(input) {
input.addEventListener("change", function() {
var value = parseInt(this.value, 10);
var limit = parseInt(this.getAttribute("limit"), 10);
value = value + (limit / 2); // remove this to always round down
this.value = value - (value % limit);
});
});
<input type="number" limit="1000" />(multiples of 1000)<br />
<input type="number" limit="100" />(multiples of 100)<br />
<input type="number" limit="500" />(multiples of 500)<br />
use this,
if you still want to make the field number field set the type="number" , step="1000", min="1000" max="any value of your choice"
<input type="text" name="quantity" id="num" onchange="checkInput()">
<script>
function checkInput(){
get_num = new Number(document.getElementById('num').value)
if(get_num < 1000){
document.getElementById('num').value = ""
alert("You must enter number in thousands")
}
}
</script>
Set 'max', 'min' and 'step' value.
<input type="number" name="points" step="1000" max="100000" min="1000">
Related
I trying to make a calculator but I have the problem with the "dot" because give me advertisement like this...
"The specified value "." cannot be parsed, or is out of range."
This is my code...
numberDot.addEventListener('click', function() {
numberDot = '.' ;
input.value = input.value + numberDot;
console.log(typeof(input.value));
console.log(input.value);
});
This is one way to do it
Use type="number" inputs and radio buttons to choose the operation. That helps the person to enter numbers. You can also use type="text"
The important part is the conversion from string data into numeric values
When you read data from the value property of an input, the data is returned as a string. It can be converted to a number using parseInt (for integers) or parseFloat (for floating point). If it can't be parsed, NaN (Not a Number) is returned. To test for NaN, use isNaN().
For example:
let x = "kittens";
let n = parseInt(x);
if (isNaN(n)) {
console.log(x + " is not a number");
}
The important part of this example is the conversion of numbers and figuring out which operation to perform.
// get the elements in the DOM
let numberOne = document.getElementById("numberOne");
let numberTwo = document.getElementById("numberTwo");
let output = document.getElementById("output");
let calculator = document.getElementById("calculator");
// every time the calculator values change
calculator.addEventListener('change', function(evt) {
// get the values from the number inputs and try to convert them to floating point
let valueOne = parseFloat(numberOne.value);
let valueTwo = parseFloat(numberTwo.value);
// if both numbers are numbers (this is not 100% accurate)
if (!isNaN(valueOne) && !isNaN(valueTwo)) {
// create a variable to store the result
let value = 0;
// get the radio buttons
let ops = calculator['operation'];
// use the selected radio button to determine the operation
switch (ops.value) {
case '+':
value = valueOne + valueTwo;
break;
case '-':
value = valueOne - valueTwo;
}
// display the result
output.textContent = value;
}
});
<form id="calculator">
<!-- first number -->
<input id="numberOne" type="number" placeholder="1.0" step="0.01" min="0" max="10">
<br>
<!-- radio buttons for operations -->
<label for="add">Add
<input type="radio" name="operation" value="+">
</label>
<label for="subtract">Subtract
<input type="radio" name="operation" value="-">
</label>
<br>
<!-- second number -->
<input id="numberTwo" type="number" placeholder="1.0" step="0.01" min="0" max="10">
</form>
<!-- to display the result -->
<output id="output"></output>
For those who still end up here with the above error from the browser. Generally, you will get this error when inserting the string into the input field of the type number. Check the Input field type attribute. This should do the trick.
This is my HTML:
<input type="number" min="0" oninput="validity.valid||(value='');" step="0.1"/>
However, I can still type something like:
0000 or 000111 or 00223, etc.
in my input field. How can I limit it only to one 0?
Is there a way to do this in HTML only?
Thanks.
Check if your input starts with zero and override next digits with only 0.
function checkZero(){
var val = document.getElementById("num").value;
if(val.startsWith("0")){
document.getElementById("num").value = "0";
}
}
<input id="num" type="number" min="0" oninput="checkZero()" step="0.1"/>
I'd go with something like this:
while (s.charAt(0) == '0') {
if (s.length == 1) { break };
if (s.charAt(1) == '.') { break };
s = s.substr(1, s.length-1)
}
It accepts numbers like 0.1 and handles 00.1 or 001.
I have two input type range with min value set to 0 on the first input.
I wanted to set min value for the second input type range based on the first input.
<input name="notification_interval" id="notif" type="range" min="0" max="24" value="{{$teamInfo->notification_interval}}" onchange="notifValue.value=value">
<output id="notifValue">{{$teamInfo->notification_interval}}</ouput>
<input name="limit_per_shift" id="maxshift" type="range" min="0" max="24" value="{{$teamInfo->limit_per_shift}}" onchange="maxValue.value=value">
<output id="maxValue">{{$teamInfo->limit_per_shift}}</ouput>
Like for the first input i select 2 as value. I wanted to have the next input to have a min value of 3.
thanks
HTML
<input type="number" class="first" min="0">
<input type="number" class="second" min="0">
jQuery
$(document).ready(function(){
$('.first').keyup(function(){
var a = $(this).val();
$('.second').attr('min',a);
});
});
In the action for the first input, get the input's numeric value and change the min value of the second input. Here's an example in pure JavaScript:
function onFirstInput() {
var input1 = document.getElementById("firstInput").value;
var newMin = Number(input1)
//Insert any other statements that process the new min here
document.getElementById("secondInput").min = newMin;
}
Listen for the 'change' event on the first range input and run a function that sets the min value of the second input to the current value of the first range input plus 1. Fetching the value of an element returns a string, so the parseInt() is needed to convert to a number so the 1 can be added to it.
var range_1 = document.getElementById('range_1');
var range_2 = document.getElementById('range_2');
range_1.addEventListener('change', function(){
range_2.min = parseInt(range_1.value) + 1;
});
In javascript I need to check whiwh value user enter in an html input like this:
<input type="text" id="volume" class="form-control" name="voilume"></input>
<div id"button"></div>
Ineed to know if the input is between 0,5 and 8 (so I have int and float as you can understand).
So the value has to be >= 0,5 and <= 8
If value input if between 0,5 and 8 I have to display a button, else nothing to do. But I need to prevent if user change the value many times.
So if he enters 3 display a button in div id=button", if it changes for another value like 2 for example keep displaying the button, but if he changes value input for 100 I need to remove the button in div id="button".
for now I tried something like this in order to test if it works:
var input= $('#volume').val();
if (input >= 0.5 && input <= 8) {
$('#button').html('ok');
} else {
$('#button').empty();
}
But it does not work.
You can exploit the CSS Constraint Validation here a little bit. It seems to me like a X/Y Problem. Actually, we could set our min, max and step values for this <input> element and then let the browser do the validation:
<input type="number" min="0.5" max="8" step="0.1" required id="volume" class="form-control" name="voilume">
Alongside this, we can make usage of the pseudo css selectors :valid and :invalid like so:
input:valid~div#button {
display: block;
}
input:invalid~div#button {
display: none;
}
This would have the effect, that if we enter a valid value in our input control, the button will be displayed. If not, the button disappears. Magic!
Example: https://jsfiddle.net/4q1fjqwp/
.val() of an input field is a string, you have to convert it to a number in order to be able to compare it to numbers by >=, <=. You also had a typo: id"button"
function go() {
var input=parseFloat($('#volume').val(), 10);
if (input >= 0.5 && input <= 8) {
$('#button').html('ok');
} else {
$('#button').empty();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="volume" class="form-control" name="voilume"/>
<div id="button"></div>
<button onclick="go()">run</button>
The problem may happen when input contain comma ,
so "0,5" >= 0.5 will return false and parseFloat("0,5") will return 0.
You need replace , with .
Something like below will work.
<input type="text" id="myTextField" onblur="change()"/>
<input type="submit" id="byBtn" value="" />
JavaScript
function change() {
var myTextbox = document.getElementById('myTextField').value;
var button = document.getElementById('byBtn');
if (parseFloat(myTextbox) >= 0.5 && parseFloat(myTextbox) <= 8) {
button.value = "OK";
} else {
button.value = "";
}
}
you need to parse string value to integer. for that use parseInt().
it will parse string to integer.
replace this:
var input= $('#volume').val();
by
var inputval= parseInt($('#volume').val());
It seems pretty simple but I can't find a good way to do it.
I am doing a research bar which allow users to search something in terms of price mini and price maxi.
So :
I have two text input types (in html of course) "price_mini?" and "price_maxi?".
"Price_mini" cannot be bigger than "price_maxi".
How can I limit the users input of "price_mini" so that if does not allow the user to enter more than the "price_maxi" variable's input and then display an error on save(search) if the mini number is bigger than price_maxi.
Something like this should work, I couldn't get JSFiddle to handle the form to show you a good example and I don't do much in plain javascript now in days so pardon me if there is a small error or two.
HTML
<form name="myForm" onSubmit="submit()" method="post">
<input name="price_mini" type="text">
<input name="price_maxi" type="text">
<input type="submit" value="Submit">
</form>
Javascript
function submit(){
var price_mini = document.forms["myForm"]["price_mini"].value;
var price_maxi = document.forms["myForm"]["price_maxi"].value;
if(Number(price_mini) > Number(price_maxi)){
alert("Minimum price must be less than maximum price!");
}else{
// Your search code here
}
}
Imagine this html
<input id="min" type="text">
<input id="max" type="text">
This should be the correct javascript
var min = document.getElementById("min");
var max = document.getElementById("max");
min.change(function() {
if(Number(this.value) > Number(max.value)) {
this.value = max.value; // replace min with the same max value if it's bigger
}
}
Let's assume that this is your HTML.
<input id="min" type="text">
<input id="max" type="text">
The working JavaScript is this with the behavior if the max field is empty.
var min = document.querySelector('#min');
var max = document.querySelector('#max');
var calculate = function() {
if(max.value == '') return;
if(Number(min.value) > Number(max.value)) {
min.value = max.value;
}
}
min.addEventListener('input', calculate);
max.addEventListener('input', calculate);
You should compare them when they have value (min && max). If you notice that min is higher you can alert to the user or change it automatically to the lowest or to the highest.
$('.calc_input').change( function() {
var min = $('#min').val();
var max = $('#max').val();
if ( (min && max) && min > max ) {
alert('This can not be!');
// $('#min').val() = max;
// $('#max').val() = min;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Min:<input id="min" class="calc_input">
<br>
Max:<input id="max" class="calc_input">