How to change quantity with plus minus buttons with plain Javascript

How to change quantity with plus minus buttons with plain Javascript - javascript

let plus_btns = document.querySelectorAll('#plus-button');
let minus_btns = document.querySelectorAll('#minus-button');
let qty_inputs = document.querySelectorAll('#quantity');
plus_btns.forEach(btn=>{
btn.addEventListener('click', ()=>{
qty_inputs.forEach(qty=>{
qty.value++
})
})
})
minus_btns.forEach(btn=>{
btn.addEventListener('click', ()=>{
qty_inputs.forEach(qty=>{
if(qty.value > 1){
qty.value--
}
else{
qty.value=0;
}
})
})
})
<div class="cart-totals">
<input type="button" value="-" id="minus-button" for="quantity">
<input type="number" id="quantity" value="1" min="0">
<input type="button" value="+" id="plus-button" for="quantity">
<input type="button" value="-" id="minus-button" for="quantity">
<input type="number" id="quantity" value="1" min="0">
<input type="button" value="+" id="plus-button" for="quantity">
</div>
How I can change value of specific quantity input ???
In my case click event triggers all inputs and change the value of each input.
Please guide me thanks.

This should do the trick.
let plus_btns = document.querySelectorAll('#plus-button');
let minus_btns = document.querySelectorAll('#minus-button');
let qty_inputs = document.querySelectorAll('#quantity');
plus_btns.forEach(btn=>{
btn.addEventListener('click', ()=>{
btn.previousElementSibling.value++;
})
})
minus_btns.forEach(btn=>{
btn.addEventListener('click', ()=>{
btn.nextElementSibling.value = (btn.nextElementSibling.value == 0) ? 0 : btn.nextElementSibling.value - 1;
})
})

Use event delegation for a single generic document wide handler. Afaik for is not a valid attribute for input type 'button', so use a data-attribute. Furthermore: element id must be unique. Fixed all that in this demo snippet:
document.addEventListener("click", handle);
function handle(evt) {
if (evt.target.type === "button") {
return handleBtn(evt.target);
}
}
function handleBtn(btn) {
const elem = document.querySelector(`#${btn.dataset.for}`);
const nwValue = +elem.value + (btn.value === "-" ? -1 : 1);
elem.value = nwValue >= +elem.min ? nwValue : elem.min;
}
<div class="cart-totals">
<input type="button" value="-" data-for="quantity1">
<input type="number" id="quantity1" value="1" min="0">
<input type="button" value="+" data-for="quantity1">
<input type="button" value="-" data-for="quantity2">
<input type="number" id="quantity2" value="1" min="1">
<input type="button" value="+" data-for="quantity2">
</div>

Using a single event handler:
var cart = document.querySelector('.cart-totals');
cart.addEventListener('click', function(ev) {
var tgt = ev.target;
if (tgt.matches('input[type="button"]')) {
var input = document.getElementById(tgt.dataset.for);
var currentValue = +input.value;
var minValue = +input.min;
if (tgt.value === '+') {
input.value = currentValue + 1;
}
else if (currentValue > minValue) {
input.value = currentValue - 1;
}
}
});
<div class="cart-totals">
<input type="button" value="-" data-for="quantity1">
<input type="number" id="quantity1" value="1" min="0">
<input type="button" value="+" data-for="quantity1">
<input type="button" value="-" data-for="quantity2">
<input type="number" id="quantity2" value="5" min="2">
<input type="button" value="+" data-for="quantity2">
</div>

Related

Increment/Decrement Counter for 3 Buttons?

I have three buttons like this on my site:
I'm trying to increment and decrement the counters but it's only working for two, the first works fine but the second is adding 2 to every increment and the third isn't working at all.
Here is the code:
$('.plus').on('click', function(e) {
var val = parseInt($(this).prev('input').val());
$(this).prev('input').val(val + 1);
console.log(val);
});
$('.minus').on('click', function(e) {
var val = parseInt($(this).next('input').val());
if (val !== 0) {
$(this).next('input').val(val - 1);
}
if (val == 0) {
$(this).next('input').val(1);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="quantitiy" for="Quantity-collection-template-new"></label>
<input class="minus minus1" type="button" value="-">
<input type="number" id="Quantity-collection-template-new" name="quantity" value="1" min="1" class="product-form__input qty" pattern="[0-9]*" data-quantity-input="">
<input class="plus plus1" type="button" value="+">
<label class="quantitiy" for="Quantity-collection-template-new"></label>
<input class="minus minus2" type="button" value="-">
<input type="number" id="Quantity-collection-template-new" name="quantity" value="1" min="1" class="product-form__input qty" pattern="[0-9]*" data-quantity-input="">
<input class="plus plus2" type="button" value="+">
<label class="quantitiy" for="Quantity-collection-template-new"></label>
<input class="minus minus3" type="button" value="-">
<input type="number" id="Quantity-collection-template-new" name="quantity" value="1" min="1" class="product-form__input qty" pattern="[0-9]*" data-quantity-input="">
<input class="plus plus3" type="button" value="+">

It's easier to answer this here.
You're using .plus1 and .plus2 but there's no .plus3 bindings on the website. Which is different from what you posted here, that's why is working, so, my advice is:
Just remove the duplicate and use the same logic here, try it again and let us know.
$('.plus').on('click', function(e) { // omitted });
$('.minus').on('click', function(e) { // omitted });
This is what you have right now on the website:
$('.plus1').on('click', function(e) {
var val = parseInt($(this).prev('input').val());
$(this).prev('input').val(val + 1);
});
$('.minus1').on('click', function(e) {
var val = parseInt($(this).next('input').val());
if (val !== 0) {
$(this).next('input').val(val - 1);
}
if (val == 0) {
$(this).next('input').val(1);
}
});
And another section;
$('.plus2').on('click', function(e) {
var val = parseInt($(this).prev('input').val());
$(this).prev('input').val(val + 1);
});
$('.minus2').on('click', function(e) {
var val = parseInt($(this).next('input').val());
if (val !== 0) {
$(this).next('input').val(val - 1);
}
if (val == 0) {
$(this).next('input').val(1);
}
});
A couple of suggestions;
Don't use the same id, create some logic to add at least an index for each id if they represent more or less the same thing. product-1 and product-2 and so on. Same Id is recipe for disaster and a no-no from the start.
Remember to update both id and for properties with unique identifiers.
minus/plus - index works.

I add the max value of three input numbers and it's worked but how to add the increment decrement button without losing the max value?

I need the addition of a three-element is 8, with click + and - button. But, I don't want that it will increase each element up to 8.
// Addtion of select items LINK - https://stackoverflow.com/questions/49644837/set-max-value-of-three-input-numbers-together
var max = 8;
var $inputs = $('input');
function sumInputs($inputs) {
var sum = 0;
$inputs.each(function() {
sum += parseInt($(this).val(), 0);
});
return sum;
}
$inputs.on('input', function(e) {
var $this = $(this);
var sum = sumInputs($inputs.not(function(i, el) {
return el === e.target;
}));
var value = parseInt($this.val(), 10) || 0;
if (sum + value > max) $this.val(max - sum);
});
//Increment Decrement value
function up(max) {
document.getElementById("myNumber").value = parseInt(document.getElementById("myNumber").value) + 1;
if (document.getElementById("myNumber").value >= parseInt(max)) {
document.getElementById("myNumber").value = max;
}
}
function down(min) {
document.getElementById("myNumber").value = parseInt(document.getElementById("myNumber").value) - 1;
if (document.getElementById("myNumber").value <= parseInt(min)) {
document.getElementById("myNumber").value = min;
}
}
function up2(max) {
document.getElementById("myNumber2").value = parseInt(document.getElementById("myNumber2").value) + 1;
if (document.getElementById("myNumber2").value >= parseInt(max)) {
document.getElementById("myNumber2").value = max;
}
}
function down2(min) {
document.getElementById("myNumber2").value = parseInt(document.getElementById("myNumber2").value) - 1;
if (document.getElementById("myNumber2").value <= parseInt(min)) {
document.getElementById("myNumber2").value = min;
}
}
function up3(max) {
document.getElementById("myNumber3").value = parseInt(document.getElementById("myNumber3").value) + 1;
if (document.getElementById("myNumber3").value >= parseInt(max)) {
document.getElementById("myNumber3").value = max;
}
}
function down3(min) {
document.getElementById("myNumber3").value = parseInt(document.getElementById("myNumber3").value) - 1;
if (document.getElementById("myNumber3").value <= parseInt(min)) {
document.getElementById("myNumber3").value = min;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="select-1">
<button type="submit" value="-" onclick=" down('0')" class="sub" id="">-</button>
<input type="number" id="myNumber" value="0" name="qty" max="8" min="0" step="1"/>
<button type="submit" value="+" onclick="up('8')" class="add">+</button>
</div>
<div class="select-2">
<button type="submit" value="-" onclick=" down2('0')" class="sub">-</button>
<input type="number" id="myNumber2" value="0" name="qty2" max="8" min="0" step="1"/>
<button type="submit" value="+" onclick="up2('8')" class="add">+</button>
</div>
<div class="select-3">
<button type="submit" value="-" onclick=" down3('0')" class="sub" id="">-</button>
<input type="number" id="myNumber3" value="0" name="qty3" max="8" min="0" step="1"/>
<button type="submit" value="+" onclick="up3('8')" class="add">+</button>
</div>
Currently, the max value is 8. I would like to get the max value with the + and - button as well.
How can I solve this with javascript or jquery?
Here, there is a link below I follow for increment and decrement.
https://stackoverflow.com/a/49645518/15412266

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>
<button type="submit" value="+" onclick="minusoperation(1)" class="minus">-</button>
<input type="number" class="numbers" id="number1" min="0" max="8" onchange="inputNumber(this)" data-prevvalue=0 />
<button type="submit" value="+" onclick="plusoperation(1)" class="plus">+</button>
<button type="submit" value="+" onclick="minusoperation(2)" class="minus">-</button>
<input type="number" class="numbers" id="number2" min="0" max="8" onchange="inputNumber(this)" data-prevvalue=0 />
<button type="submit" value="+" onclick="plusoperation(2)" class="plus">+</button>
<button type="submit" value="+" onclick="minusoperation(3)" class="minus">-</button>
<input type="number" class="numbers" id="number3" min="0" max="8" onchange="inputNumber(this)" data-prevvalue=0 />
<button type="submit" value="+" onclick="plusoperation(3)" class="plus">+</button>
</div>
<script type="text/javascript">
function inputNumber(el)
{
var myElements = document.getElementsByClassName('numbers');
var sum = 0;
for (var i=0;i<myElements.length;i++) {
if(myElements[i].value)
sum = sum+parseInt(myElements[i].value);
}
if(sum<=8)
{
el.dataset.prevvalue = el.value;
} else {
el.value = el.dataset.prevvalue;
}
}
function minusoperation(inputNumber)
{
var el = document.getElementById('number'+inputNumber);
if(parseInt(el.value))
{
el.value = parseInt(el.value)-1;
} else {
el.value = 0;
}
el.onchange();
}
function plusoperation(inputNumber)
{
var el = document.getElementById('number'+inputNumber);
if(parseInt(el.value))
{
el.value = parseInt(el.value)+1;
} else {
el.value = 1;
}
el.onchange();
}
</script>
</body>
</html>

How do I increase and decrease the addition in a span tag by click + and - buttons around input tag?

It's worked without buttons.
But how to apply input addition with help of + and - buttons.
How can I solve this with javascript or jquery?
// addition of three input in span Tag
$("input[type=number]").change(function() {
var val = 0;
//loop through each inputs
$("input[type=number]").each(function() {
//sum values
val += (isNaN(parseInt($(this).val()))) ? 0 : parseInt($(this).val());
})
//put in a span
$(".total-select").text(val);
});
function inputNumber(el) {
var myElements = document.getElementsByClassName('numbers');
var sum = 0;
for (var i = 0; i < myElements.length; i++) {
if (myElements[i].value)
sum = sum + parseInt(myElements[i].value);
}
if (sum <= 8) {
el.dataset.prevvalue = el.value;
} else {
el.value = el.dataset.prevvalue;
}
}
function minusoperation(inputNumber) {
var el = document.getElementById('number' + inputNumber);
if (parseInt(el.value)) {
el.value = parseInt(el.value) - 1;
} else {
el.value = 0;
}
el.onchange();
}
function plusoperation(inputNumber) {
var el = document.getElementById('number' + inputNumber);
if (parseInt(el.value)) {
el.value = parseInt(el.value) + 1;
} else {
el.value = 1;
}
el.onchange();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="total-select" name="4">0</span> <br>
<button type="submit" value="+" onclick="minusoperation(1)" class="minus">-</button>
<input type="number" class="numbers" id="number1" name="1" min="0" max="8" onchange="inputNumber(this)" data-prevvalue=0 value="0" />
<button type="submit" value="+" onclick="plusoperation(1)" class="plus">+</button><br>
<button type="submit" value="+" onclick="minusoperation(2)" class="minus">-</button>
<input type="number" class="numbers" id="number2" name="2" min="0" max="8" onchange="inputNumber(this)" data-prevvalue=0 value="0" />
<button type="submit" value="+" onclick="plusoperation(2)" class="plus">+</button>
How to get an answer at runtime by clicking the buttons around them.
I also have a separate code for the increase and decrease buttons.

This is what I actually want. The sum of three input displayed in the span tag.
// addition of three input in span Tag
// $("input[type=number]").change(function() {
// var val = 0;
// //loop through each inputs
// $("input[type=number]").each(function() {
// //sum values
// val += (isNaN(parseInt($(this).val()))) ? 0 : parseInt($(this).val());
// })
// //put in span
// $(".total-select").text(val);
// });
function inputNumber(el) {
var myElements = document.getElementsByClassName('numbers');
var sum = 0;
for (var i = 0; i < myElements.length; i++) {
if (myElements[i].value)
sum = sum + parseInt(myElements[i].value);
}
if (sum <= 8) {
el.dataset.prevvalue = el.value;
//add ID of SPAn tag for getting the addtion of total inputs
document.getElementById("total").innerHTML = sum;
} else {
el.value = el.dataset.prevvalue;
}
}
function minusoperation(inputNumber) {
var el = document.getElementById('number' + inputNumber);
if (parseInt(el.value)) {
el.value = parseInt(el.value) - 1;
} else {
el.value = 0;
}
el.onchange();
}
function plusoperation(inputNumber) {
var el = document.getElementById('number' + inputNumber);
if (parseInt(el.value)) {
el.value = parseInt(el.value) + 1;
} else {
el.value = 1;
}
el.onchange();
}
<span class="total-select" name="4" id="total">0</span> <br>
<button type="submit" value="+" onclick="minusoperation(1)" class="minus">-</button>
<input type="number" class="numbers" id="number1" name="1" min="0" max="8" onchange="inputNumber(this)" data-prevvalue=0 value="0" disabled/>
<button type="submit" value="+" onclick="plusoperation(1)" class="plus">+</button><br>
<button type="submit" value="+" onclick="minusoperation(2)" class="minus">-</button>
<input type="number" class="numbers" id="number2" name="2" min="0" max="8" onchange="inputNumber(this)" data-prevvalue=0 value="0" disabled/>
<button type="submit" value="+" onclick="plusoperation(2)" class="plus">+</button><br>
<button type="submit" value="+" onclick="minusoperation(3)" class="minus">-</button>
<input type="number" class="numbers" id="number3" name="3" min="0" max="8" onchange="inputNumber(this)" data-prevvalue=0 value="0" disabled/>
<button type="submit" value="+" onclick="plusoperation(3)" class="plus">+</button>

How to get values of multiple append textbox?

I have a textbox that can be append.. and i want to get the values of each textbox
$('#entryData').append('<div><input type="text" id="quantity"></div>');
var total = $('#quantity').val();
console.log(total);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="entryData">
<input type="text" id="quantity">
<input type="button" value="+">
<input type="button" value="Total">
</div>
but I am only getting the first textbox value and not the other textbox

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id='entryData' >
<input type="text" class='quantity'>
<input type="button" value="+" id='add'>
<input type="button" value="Total" id='total'>
</div>
<script>
$(document).ready(function(){
$('#add').click(function(){
$('#entryData').append('<div><input type="text" class="quantity"></div>');
});
$('#total').click(function(){
var total=0;
$('.quantity').each(function(index,quantity){
total=total+parseInt($(this).val());
});
alert(total);
});
});
</script>
I expect this is what you are trying to do?

Or make it like this:
<div id='entryData' >
<input type="number" class='quantity'>
<input type="button" value="+" id='add'>
<input type="button" value="Total" id='total'>
</div>
If you expect numbers - make the field number.
//this should come from helper method file/lib - for reusability
const sum = (accumulator, currentValue) => accumulator + currentValue;
const mapToInt = (idx,element) => { if (element.value !== "") { return parseInt(element.value, 10); } }
$(document).ready(() =>{
$('#add').click( () => {
$('#entryData').append('<div><input type="number" class="quantity" /></div>');
});
$('#total').click( () => {
let total = $(".quantity").map(mapToInt).get().reduce(sum);
console.log ( total );
});
});
Edit: sum (aggregation func) and mapToInt can be reused if you consider having more functional approach.

WooCommerce Add To Cart Button text change using jQuery if Quantity increase

WooCommerce Add To Cart Button text change using jQuery if Quantity increase.
jQuery(document).on("change",'.minus', function() {
var productquantity = jQuery('.qty').attr('value');
if (productquantity == 15) {
jQuery('.single-product').each(function() {
jQuery(".single_add_to_cart_button").text("REQUEST A QUOTE");
});
}
})
While selecting buttons value never changes :S
HTML FOR BUTTON AND SELECTOR
<div class="quantity buttons_added">
<input type="button" value="-" class="minus button is-form"><input type="number" step="1" min="1" max="9999" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric"><input type="button" value="+" class="plus button is-form"></div>
<button type="submit" name="add-to-cart" value="1520" class="single_add_to_cart_button button alt" style="display: block !important">Add to Cart</button>
jsFiddle

$(document).ready(function ()
{
$('body').on("click",'.minus',function ()
{
var qtyval = $('.qty').val();
if(qtyval >= 0)
{
var newQTY = parseInt(qtyval) - parseInt(1);
if(newQTY >= 15)
{
$('.single_add_to_cart_button').text("Request a Quote");
}
if(newQTY < 15)
{
$('.single_add_to_cart_button').text("Add to Cart");
}
$('.qty').val(newQTY);
}
});
$('body').on("click",'.plus',function ()
{
var qtyval = $('.qty').val();
var newQTY = parseInt(qtyval) + parseInt(1);
if(newQTY >= 15)
{
$('.single_add_to_cart_button').text("Request a Quote");
}
$('.qty').val(newQTY);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="quantity buttons_added">
<input type="button" value="-" class="minus button is-form"><input type="number" step="1" min="1" max="9999" name="quantity" value="1" title="Qty"
class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric"><input type="button" value="+" class="plus button is-form"></div>
<button type="submit" name="add-to-cart" value="1520" class="single_add_to_cart_button button alt" style="display: block !important">Add to Cart</button>

jQuery(document).on("click",'.plus, .minus', function() {
var productquantity = jQuery('.qty').attr('value');
if (productquantity == 15) {
jQuery('.single-product').each(function() {
jQuery(".single_add_to_cart_button").text("REQUEST A QUOTE");
});
} else if(productquantity != 15) {
jQuery('.single-product').each(function() {
jQuery(".single_add_to_cart_button").text("ADD TO CART NOW");
});
}
})
Only problem was on change to onclick.

Develop Reference

JavaScript is the programming language of the Web.

How to change quantity with plus minus buttons with plain Javascript - javascript

Related

Increment/Decrement Counter for 3 Buttons?

I add the max value of three input numbers and it's worked but how to add the increment decrement button without losing the max value?

How do I increase and decrease the addition in a span tag by click + and - buttons around input tag?

How to get values of multiple append textbox?

WooCommerce Add To Cart Button text change using jQuery if Quantity increase

Categories

Resources