Frunky Frunky - 10 days ago 4
HTML Question

Duplicate input's value when clicked to button

I have a two similar forms with input "Quantity" and buttons "-", "+".

I need to duplicate input's value to second form and back.

For example: When I'm click to "+" in first form it will be incremented.

I need to in the second form was the same value.

<div class="quantity">
<input class="subtraction" name="sub" type="button" value="-">
<input type="number" step="1" name="qty" value="1" class="input-text qty text panel-quantity" size="4" />
<input class="addition" name="add" type="button" value="+">
</div>
<div class="quantity">
<input class="subtraction" name="sub" type="button" value="-">
<input type="number" step="1" name="qty" value="1" class="input-text qty text panel-quantity" size="4"/>
<input class="addition" name="add" type="button" value="+">
</div>


JS:

$(function(){
$('.quantity').on('click', '.addition, .subtraction', function() {
var quantityPanel = $('.panel-quantity');
var quantity = $(this).closest('.quantity').find('input.qty');
var currentValue = parseInt(quantity.val());
var maxValue = parseInt(quantity.attr('max'));
var minValue = parseInt(quantity.attr('min'));

if($(this).is('.addition')) {
if(maxValue && (currentValue >= maxValue)){
quantity.val(maxValue);
} else {
quantity.val((currentValue + 1));
}
} else {
if (minValue && (currentValue <= minValue)) {
quantity.val(minValue);
} else if(currentValue > 0) {
quantity.val((currentValue - 1));
}
}
quantity.trigger('change');
});
});


I think that I can just set the same name for the INPUT, so that they work the same way.

Thanks

It's my example in jsfiddle

Answer

add $('input.qty').not(quantity).val(quantity.val()); before triggering change in the input box. and also you have add $('input.qty').not(this).val($(this).val()); in onchange listener of input.qty

$(function(){
	$('.quantity').on('click', '.addition, .subtraction', function() {
		var quantityPanel = $('.panel-quantity');
		var quantity = $(this).closest('.quantity').find('input.qty');
		var currentValue = parseInt(quantity.val());
		var maxValue = parseInt(quantity.attr('max'));
		var minValue = parseInt(quantity.attr('min'));

		if($(this).is('.addition')) {
			if(maxValue && (currentValue >= maxValue)){
				quantity.val(maxValue);
			} else {
				quantity.val((currentValue + 1));
			}
		} else {
			if (minValue && (currentValue <= minValue)) {
				quantity.val(minValue);
			} else if(currentValue > 0) {
				quantity.val((currentValue - 1));
			}
		}
    $('input.qty').not(quantity).val(quantity.val());
		quantity.trigger('change');
	});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="quantity">
<input class="subtraction" name="sub" type="button" value="-">
	<input type="number" step="1" name="qty" value="1"  class="input-text qty text panel-quantity" size="4"  />
	<input class="addition" name="add" type="button" value="+">
</div>
<div class="quantity">
		<input class="subtraction" name="sub" type="button" value="-">
		<input type="number" step="1" name="qty" value="1"  class="input-text qty text panel-quantity" size="4"/>
		<input class="addition" name="add" type="button" value="+">
		</div>

Comments