I have a radio button that when selected reveals a touchspin, anytime the touchspin increase or decrease button is being clicked i want the value of the radio button to be set to the value of the touch spin’s number input. I tried putting ('input.custom-vote:radio').val(value) at the bottom of the increaseValue and decreaseValue function but it still doesn't work. I will greatly appreciate any help to solve this problem.
<!--Touch-spin increase Value-->
function increaseValue() {
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('number').value = value;
}
<!--Touch-spin decrease Value-->
function decreaseValue() {
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('number').value = value;
}
<div class="custom-control custom-radio mb-3">
<input name="votes" value="0" class="form-check-input custom-control-input custom-vote" id="custom" type="radio">
<label class="custom-control-label form-check-label" for="custom">Custom Vote</label>
</div>
<div class="input-group custom-vote">
<button id="decrease" onclick="decreaseValue()" value="Decrease Value" type="button"></button>
<input type="number" maxlength="6" size="5" class="touchspin form-control custom-count" id="number" value="150">
<button id="increase" onclick="increaseValue()" value="Increase Value" type="button"></button>
</div>
This might work:
document.getElementById("custom").value = document.getElementById('number').value
Related
I have this loop, The id is unique. When I try to increment it is working for only one input field. How can I increment and decrement using unique id?
#forelse($allproduct as $key=>$data)
<tr>
<td data-label="#lang('Date')">
<div class="quantity col-md-8" style="display:flex; ">
<input type="text" value="" class="form-control req amnt display-inline" id="qtyid[{{$data->product_id}}]" min="0">
<div class="quantity-nav">
<div class="quantity-button quantity-up qty" onclick="incrementValue()">+</div>
<div class="quantity-button quantity-down qty" onclick="decrementValue()">-</div>
</div>
</div>
</td>
</tr>
#endforelse
Javascript
function incrementValue()
{
var value = parseInt(document.getElementById("qtyid").value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('qtyid').value = value;
}
function decrementValue()
{
var value = parseInt(document.getElementById('qtyid').value, 10);
value = isNaN(value) ? 0 : value;
value--;
if(value == -1) {
value = 0;
}
document.getElementById('qtyid').value = value;
}
I suggest you use an approach that doesn't need IDs.
function incrementValue(e)
{
// use the quantity field's DOM position relative to the button that was clicked
const qty = e.target.parentNode.parentNode.querySelector("input.req.amnt");
var value = parseInt(qty.value, 10);
value = isNaN(value) ? 0 : value;
value++;
qty.value = value;
}
function decrementValue(e)
{
const qty = e.target.parentNode.parentNode.querySelector("input.req.amnt");
var value = parseInt(qty.value, 10);
value = isNaN(value) ? 0 : value;
value--;
if(value == -1) {
value = 0;
}
qty.value = value;
}
#forelse($allproduct as $key=>$data)
<tr>
<td data-label="#lang('Date')">
<div class="quantity col-md-8" style="display:flex; ">
<input type="text" value="" class="form-control req amnt display-inline" min="0">
<div class="quantity-nav">
<div class="quantity-button quantity-up qty" onclick="incrementValue(event)">+</div>
<div class="quantity-button quantity-down qty" onclick="decrementValue(event)">-</div>
</div>
</div>
</td>
</tr>
#endforelse
I'm trying to increment and decrement values in a cart. I first implemented it by targeting an id, and my js code worked. But then I realized that I'll have mulitple items in the cart so I won't be able to target the IDs, so then I changed from getElementById to getElementsByClassName, but the js code no longer works. How can I solve this?
<div class="quantity">
<form>
<div class="value-button" class="decrease" onclick="decreaseValue()" value="Decrease Value">-</div>
<input type="number" class="number" value="1" />
<div class="value-button" class="increase" onclick="increaseValue()" value="Increase Value">+</div>
</form>
</div>
JS
// Increase Value //
function increaseValue() {
var value = parseInt(document.getElementsByClassName('number').value, 10);
value = isNaN(value) ? 1 : value;
value++;
document.getElementsByClassName('number').value = value;
}
// Decrease Value //
function decreaseValue() {
var value = parseInt(document.getElementsByClassName('number').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementsByClassName('number').value = value;
}
My Previous code that was working
<div class="quantity">
<form>
<div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value">-</div>
<input type="number" id="number" value="1" />
<div class="value-button" id="increase" onclick="increaseValue()" value="Increase Value">+</div>
</form>
</div>
JS
// Increase Value //
function increaseValue() {
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('number').value = value;
}
// Decrease Value //
function decreaseValue() {
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('number').value = value;
}
getElementsByClassName returns an HTMLCollection; you need to iterate over that and set the value on each contained element individually rather than trying to set the value of the HTMLCollection itself.
Or just use querySelector, like this:
// Increase Value //
function increaseValue() {
var value = parseInt(document.querySelector('.number').value, 10);
value = isNaN(value) ? 1 : value;
value++;
document.querySelector('.number').value = value;
}
// Decrease Value //
function decreaseValue() {
var value = parseInt(document.querySelector('.number').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.querySelector('.number').value = value;
}
getElementsByClassName return collection.
Instead document.getElementsByClassName('number').value you need use document.getElementsByClassName('number')[0].value
Instead of onclick in html use addEventListener.
For example you have some quantity.
<div class="quantity">
<form>
<div class="value-button" class="decrease" value="Decrease Value">-</div>
<input type="number" class="number" value="1" />
<div class="value-button" class="increase" value="Increase Value">+</div>
</form>
</div>
<div class="quantity">
<form>
<div class="value-button" class="decrease" value="Decrease Value">-</div>
<input type="number" class="number" value="1" />
<div class="value-button" class="increase" value="Increase Value">+</div>
</form>
</div>
<div class="quantity">
<form>
<div class="value-button" class="decrease" value="Decrease Value">-</div>
<input type="number" class="number" value="1" />
<div class="value-button" class="increase" value="Increase Value">+</div>
</form>
</div>
let quantities = document.getElementsByClassName('quantity');
for (let i=0; i<quantities.length; i++) {
let q = quantities[i];
let increaseElement = q.getElementsByClassName('increase')[0];
increaseElement.addEventListener('click', increaseValue, false);
function increaseValue() {
var value = parseInt(q.getElementsByClassName('number')[0].value, 10);
value++;
q.getElementsByClassName('number')[0].value = value;
}
}
I'm using the following to add + and - buttons to my WooCommerce store. It's working, except once clicked it will change every item quantity in the cart instead of just the specific product. I can't seem to solve it.
Here's the HTML:
<div class="quantity">
<label for="quantity5432">Quantity</label>
<input type="number" id="quantity5432" class="qty" step="1" min="0" name="cart[73d][qty]" value="0">
</div>
<div class="quantity-nav">
<div class="quantity-button add-action add-up">+</div>
<div class="quantity-button add-action add-down">-</div>
</div>
And here's the jQuery
$(document).ready(function() {
const minus = $('.add-down');
const plus = $('.add-up');
const input = $('.qty');
minus.click(function(e) {
e.preventDefault();
var value = input.val();
if (value > 1) {
value--;
}
input.val(value);
});
plus.click(function(e) {
e.preventDefault();
var value = input.val();
value++;
input.val(value);
})
});```
You can adjust your script to target the specific input with the class .qty by selecting this input in the minus and add click() events based on the location of the click.
$(document).ready(function() {
const minus = $('.add-down');
const plus = $('.add-up');
minus.click(function(e) {
e.preventDefault();
const input = $(this).closest(".quantity-nav").prev(".quantity").find(".qty");
var value = input.val();
if (value > 1) {
value--;
}
input.val(value);
});
plus.click(function(e) {
e.preventDefault();
const input = $(this).closest(".quantity-nav").prev(".quantity").find(".qty");
var value = input.val();
value++;
input.val(value);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="quantity">
<label for="quantity5432">Quantity</label>
<input type="number" id="quantity5432" class="qty" step="1" min="0" name="cart[73d][qty]" value="0">
</div>
<div class="quantity-nav">
<div class="quantity-button add-action add-up">+</div>
<div class="quantity-button add-action add-down">-</div>
</div>
<div class="quantity">
<label for="quantity5433">Quantity</label>
<input type="number" id="quantity5433" class="qty" step="1" min="0" name="cart[73e][qty]" value="0">
</div>
<div class="quantity-nav">
<div class="quantity-button add-action add-up">+</div>
<div class="quantity-button add-action add-down">-</div>
</div>
I have a form to add product to basket where the user need to select quantity. I'm trying to adjust the price when quantity is modified. Here's my code:
<script>
function increaseValue() {
var value = parseInt(document.getElementById('quantity').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('quantity').value = value;
}
function decreaseValue() {
var value = parseInt(document.getElementById('quantity').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('quantity').value = value;
}
</script>
<div class="quantity-container">
<span>1</span>
<div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value">-</div>
<input type="number" id="quantity" name="quantity" value="1" />
<div class="value-button" id="increase" onclick="increaseValue()" value="Increase Value">+</div>
</div>
I need to adjust the price for the following scenarios:
If quantity is increased using the 'increase' button
If quantity is decreased (but prevent zero quantity with $0.00 price)
If quantity is updated using the quantity text field
The problem is that the price is displayed using html between the numbers so i'm confused how to update the price. I assume I will have to use RegEx? I can't just hardcode the base price ($15.49 in this example) because the price is never the same (the prices come from SQL DB)
<div id="product-price">
$15<sup>.49</sup>
</div>
Use ES6's Template literals (``). Try the following:
For more: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
function increaseValue() {
var value = parseInt(document.getElementById('quantity').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('quantity').value = value;
price = '$'+`<span>${p * value}</span>`;
document.getElementById('product-price').innerHTML=price;
}
function decreaseValue() {
var value = parseInt(document.getElementById('quantity').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('quantity').value = value;
price = '$'+`<span>${p * value}</span>`;
document.getElementById('product-price').innerHTML=price;
}
var p='15.49';
var price = '$'+`<span>${p}</span>`;
document.getElementById('product-price').innerHTML=price;
<div id="myDiv">
<div class="quantity-container">
<span>1</span>
<div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value">-</div>
<input type="number" id="quantity" name="quantity" value="1" />
<div class="value-button" id="increase" onclick="increaseValue()" value="Increase Value">+</div>
</div>
<div id="product-price">
</div>
Why isn't dec() decreasing the value?
<div id="variableTest">8</div>
<label id="incButton" onclick="inc()">+</div> </br>
<label id="decButton" onclick="dec()">-</div> </br>
function dec() {
var testDec = document.getElementById("variableTest").innerHTML;
testDec--;
}
function inc() {
var testInc = document.getElementById("variableTest").innerHTML;
testInc++;
}
http://jsfiddle.net/fv6VA/8/
element.innerHTML returns a string, not a number. You should use something like this:
var element = document.getElementById("variableTest");
element_number = parseFloat(element.innerHTML);
element_number++;
element.innerHTML = element_number;
Essentially you have made a copy of innerHTML, and are just decrementing it in javascript memory. You haven't actually set the innerHTML of the variableTest node.
function dec() {
var testDec = document.getElementById("variableTest").innerHTML;
testDec--;
document.getElementById("variableTest").innerHTML = testDec;
}
UPDATE
Also, your HTML is messed up. You need to close your label properly
<div id="variableTest">8</div>
<label id="incButton" onclick="inc()">+</label> </br>
<label id="decButton" onclick="dec()">-</label> </br>
<div class="container">
<input type="button" onclick="decrementValue()" value="-" />
<input type="text" name="quantity" value="1" maxlength="2" max="10" size="1" id="number" />
<input type="button" onclick="incrementValue()" value="+" />
</div>
<script type="text/javascript">
function incrementValue()
{
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
if(value<10){
value++;
document.getElementById('number').value = value;
}
}
function decrementValue()
{
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
if(value>1){
value--;
document.getElementById('number').value = value;
}
}
</script>