JQuery function does not respect clicked component - javascript

I have a product page where you can make customizations to the product such as adding or removing "ingredients" and for each customization that can be added or removed I create an input with a + and - button to increase or decrease my choice.
I inform via parameter to the javascript function the component (input) that will receive the increment or decrement, the maximum value that can be increased, the minimum value (decrement) and the increment interval.
However, for each possible customization in the product I must present a component like this:
<div class="qty mt-5">
<span class="minus" name="diminuir[]" onclick="AumentaDiminui('qty_4', 0, 5, 1)">-</span>
<input type="number" class="count" name="qty_4" value="0" step="1" max="5" min="0">
<span class="plus" name="aumentar[]" onclick="AumentaDiminui('qty_4', 0, 5, 1)">+</span>
</div>
And this is my java script function that should add or subtract the value and present it in the correct input
<script>
function AumentaDiminui(controle, valorMinimo, valorMaximo, valorIncremento) {
$(document).ready(function () {
$('[name="aumentar[]"]').click(function () {
if ($("[name=" + controle + "]").val() == valorMaximo)
return;
$("[name=" + controle + "]").val(parseInt($("[name=" + controle + "]").val()) + valorIncremento);
});
$('[name="diminuir[]"]').click(function () {
if ($("[name=" + controle + "]").val() <= valorMinimo) {
$("[name=" + controle + "]").val(valorMinimo);
return;
}
$("[name=" + controle + "]").val(parseInt($("[name=" + controle + "]").val()) - valorIncremento);
});
});
}
</script>
It turns out that the value is not incremented by 1 in 1 as I inform via parameter and if I have more than one component on the screen, when clicking on + or - the value of all inputs are changed regardless of the button I click on

A few comments about your code:
If jquery will handle the click events on the <span>, one should not define a onclick event in the span tag.
There is no need to define a function. You can just wait for the ready event and then monitor for clicks on both <span> (using the jquery .click() function).
You can access the values of min and max value defined in the <input> using the jquery .attr() function.
This is a working code:
$(document).ready(function () {
$('.qty .minus, .qty .plus').click(function () {
var input = $(this).parent().find('input[type=number]');
var newVal = +input.val();
var step = +input.attr('step');
if ($(this).hasClass('plus')){
newVal += step;
} else {
newVal -= step;
}
var min = input.attr('min');
var max = input.attr('max');
if (newVal > max) {
newVal = max;
} else if (newVal < min){
newVal = min;
}
input.val(newVal);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Step: 1</p>
<div class="qty mt-5">
<span class="minus">-</span>
<input type="number" class="count" value="0" step="1" max="5" min="0">
<span class="plus">+</span>
</div>
<p>Step: 2</p>
<div class="qty mt-5">
<span class="minus">-</span>
<input type="number" class="count" value="0" step="2" max="5" min="0">
<span class="plus">+</span>
</div>

There is a much easier way to do this, with just a few data-* attributes. This will work on any number of div elements with these attributes and a plus and minus button.
$('.qty').on('click','.minus', function(){
var $parent = $(this).parent();
var min = $parent.data('min');
var inc = $parent.data('inc');
var $input = $(this).siblings('.count');
var val = parseInt($input.val(),10);
if(val > min)
$input.val(val - inc);
})
$('.qty').on('click','.plus', function(){
var $parent = $(this).parent();
var max = $parent.data('max');
var inc = $parent.data('inc');
var $input = $(this).siblings('.count');
var val = parseInt($input.val(),10);
if(val < max)
$input.val(val + inc);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="qty mt-5" data-min="0" data-max="5" data-inc="1">
<span class="minus">-</span>
<input type="number" class="count" name="qty_4" value="0" step="1" max="5" min="0">
<span class="plus" name="aumentar[]">+</span>
</div>
<div class="qty mt-5" data-min="0" data-max="100" data-inc="5">
<span class="minus">-</span>
<input type="number" class="count" name="qty_4" value="0" step="1" max="5" min="0">
<span class="plus" name="aumentar[]">+</span>
</div>
You could also choose to read min, max and step from the input if you prefered with much the same logic.

create an jquery extension
(function($){
$.fn.AumentaDiminui = function(options) {
var settings = $.extend({ control: null, minvalue:1, maxvalue: 5 , action:'+' }, options );
var curval = $(settings .control).val ();
if ('+'==settings.action){
if (curval==settings.maxvalue) return;
curval++;
}
else {
if (curval==settings.minvalue) return;
curval++;
}
$(settings .control).val (curval);
};
}(jQuery));
call so as
$('div.qty.mt-5 span.minus').click(function (){ $.fn.AumentaDiminui({ action:'-', control:'div.qty.mt-5 input.count' }); });
$('div.qty.mt-5 span.plus').click(function (){ $.fn.AumentaDiminui({ action:'+', control:'div.qty.mt-5 input.count' }); });

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.

Prevent submit form when using jQuery to change input number field [duplicate]

This question already has answers here:
How to prevent buttons from submitting forms
(20 answers)
Closed 1 year ago.
We use the following code to change the input number value, using button up and down.
But when we clicking the increase or decrease button, it also submits the form.
How can we prevent it from submitting the form?
HTML:
<form action="url" method="post" id="product_addtocart_form" novalidate="novalidate">
<div class="field qty">
<div class="control quantity">
<input type="number"
name="qty"
id="qty"
min="1"
size="number"
value="<?= $block->getProductDefaultQty() * 1 ?>"
title="<?= $block->escapeHtmlAttr(__('Qty')) ?>"
class="input-text qty"
data-validate="<?= $block->escapeHtml(json_encode($block->getQuantityValidators())) ?>"
/>
<div class="quantity-nav"><button class="quantity-button quantity-up"><i class="far fa-angle-up"></i></button><button class="quantity-button quantity-down"><i class="far fa-angle-down"></i></button></div>
</div>
</div>
</form>
jQuery:
<script>
require(['jquery'], function ($) {
$('.quantity').each(function() {
var spinner = $(this),
input = spinner.find('#qty'),
btnUp = spinner.find('.quantity-up'),
btnDown = spinner.find('.quantity-down'),
min = input.attr('min'),
max = input.attr('max');
btnUp.click(function() {
var oldValue = parseFloat(input.val());
if (oldValue >= max) {
var newVal = oldValue;
} else {
var newVal = oldValue + 1;
}
spinner.find("#qty").val(newVal);
});
btnDown.click(function() {
var oldValue = parseFloat(input.val());
if (oldValue <= min) {
var newVal = oldValue;
} else {
var newVal = oldValue - 1;
}
spinner.find("#qty").val(newVal);
});
});
});
</script>
Just use the type attribute within button tag.<button type="button" class="quantity-button quantity-up">
change button type from adding type="button" , your code will work fine

Jquery send form POST change value of inputs if collapse = false

Hi i'm trying to make a validation on my form and change the values that send through form if a collapse element(of that value) = False to a null value (i'm still kinda new to javascript and Jquery).
if (document.getElementById("filter_form")) {
var slider1 = document.getElementById("price_min");
var slider2 = document.getElementById("price_max");
output1.value = slider1.value; // Display the default slider value
output2.value = slider2.value;
output1.oninput = function() {
slider1.value = this.value;
}
output2.oninput = function() {
slider2.value = this.value;
}
// Update the current slider value (each time you drag the slider handle)
slider1.oninput = function() {
output1.value = this.value;
}
slider2.oninput = function() {
output2.value = this.value;
}
}
$(document).ready(function() {
$('#search').click(function(event) {
if ($('#price').attr("aria-expanded") == "true") {
var price_min = Number($('#price_min').val());
var price_max = Number($('#price_max').val());
} else {
var price_min = null;
var price_max = null;
$('#price_min').value = null;
$('#price_max').value = null;
}
if (price_min > price_max) {
event.preventDefault();
iziToast.warning({
title: 'Fail!',
message: 'min price cant be larger than max price',
position: 'bottomRight'
}); //my alert
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js"></script>
<form method="POST" action="/search_url/'">
<div class="form-group">
<p>
<button id="price" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample-1" aria-expanded="false" aria-controls="collapseExample-1" style="width: 100%">
Price
</button>
</p>
<div class="collapse" id="collapseExample-1">
<div>Min: <input type="number" id="price_min_value" min="0" max="100000000000" value="0" /></div>
<input type="range" id="price_min" class="form-control" min="0" max="100000000000" value="0" name="price_min">
<div>Max: <input type="number" id="price_max_value" min="0" max="100000000000" value="100000000000" /></div>
<input type="range" id="price_max" class="form-control" min="0" max="100000000000" value="100000000000" name="price_max">
</div>
</div>
<button class="btn btn-primary mr-1" id="search">Search</button>
</form>
On the server when i received the data from POST request with collapse flase, i got price_min = '0' and price_max ='100000000000'
Expected results:
It should be price_min = null and price_max = null
I don't know why it doesn't set the POST data equal NULL, and i don't know why.
EDIT:
ok this is weird when i change my set value code to:
$('#price_min').val("");
$('#price_max').val("");
and send the form post it return server to the value equal to the middle value of the range input(50000000000), but when i tried to do this:
$('#price_min').val("1234");
$('#price_max').val("12345");
and on the server i actually got the changed value of price_min = 1234 and price_max = 12345
why does this work? but when i try to set it value or null or none it doesn't work and just take the middle value of the range input?
I'm so confused
Thank for reading
You are setting value with .value but in jQuery we use .val() and set value as 0 instead of null as number type input does not accept null. Change the logic at server side to check if value is 0 instead of null.
Also, use preventDefault as first line in the search button click so that button will not submit the form directly.
See below code
$(document).ready(function() {
$('#search').click(function(event) {
event.preventDefault(); // it will prevent default behavior of button clicked
console.log('button clicked');
if ($('#price').attr("aria-expanded") == "true") {
var price_min = new Number($('#price_min').val());
var price_max = new Number($('#price_max').val());
} else {
var price_min = 0;
var price_max = 0;
$('#price_min').val(price_min);
$('#price_max').val(price_max);
}
if (price_min > price_max) {
iziToast.warning({
title: 'Fail!',
message: 'min price cant be larger than max price',
position: 'bottomRight'
}); //my alert
} else {
$("#searchForm").submit();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js"></script>
<form method="POST" action="/search_url/'" id="searchForm">
<div class="form-group">
<p>
<button id="price" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample-1" aria-expanded="false" aria-controls="collapseExample-1" style="width: 100%">
Price
</button>
</p>
<div class="collapse" id="collapseExample-1">
<div>Min: <input type="number" id="price_min_value" min="0" max="100000000000" value="0" /></div>
<input type="range" id="price_min" class="form-control" min="0" max="100000000000" value="0" name="price_min">
<div>Max: <input type="number" id="price_max_value" min="0" max="100000000000" value="100000000000" /></div>
<input type="range" id="price_max" class="form-control" min="0" max="100000000000" value="100000000000" name="price_max">
</div>
</div>
<button class="btn btn-primary mr-1" id="search">Search</button>
</form>

How to display the total number of quantity in the input box

I have a quantity field. The user can add multiple quantity fields on click on Add button.
My issue is, I have to display the total number of quantity in the input box. for example I added 10 quantity in the quantity box and the total is 10 in the total box.
The user can increase and decrease the quantity on click on plus and minus button as well as direct enter then quantity in the quantity box and total will display in the total box.
The user can add multiple quantities field same as on remove. I click on to remove the quantity should be removed from the total quantity field.
You can also check my code here as well https://jsfiddle.net/pu6qy4zr/70/
function increaseValue(n) {
var value = parseInt(document.getElementById('number' + n).value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('number' + n).value = value;
}
function decreaseValue(n) {
var value = parseInt(document.getElementById('number' + n).value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('number' + n).value = value;
}
$(document).ready(function() {
var max_fields = 20; //maximum input boxes allowed
var wrapper = $(".add_row"); //Fields wrapper
var add_button = $(".add_row_click"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
$("input[id^=medication_name]").focus();
$(wrapper).append('<div class="custom_fields"><div class="col-md-6"><div class="row"><div class="col-md-6"><div class="form_group"><div class="plus_minus"><span class="value_button decrease" onclick="decreaseValue(' + x + ')" value="Decrease Value"> - </span><input type="number" id="number' + x + '" class="qty_number form_control" name="qty_number[]" class="form_control" value="0" /><span class="value_button increase" onclick="increaseValue(' + x + ')" value="Increase Value"> + </span></div></div></div><div class="col-md-6"><div class="form_group"> <div class="btn_row remove_field"> <span> - </span> Remove </div></div></div></div></div></div></div>');
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).closest('.custom_fields').remove();
x--;
})
});
<div class="add_row">
<div class="plus_minus">
<span class="value_button decrease" onclick="decreaseValue(1)" value="Decrease Value">-</span>
<input type="number" id="number1" class="qty_number form_control" name="qty_number[]" value="0" class="form_control" />
<span class="value_button increase" onclick="increaseValue(1)" value="Increase Value">+</span>
</div>
<div class="btn_row add_row_click"> <span> + </span> Add </div>
</div>
<input type="text" class="form_control" name="total_qty" id="total_qty" value="" placeholder="Total number of quantity" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
You can simplify all this.
run sum() on each change including the remove and direct input/paste.
only have one event handler for the plus/minus
remove the inline handlers
PS: I found a bug: value < 1 ? value = 1 : ''; would force a value of 1
PPS: I suggest you use .clone for the div instead of inserting it. Makes it much easier to update the HTML. Since I delegate and use relative addressing, you do not need to change the IDs of the fields
function sum() {
var total = 0;
$(".qty_number").each(function() { // or use .map.get()
total += this.value?parseInt(this.value):0;
})
$("#total_qty").val(total);
}
$(document).ready(function() {
var max_fields = 20; //maximum input boxes allowed
var $wrapper = $(".add_row"); //Fields wrapper
var add_button = $(".add_row_click"); //Add button ID
var x = 1; //initlal text box count
$(add_button).on("click",function(e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
$("input[id^=medication_name]").focus();
$wrapper.append('<div class="custom_fields"><div class="col-md-6"><div class="row"><div class="col-md-6"><div class="form_group"><div class="plus_minus"><span class="value_button decrease" value="Decrease Value"> - </span><input type="number" id="number' + x + '" class="qty_number form_control" name="qty_number[]" class="form_control" value="0" /><span class="value_button increase" value="Increase Value"> + </span></div></div></div><div class="col-md-6"><div class="form_group"> <div class="btn_row remove_field"> <span> - </span> Remove </div></div></div></div></div></div></div>');
}
});
$wrapper.on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).closest('.custom_fields').remove();
x--;
sum(); // remove also updates the total
})
$wrapper.on("click",".value_button",function() {
var $input = $(this).closest(".plus_minus").find(".qty_number");
var value = parseInt($input.val(), 10);
value = isNaN(value) ? 0 : value;
value+=$(this).is(".decrease")?-1:1; // decrease on increase dependent on class
if (value < 0) value=0;
$input.val(value);
sum(); // sum each time
});
$wrapper.on("input",".qty_number",sum); // any input or paste
});
<div class="add_row">
<div class="plus_minus">
<span class="value_button decrease" value="Decrease Value">-</span>
<input type="number" id="number1" class="qty_number form_control" name="qty_number[]" value="0" class="form_control" />
<span class="value_button increase" value="Increase Value">+</span>
</div>
<div class="btn_row add_row_click"> <span> + </span> Add </div>
</div>
<input type="text" class="form_control" name="total_qty" id="total_qty" value="" placeholder="Total number of quantity" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Calculating price from <span> value and <input> value

Today I try to calculating the price from <span> value and <input> value. And then, put the result in <span>.
I already tried this code. This is my html:
<td class="cart-product-price">
<span id="price" class="amount">19.99</span>
</td>
<td class="cart-product-quantity">
<div class="quantity clearfix">
<input type="button" value="-" class="minus" field="quantity">
<input type="text" id="quantity" name="quantity" value="2" class="qty" />
<input type="button" value="+" class="plus" field="quantity">
</div>
</td>
<td class="cart-product-subtotal">
<span id="total" class="amount"></span>
</td>
So I want to get price value from <span id="price>, get quantity from <input type="text" id="quantity" name="quantity">, and put the result in <span id="total" class="amount"></span>
This is my script code:
<script type="text/javascript">
var price = parseFloat($('#price').val()) || 0;
var qty = parseInt($('input[name=quantity]').val());
var total = price*qty;
$('#total').text(total);
</script>
Note: I am using JQuery for increase / decrease quantity (plus & minus button)
Did I wrote something wrong?
Thanks
UPDATE
This is my increase / decrease javascript code:
<script type="text/javascript">
jQuery(document).ready(function(){
// This button will increment the value
$('.plus').click(function(e){
// Stop acting like a button
e.preventDefault();
// Get the field name
fieldName = $(this).attr('field');
// Get its current value
var currentVal = parseInt($('input[name='+fieldName+']').val());
// If is not undefined
if (!isNaN(currentVal)) {
// Increment
$('input[name='+fieldName+']').val(currentVal + 1);
} else {
// Otherwise put a 0 there
$('input[name='+fieldName+']').val(0);
}
});
// This button will decrement the value till 0
$(".minus").click(function(e) {
// Stop acting like a button
e.preventDefault();
// Get the field name
fieldName = $(this).attr('field');
// Get its current value
var currentVal = parseInt($('input[name='+fieldName+']').val());
// If it isn't undefined or its greater than 0
if (!isNaN(currentVal) && currentVal > 0) {
// Decrement one
$('input[name='+fieldName+']').val(currentVal - 1);
} else {
// Otherwise put a 0 there
$('input[name='+fieldName+']').val(0);
}
});
});
</script>
The 'price' field is a span, which do not have a value property. Instead, you need to read the text() from it. Also note that the 'quantity' field has an id, so you would be better to use that as a selector as it's much faster. Try this:
var price = parseFloat($('#price').text()) || 0;
var qty = parseInt($('#quantity').val());
var total = price * qty;
$('#total').text(total);
Working example
var price = parseFloat($('#price').text()) || 0; //parseFloat($('#price').val()) || 0;
var qty = parseInt($('input[name=quantity]').val());
var total = price * qty;
$('#total').text(total);
The .val() method is primarily used to get the values of form elements such as input , select and textarea
FIDDLE DEMO
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
.active {
color:red;
}
</style>
<script>
$(document).ready(function () {
var price = parseFloat($('#price').text()) || 0;
var qty = parseInt($('input[name=quantity]').val());
var total = price * qty;
$('#total').text(total);
});
</script>
</head>
<body>
<table>
<tr>
<td class="cart-product-price">
<span id="price" class="amount">19.99</span>
</td>
<td class="cart-product-quantity">
<div class="quantity clearfix">
<input type="button" value="-" class="minus" field="quantity">
<input type="text" id="Text1" name="quantity" value="2" class="qty" />
<input type="button" value="+" class="plus" field="quantity">
</div>
</td>
<td class="cart-product-subtotal">
<span id="total" class="amount"></span>
</td>
</tr>
</table>
</body>
</html>

Categories

Resources