Change input number by step on button click - php

Question

I have the following code in my functions.php file, however the script does not seem to be doing what it is intended to do.
My plus and minus buttons have classes .plus and my .minus respectively.
PHP / JQuery :
/*
========================================
Change qty by step on button click
========================================
*/
function kia_add_script_to_footer(){ ?>
<script>
jQuery(document).ready(function(){
jQuery(document).on('click', '.plus', function(e) { // replace '.quantity' with document (without single quote)
$input = jQuery(this).siblings('.quantity .qty');
var val = parseInt($input.val());
var step = $input.attr('step');
step = 'undefined' !== typeof(step) ? parseInt(step) : 0.5;
$input.val( val + step ).change();
});
jQuery(document).on('click', '.minus', // replace '.quantity' with document (without single quote)
function(e) {
$input = jQuery(this).siblings('.quantity .qty');
var val = parseInt($input.val());
var step = $input.attr('step');
step = 'undefined' !== typeof(step) ? parseInt(step) : 0.5;
if (val > 0) {
$input.val( val - step ).change();
};
});
});
</script>
<?php };
add_action( 'wp_footer', 'kia_add_script_to_footer' );
Any help would be greatly appreciated!
EDIT: Apologies for the bland question. I have erased the generic input arrows for input.qty and added two buttons (.minus and .plus). What is meant to happen, is that on click of either .minus or .plus, the input.qty number should decrease or increase by var step amount.
As for the question of whether .qty is nested inside of .quantity, that would be correct. I was not sure if maybe .qty was being used elsewhere, so to confirm my coding was correct, I added the parent element's class.
HTML :
<div class="quantity">
<input class="minus" value="-" type="button">
<input class="input-text qty text" step="0.5" min="0.5" max="10" name="quantity" value="0" title="Qty" size="4" pattern="[0-9]*" inputmode="numeric" type="number">
<input class="plus" value="+" type="button">
<span>press - or + to add/remove meterage per half meter</span>
</div>

Answer 1

You need to use parseFloat() instead of parseInt()
Note: I've changed
step = 'undefined' !== typeof(step) ? parseInt(step) : 0.5;
to
step = step != null ? parseFloat(step) : 0.5;
only in the "plus function" to show another way how you could check the value.
jQuery(document).ready(function(){
jQuery(document).on('click', '.plus', function(e) {
$input = jQuery(this).siblings('.quantity .qty');
var val = parseFloat($input.val());
var step = $input.attr('step');
step = step != null ? parseFloat(step) : 0.5;
$input.val( val + step );
});
jQuery(document).on('click', '.minus', // replace '.quantity' with document (without single quote)
function(e) {
$input = jQuery(this).siblings('.quantity .qty');
var val = parseFloat($input.val());
var step = $input.attr('step');
step = 'undefined' !== typeof(step) ? parseFloat(step) : 0.5;
if (val > 0) {
$input.val( val - step ).change();
};
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="quantity">
<input class="minus" value="-" type="button">
<input class="input-text qty text" step="0.5" min="0.5" max="10" name="quantity" value="0" title="Qty" size="4" pattern="[0-9]*" inputmode="numeric" type="number">
<input class="plus" value="+" type="button">
<span>press - or + to add/remove meterage per half meter</span>
</div>
And here the same with less code and with always one decimal place see comments.
var round = function (value, precision) {
var multiplier = Math.pow(10, precision || 0);
return Math.round(value * multiplier) / multiplier;
}
jQuery(document).on('click', '.plus, .minus', function(e) {
var $input = jQuery(this).siblings('.quantity .qty');
var val = parseFloat($input.val());
var step = parseFloat($input.attr('step'));
step = step == null ? 0.5 : step;
var sum = val + step;
if($(this).hasClass('minus')) {
sum = val - step;
}
$input.val(sum.toFixed(1));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="quantity">
<input class="minus" value="-" type="button">
<input class="input-text qty text" step="0.5" min="0.5" max="10" name="quantity" value="0" title="Qty" size="4" pattern="[0-9]*" inputmode="numeric" type="number">
<input class="plus" value="+" type="button">
<span>press - or + to add/remove meterage per half meter</span>
</div>