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
Related
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
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>
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;">
I'm totally learning here! I'm still playing with JS.
When checkbox is altered I want the range slider to be inactive AND the output to be zero.
function outputUpdate(obj) {
obj.previousElementSibling.value = obj.value;
}
function handleClick(obj) {
obj.previousElementSibling.value = obj.value;
}
<fieldset>
<legend><h3>Engine</h3></legend>
<output for="engine" id="engine">0</output>
<input id="engine" type="range" min="0" max="10" value="0" step="1" list="0-10" oninput="outputUpdate(this)">
<input type="checkbox" name="engine-closed" id="engine-closed" onclick='handleClick(this);' value="0" /><label for="engine-closed">Closed</label>
</fieldset>
I'm not sure how to make the range slider inactive / invisible on checkbox.
Then when unchecked make slider active / visible again.
Further, how to make the output zero when checkbox changes?
So far, with above code, slider works great and it updates output.
When checkbox checked the slider goes to zero as wanted, but not output.
edit: there are about 20 different form sliders with outputs. So it would be nice to use the id that called the function rather than declaring a var...
Remove all the inline javascript and use addEventListener instead.
Then you can just get the elements, bind the events in a loop, and reference the other elements by using this and getting the siblings etc.
var ranges = document.querySelectorAll('fieldset input[type=range]');
var boxes = document.querySelectorAll('fieldset input[type=checkbox]');
[].slice.call(ranges).forEach(function(range) {
range.addEventListener('input', function() {
this.previousElementSibling.value = this.value;
});
});
[].slice.call(boxes).forEach(function(box) {
box.addEventListener('change', function() {
var range = this.previousElementSibling;
var event = new Event('input');
range.value = 0;
range.dispatchEvent(event);
range.disabled = this.checked;
});
});
<fieldset>
<legend><h3>Engine</h3></legend>
<output for="engine" id="engine">0</output>
<input id="engine" type="range" min="0" max="10" value="0" step="1" list="0-10">
<input type="checkbox" name="engine-closed" id="engine-closed" value="0" />
<label for="engine-closed">Closed</label>
</fieldset>
Here, with minimal changes to your code :)
function outputUpdate(obj) {
obj.previousElementSibling.value = obj.value;
}
function handleClick(obj) {
obj.previousElementSibling.value = obj.value;
obj.previousElementSibling.disabled = obj.checked;
}
<fieldset>
<legend>
<h3>Engine</h3>
</legend>
<output for="engine" id="engine">0</output>
<input id="engine" type="range" min="0" max="10" value="0" step="1" list="0-10" oninput="outputUpdate(this)">
<input type="checkbox" name="engine-closed" id="engine-closed" onclick='handleClick(this); outputUpdate(this.previousElementSibling);' value="0" />
<label for="engine-closed">Closed</label>
</fieldset>
You can add the visibility toggle part if you want to.
If you're happy to put your checkbox before the range slider you can do this very simply with just CSS by using the Adjacent Sibling Selector and the :checked pseudo class to target sibling elements after a checked input:
function outputUpdate(obj) {
obj.previousElementSibling.value = obj.value;
}
function handleClick(obj) {
obj.previousElementSibling.value = obj.value;
}
#engine-closed:checked ~ #engine {display:none;}
<fieldset>
<legend><h3>Engine</h3></legend>
<input type="checkbox" name="engine-closed" id="engine-closed" onclick='handleClick(this);' value="0" />
<output for="engine" id="engine">0</output>
<input id="engine" type="range" min="0" max="10" value="0" step="1" list="0-10" oninput="outputUpdate(this)">
<label for="engine-closed">Closed</label>
</fieldset>
If you want a JS solution then simply toggle the elements visibility when the checkbox is set like so: (UPDATED to cope with multiple instances)
(function(){
function initWierdCloseRangeThingThatMakesNoSense(el){
var engine = el.querySelector("input[type='range']"),
output = el.querySelector("output"),
engineClosed = el.querySelector("input[type='checkbox']"),
setOutput = function(){
output.value = engine.value;
},
openClose = function(){
engine.style.display = (this.checked)?"none":"";
engine.value = "0";
setOutput();
};
engine.addEventListener("change", setOutput, false);
engineClosed.addEventListener("change", openClose, false);
};
// for every fieldset:
var fieldsets = document.querySelectorAll("fieldset");
for (i=0; i<fieldsets.length; ++i){
var fs = fieldsets[i];
initWierdCloseRangeThingThatMakesNoSense(fs);
}
})();
<fieldset>
<legend><h3>Engine</h3></legend>
<output for="engine" id="output">0</output>
<input id="engine" type="range" min="0" max="10" value="0" step="1" list="0-10">
<input type="checkbox" name="engine-closed" id="engine-closed" value="0" />
<label for="engine-closed">Closed</label>
</fieldset>
<fieldset>
<legend><h3>Engine 2</h3></legend>
<output for="engine2">0</output>
<input type="range" min="0" max="10" value="0" step="1" list="0-10">
<input type="checkbox" name="engine-2-closed" value="0" />
<label for="engine-3-closed">Closed</label>
</fieldset>
<fieldset>
<legend><h3>Engine 3</h3></legend>
<output for="engine3">0</output>
<input type="range" min="0" max="10" value="0" step="1" list="0-10">
<input type="checkbox" name="engine-3-closed" value="0" />
<label for="engine-3-closed">Closed</label>
</fieldset>
Better still, if you're going for a JS solution use #adeneo's because it's superior ;)
Essentially this:
function outputUpdate(obj) {
obj.previousElementSibling.value = obj.value;
}
function handleClick(obj) {
// grab the slider element (a.k.a. engine)
var engine = obj.previousElementSibling;
// grab the result element (a.k.a. output)
var output = engine.previousElementSibling;
// grab the checkbox's name
var checkBoxName = obj.name;
console.log('Name:', checkBoxName)
// these are both grabbed relative to the
// the checkbox, so you can have as many
// of these fieldsets as you want, and
// they will not interfere with each other.
// set the out to zero
output.value = 0
if (obj.checked) { // "closed" is checked
engine.disabled = true; // hide the slider
} else {
engine.disabled = false; // otherwise, show it
}
obj.previousElementSibling.value = obj.value;
}
<fieldset>
<legend><h3>Engine</h3></legend>
<output for="engine">0</output>
<input type="range" min="0" max="10" value="0" step="1" list="0-10" oninput="outputUpdate(this)">
<input type="checkbox" name="engine-closed" onclick='handleClick(this);' value="0" /> <label for="engine-closed">Closed</label>
</fieldset>
<fieldset>
<legend><h3>Dash / Console</h3></legend>
<output for="dask-console" id="dask-console">0</output>
<input id="dash-console" type="range" min="0" max="10" value="0" step="1" list="0-10" oninput="outputUpdate(this)">
<input type="checkbox" name="dash-console-closed" onclick='handleClick(this);' value="0"><label for="dash-console-closed">Closed</label>
</fieldset>
Is there a way to link the values of a <input type="range"> and an <input type="number">?
I would like to make changes to either the slider or to the numerical input and have both fields be updated. For some reason I have only been able to get an undefined value from the range element as of yet.
Here is my current JavaScript and HTML for this part of the document:
function updateTextInput1(val) {
alert(val);
document.getElementById('num1').value = val;
}
<input class="inputRange" type="range" min="0" max="100" onchange="updateTextInput1(this.val)" />
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />
It's not working because updateTextInput1(this.val) should be updateTextInput1(this.value):
function updateTextInput1(val) {
document.getElementById('num1').value = val;
}
<input class="inputRange" type="range" min="0" max="100" onchange="updateTextInput1(this.value)" />
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />
However, I'd suggest using unobtrusive JavaScript, though.
Just attach an input event to each element. In doing so, both elements will be in sync.
var range = document.querySelector('.inputRange');
var field = document.getElementById('num1');
range.addEventListener('input', function (e) {
field.value = e.target.value;
});
field.addEventListener('input', function (e) {
range.value = e.target.value;
});
<input class="inputRange" type="range" min="0" max="100" value="0" />
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />
Or you could use a more compact approach and select the sibling element:
document.querySelector('.inputRange').addEventListener('input', updateValue);
document.getElementById('num1').addEventListener('input', updateValue);
function updateValue (e) {
var sibling = e.target.previousElementSibling || e.target.nextElementSibling;
sibling.value = e.target.value;
}
<input class="inputRange" type="range" min="0" max="100" value="0"/>
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />
To display everytime the range or input text is changing you can use oninput and onchange on the input range, and also onkeypress and onchange on the input type text :
function updateTextInput1(val) {
val = val > 100 ? 100 : val;
val = val < 0 ? 0 : val;
document.getElementById('range').value = val;
document.getElementById('num1').value = val;
}
<input class="inputRange" id="range" type="range" min="0" max="100" oninput="updateTextInput1(this.value)" onchange="updateTextInput1(this.value)" />
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" onkeypress="updateTextInput1(this.value)" onchange="updateTextInput1(this.value)" />
The error is: this.val instead of this.value
function updateTextInput1(val) {
alert(val);
document.getElementById('num1').value = val;
}
<input class="inputRange" type="range" min="0" max="100" onchange="updateTextInput1(this.value)" />
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />
You should bind event using js/jq. And to link both, you could target specific sibling element (or any other relevant transversal method):
$('.inputRange, .inputNumber').on('input', function(){
$(this).siblings('.inputRange, .inputNumber').val(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input class="inputRange" type="range" min="0" max="100" value="0"/>
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />