So I'm trying to make the first input = the same as the second input on change, the arrows accomplish this, but the buttons which also change the second input doesn't pass on the value to the first input
working jsfiddle - https://jsfiddle.net/ryoLvedx/1/
function passonvalue(value) {
return (value);
}
$('[name="quantity2"]').on('change', function() {
value = $(this).val();
$('[name="quantity"]').val(passonvalue(value));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="QuantitySelector__CurrentQuantity" pattern="[0-9]*" name="quantity" value="1">
<input type="button" class="QuantitySelector__Button Link Link--secondary second-quantity" value="-" onclick="this.parentNode.querySelector('input[type=number]').stepDown()" />
<input class="quantity" min="10" step="10" name="quantity2" value="10" type="number" />
<input type="button" class="QuantitySelector__Button Link Link--secondary second-quantity" value="+" onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus"/>
Related
jQuery, disable all others input on same class if sum of all value more than x
How to disable "HTML input box" which not empty node when the sum of any input box has value. I want to calculate some of any input field and disable any others if the sum is greater than x.
For example to this code:
second field = 5
forth field = 10,
sum is 15
first field and third field should be disabled
$('.inputReward').on('input',function() {
//$(this).next().not(this).prop('disabled', this.value.length)
var sum=0;
$('.inputReward').each(function () {
sum += +$(this).val();
if(sum>15) //15 is maximum value
$(this).next().not(this).prop('disabled', true);
else
$(this).next().not(this).prop('disabled', false);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" name="sRewards" value="" class="inputReward" />
<input type="number" name="sReward1" value="" class="inputReward" />
<input type="number" name="sReward2" value="" class="inputReward" />
<input type="number" name="sReward3" value="" class="inputReward" />
But now i just can do only disable all next input field of a last not empty node.
I think this is my best solution :)
$('.inputReward').on('input',function() {
//$(this).next().not(this).prop('disabled', this.value.length)
var sum=0;
$('.inputReward').each(function () {
sum += +$(this).val();
});
if(sum>=15)
$(this).siblings().not(this).prop('disabled', true);
else
$(this).siblings().not(this).prop('disabled', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" name="sRewards" value="" class="inputReward" />
<input type="number" name="sReward1" value="" class="inputReward" />
<input type="number" name="sReward2" value="" class="inputReward" />
<input type="number" name="sReward3" value="" class="inputReward" />
I have a event that's triggered when the number value changes in the <input type="number"> one below:
<input type="number" inputmode="numeric" pattern="[0-9]*" size="4" class="lorem" value="0" step="1">
<input type="button" class="minus" value="-">
<input type="button" class="plus" value="+">
It works fine.
However, I have plus/minus buttons below it. These buttons increase/decrease the value but when that happens, the event is never triggered. Why?
How can I make it so that the event is triggered?
I think you need below code for update value in input box by clicking on plus and minus button.
$(".minus,.plus").on('click',function(){
if($(this).val()=="-")
{
var incr=-1;
}
else
{
var incr=1;
}
$(".lorem").val(parseInt($(".lorem").val())+incr);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="number" inputmode="numeric" pattern="[0-9]*" size="4" class="lorem" value="0" step="1">
<input type="button" class="minus" value="-">
<input type="button" class="plus" value="+">
After you change a value with plus/minus buttons, you need to fire a change event on that numeric field. It would look something like this:
$(".minus").click(function() {
var $numberField = $("input[type=number]");
// Assign a new value to the field and fire change event
$numberField.val("1").change();
})
If you need some more help, please upload your JavaScript code.
I have been trying toincrease and decrease value of 'val' class and i'll use them more than once in one page. Also i need to set MIN and MAX values for them.
<input type="button" value="-" class="decreaseVal">
<input type="number" min ="1" max="22" value="20" class="val" disabled>
<input type="button" value="+" class="increaseVal">
// JS CODE THAT I TRY
$(".decreaseVal").click(function() {
var num = $(this).next('input').val();
});
$(".increaseVal").click(function() {
var num = $(this).prev('input').val();
});
I can get their values but i am not able to change them. Any advice guys?
try this
$(".decreaseVal").click(function() {
var input_el=$(this).next('input');
var v= input_el.val()-1;
if(v>=input_el.attr('min'))
input_el.val(v)
});
$(".increaseVal").click(function() {
var input_el=$(this).prev('input');
var v= input_el.val()*1+1;
if(v<=input_el.attr('max'))
input_el.val(v)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="-" class="decreaseVal">
<input type="number" min="1" max="22" value="20" class="val" disabled>
<input type="button" value="+" class="increaseVal">
I have this HTML that occurs multiple times on a page:
<div class="canteen-item">
<div class="col-l">
<h4>Chicken Sandwich</h4>
<p>$<span class="canteen-price">3.50</span></p>
</div>
<div class="col-r">
<div class="qty-days">
<input name="Mon" class="qty-input" value="0" maxlength="2" />
<input name="Tue" class="qty-input" value="0" maxlength="2" />
<input name="Wed" class="qty-input" value="0" maxlength="2" />
<input name="Thu" class="qty-input" value="0" maxlength="2" />
<input name="Fri" class="qty-input" value="0" maxlength="2" />
</div>
</div>
</div>
I have this JQuery to detect when the input field is changed and if the value is greater than 0, change the color to red.
$(".qty-input").change(function(){
var qty = parseInt($(this).val());
if(qty > 0){
$(this).css('color','red');
}
else{
$(this).css('color','black');
}
});
It is behaving very unpredictably. When I change the value of the first input field (Monday), it makes all 5 inputs red. Then sometimes it is changing the colors back to black in completely different rows sets of days. Seems like a simple problem to fix, but having trouble figuring it out.
The problem is that this code:
var qty = $(this).val();
Returns a string. And this code compares that string to a Number
if(qty > 0){
Try changing the first line of code to:
if ($(this).val()) {
var qty = parseInt($(this).val(), 10);
}
And it should start to work more consistently but you will also want to validate that the input is all numbers.
Thanks for all the responses. It prompted me to dig deeper at which point I discovered another piece of code in a different JS file that was trying (incorrectly!) to do the same thing. The code I have above is in fact sound and works perfectly. I apologize for wasting anyone's time here. I didn't realize that my client had a developer who had already attempted to do this (and who also put the code in the wrong file).
Use change event target to get to the element
$(document).ready(function() {
$(".qty-input").change(function(e) {
var target = e.target;
var qty = $(target).val();
if (qty > 0) {
$(target).css('color', 'red');
} else {
$(target).css('color', 'black');
}
alert("value is " + qty)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="canteen-item">
<div class="col-l">
<h4>Chicken Sandwich</h4>
<p>$<span class="canteen-price">3.50</span>
</p>
</div>
<div class="col-r">
<div class="qty-days">
<input type="text" name="Mon" class="qty-input" value="0" maxlength="2" />
<input type="text" name="Tue" class="qty-input" value="0" maxlength="2" />
<input type="text" name="Wed" class="qty-input" value="0" maxlength="2" />
<input type="text" name="Thu" class="qty-input" value="0" maxlength="2" />
<input type="text" name="Fri" class="qty-input" value="0" maxlength="2" />
</div>
</div>
</div>
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