I have two input fields in my contact form, in both fields it's only possible to fill in a number. My question is, is there a way that the number in field 1 can never be higher than the number in field 2?
I have looked everywhere but can't find a solution. Is this even possible (with Javascript)? Hopefully somebody has a solution or can send me in the right direction.
<form>
<input type="number" class="fieldone" min="0" max="16" step="0.1">
<input type="number" class="fieldtwo" min="0" max="16" step="0.1">
</form>
function forceLimit(e) {
var limit = e.target.getAttribute("max");
if(e.target.value > limit)
e.target.value = limit;
}
function handleLimitChange(e) {
var limit = e.target.value;
var fieldOne = document.querySelector('#field-one');
if(fieldOne.value > limit) {
fieldOne.value = limit;
}
fieldOne.setAttribute('max', limit);
}
<form>
<input type="number" id="field-one" class="fieldone" onchange="forceLimit(event)" min="0" max="16" step="0.1">
<input type="number" id="field-two" class="fieldtwo" onchange="handleLimitChange(event)" min="0" max="16" step="0.1">
</form>
You can use jQuery to check that always the value in field 2 is greater or equal to field 1:
$('.fieldone').change(function(){
checkValue();
});
$('.fieldtwo').change(function(){
checkValue();
});
function checkValue(){
var maxValue = $('.fieldtwo').val();
if(maxValue > 0 && $('.fieldone').val() > maxValue){
$('.fieldone').val(maxValue);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="number" class="fieldone" min="0" max="16" step="0.1">
<input type="number" class="fieldtwo" min="0" max="16" step="0.1">
</form>
Related
How can i have a number limit? im trying to make it so that you can only type the number 1-100 in "app-benutzer" and 1-15 in "backend-benutzer" also is there a way to display these numbers in the input field without typing them so it would show the user that you can only type the number from 1-15.
html:
<body>
App-Benutzer: <input type="number" min="1" max="100" class='appuser'></input><br>
Backendbenutzer: <input type="number" min="1" max="15" class='backenduser'></input><br>
<button class='calcit'>Berechnen</button><br>
<span class='summe'>0.00</span><br>
<script src="./app.js"></script>
</body>
js:
const btncalc = document.querySelector('.calcit');
const summetext = document.querySelector('.summe');
btncalc.addEventListener('click', function(){
var backendanzahl= document.getElementsByClassName("backenduser")[0].value;
var appanzahl= document.getElementsByClassName("appuser")[0].value;
var mytext="Anzahl der Summe:" + (+backendanzahl * 35 + +appanzahl * 7.5) ;
summetext.textContent = mytext;
});
You can achieve this only by using HTML.
This way, you can't really write anything more than what you specify in your terms.
Clarification:
Placeholder is the attribute that you use to put some text inside of your input field, but that text will disappear as soon as you click on your element.
oninput is the Event that occurs every time that value of your input element has changed. So basically, each time you write 1 number/letter/whatever, oninput event will trigger.
That's where we put our condition.
this.value - represents what we write inside of our input element.
our value (this.value) = if (this.value > 100) (? represents something like return) return 100 ( (:) is like else) else return this.value
this.value = this.value > 100 ? 100 : Math.abs(this.value)
is equivalent to
if(this.value > 100) //this.value is what we write inside of the field
return 100;
else
return this.value;
<body>
App-Benutzer: <input type="number" min="1" max="100" oninput="this.value = this.value > 100 ? 100 : Math.abs(this.value)" class='appuser' placeholder='1-100'></input><br>
Backendbenutzer: <input type="number" min="1" max="15" oninput="this.value = this.value > 15 ? 15 : Math.abs(this.value)" class='backenduser' placeholder='1-15'></input><br>
<button class='calcit'>Berechnen</button><br>
<span class='summe'>0.00</span><br>
<script src="./app.js"></script>
</body>
You can use placeholder attribute of input field to put any text you want. This text will disapear once the user starts to edit the field. In you case you may may sat a placeholder to visualise "1-15".
<body>
App-Benutzer: <input type="number" min="1" max="100" class='appuser' placeholder="Input a value from 1 to 100"></input><br>
Backendbenutzer: <input type="number" min="1" max="15" class='backenduser' placeholder="Input a value from 1 to 15"></input><br>
<button class='calcit'>Berechnen</button><br>
<span class='summe'>0.00</span><br>
<script src="./app.js"></script>
</body>
Hey I'm want to sync 2 inputs so if someone change the slider then should also change the number input and the other way round I know there are other answered Question but the did not work form me because it is important not to change any class names or ids only the number input sync with the slider but not also the other way round my code is:
<div class="slidecontainer">
<input type="range" min="0.25" max="5" value="1" step="0.25" class="slider" id="playbackSpeed">
<input type="number" value="1" class="number" id="playbackSpeed" placeholder="1,0">
</div>
my js is
document
.querySelector(".slider")
.addEventListener("input", updateValue);
document
.getElementsByClassName("number")
.addEventListener("input", updateValue);
function updateValue(e) {
var sibling =
e.target.previousElementSibling ||
e.target.nextElementSibling;
sibling.value = e.target.value;
}
You can even shorten the whole thing to:
const inputs=[...document.querySelectorAll("input")];
inputs.forEach((inp,i)=>inp.addEventListener("input",()=>
inputs[1-i].value=inputs[i].value )
)
<div class="slidecontainer">
<input type="range" min="0.25" max="5" value="1" step="0.25" class="slider" id="playbackSpeed">
<input type="number" value="1" class="number" id="playbackSpeed" placeholder="1,0">
</div>
let range=document.querySelector("input[type=range]");
let number=document.querySelector('input[type=number]')
range.addEventListener("change",(e)=>{
number.value=e.target.value;
})
number.addEventListener("change",(e)=>{
range.value=e.target.value;
})
For more goto: https://codepen.io/Gangster_sCode/pen/abNKJMm
html text input only 0 or 2 or 4 or 6 or 8 or 10 only.otherwise a blank space should be returned
function isNumberKey(evt) {
var regexExp = /[2,4,6,8]{1}|10/
return (regexExp.test(($('#evt').val())) ? evt ').val() : false);
}
<input type="text" name="T2" id="d1" size="5" maxlength="2" min=0 max=10 step="2" Onkeypress="return isNumberKey(this.value)">
Based on what I understood, I think this is what you are looking for.
exception being that the input value of "1" is valid.
<input type="number" min="0" max="10" value="0" step="2" onkeypress=" let satisfy = (/^(0|2|4|6|8|1|10)$/).test(this.value + event.key); if(!satisfy){this.value = ''} return satisfy;">
This is frustrating!
When the input type is text and I gave maxlength as 5, it is not allowing me to enter more than 5 characters
<input type="text" maxlength="5" />
If I gave input type as number and I gave maxlength as 5, it is allowing more than 5 digits?
<input type="number" maxlength="5" pattern="[0-9]*" />
Am I missing something?
PS: This is for mobile responsive site!
Instead of maxlength use max
<input type="number" min="1" max="10000" />
Update
Small jQuery plugin
(function ($) {
$.fn.maxlength = function (length) {
return this.on('keydown', function () {
var maxlength = length || parseInt($(this).attr('maxlength'), 10) ;
if (maxlength && $(this).val().length >= maxlength) {
$(this).val($(this).val().slice(0, maxlength - 1));
}
});
};
}($));
Example
try using max...
<input type="number" max="99999" />
EDIT: Showing Validation
<form id='FormValidation'>
<input id="myNum" type="number" min="1" max="99999" />
<input type="text" maxlength="5" />
<input type="submit" />
</form>
Try adding a number greater than 99999 and hitting submit, check the updated fiddle.
This jquery could help too...
$('#myNum').keyup( function(e){
var max = $('#myNum').attr('max').length;
if ($(this).val().length >= max) {
$(this).val($(this).val().substr(0, max));
}
});
replace maxlength with max
// Max Length = 5
<input type="number" max="99999" />
// length between 1 to 5
<input type="number" min="1" max="99999" />
Updated Answer. It's so simple!
<input type="number" id="nbr"/>
<input type="text" maxlength="5" />
$(document).on('keypress','#nbr', function(e){
if($(this).val().length >= 5)
{
e.preventDefault();
}
});
And you can add a max attribute that will specify the highest possible number that you may insert
<input type="number" max="999" />
if you add both a max and a min value you can specify the range of allowed values:
<input type="number" min="1" max="999" />
changeI have two numeric inputs and would like to limit the max or min of the second one based on the changes of the first one. So....
<input id="input1" type="number" min="0" max="10" value="5" change="OnChangeNumeric()" >
<input id="input2" type="number" min="0" max="10" value="1" >
<script>
function OnChangeNumeric() {
//how to actually change the values is where i am stuck
$('#input2').max = 5;
}
</script>
how to actually change the values is where i am stuck
Thanks for your suggestions
$(function() {
$('#input1').on('change',function() {
var thisVal = this.value;
/*calculate newMin, and newMax for #input2 according to your rules
based on thisVal ........
$('#input2').attr('min', newMin).attr('max', newMax);*/
console.log( $('#input2')[0] );
});
});
No need for inline JS:
<input id="input1" type="number" min="0" max="10" value="5"/>
<input id="input2" type="number" min="0" max="10" value="1"/>
JS FIDDLE DEMO