Hola a todos.
Espero alguien me pueda ayudar. Tengo una dificultad que me ha llevado varios días fastidiando y no he podido resolver
Tengo estos 3 inputs que deben sumarse en la linea de resultado. Me funciona cuando digito los valores en cada caja de texto. Pero cuando le doy clic sobre los botones de "+" y "-". Cambia el valor en el input, pero no me los suma en el resultado.
Este es el código con el cual estoy realizando este programa
HTML
<div>
<ul>
<li>
<form id="formulario">
<div class="decrease value-button" id="decrease" value="Decrease Value">-</div>
<input type="hidden" name="action" value="placeOrder" />
<input class="number" type="number" id="number" name="number" value="0" />
<div class="increase value-button" id="increase" value="Increase Value">+</div>
</form>
</li>
<li>
<form id="formulario">
<div class="decrease value-button" id="decrease" value="Decrease Value">-</div>
<input type="hidden" name="action" value="placeOrder" />
<input class="number" type="number" id="number" name="number" value="0" />
<div class="increase value-button" id="increase" value="Increase Value">+</div>
</form>
</li>
<li>
<form id="formulario" name="form">
<div class="decrease value-button" id="decrease" value="Decrease Value">-</div>
<input type="hidden" name="action" value="placeOrder" />
<input class="number" type="number" id="number" name="number" value="0" />
<div class="increase value-button" id="increase" value="Increase Value">+</div>
</form>
</li>
</ul>
<div><span>El resultado es: </span> <span id="spTotal"></span></div>
</div>
JS
$('div#increase').on('click', function () {
var $qty = $(this).closest('#formulario').find('input#number');
var currentVal = parseInt($qty.val());
if (!isNaN(currentVal)) {
$qty.val(currentVal + 1);
}
});
$('div#decrease').on('click', function () {
var $qty = $(this).closest('#formulario').find('input#number');
var currentVal = parseInt($qty.val());
if (!isNaN(currentVal) && currentVal > 0) {
$qty.val(currentVal - 1);
}
});
function sumar() {
var total = 0;
$(".number").each(function() {
if (isNaN(parseFloat($(this).val()))) {
total += 0;
} else {
total += parseFloat($(this).val());
}
});
$('#spTotal').html(total)
}
$('.number').on('keyup', function() {
sumar();
})
El código CSS no lo veo necesario. Pero si necesitan reproducir el programa, lo tengo colgado en CodePen
Agradezco toda la ayuda que me puedan proporcionar