0
Good afternoon, everyone,
There was a problem, I had a question about summation system with JQUERY, but I would like you to analyze what is wrong in my code because it error (Nan) with multiple text boxes, what I did is what php generates like a menu only I can’t add the orders independently.
Here is the js Riddle: https://jsfiddle.net/6mkzzvqz/11/
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form action="#">
<div class="media-body">
<div class="menu-tittle">
</div>
<div class="quantity">
<div class="pizza-add-sub">
<input type="text" id="qtdpedidos" class="qtdpedidos" value="0"/>
</div>
</div>
<div id="item1" class="pizza-price"> <span id="pizza" class="pizza">10.00</span>
</div>
</div>
<div class="quantity">
<div class="pizza-add-sub">
<input type="text" id="qtdpedidos" class="qtdpedidos" value="0"/>
</div>
</div>
<div id="item1" class="pizza-price"> <span id="pizza" class="pizza">10.00</span>
</div>
</div>
<div class="quantity">
<div class="pizza-add-sub">
<input type="text" id="qtdpedidos" class="qtdpedidos" value="0"/>
</div>
</div>
<div id="item1" class="pizza-price"> <span id="pizza" class="pizza">10.00</span>
</div>
</div>
<div class="quantity">
<div class="pizza-add-sub">
<input type="text" id="qtdpedidos" class="qtdpedidos" value="0"/>
</div>
</div>
<div id="item1" class="pizza-price"> <span id="pizza" class="pizza">10.00</span>
</div>
</div>
</form>
<p>Valor do Pedido: R$<span id="resultado" class="resultado">0.00</span></p>
JQUERY
$(document).ready(function() {
$(".pizza-add-sub").append('<div class="plus qty-pizza">+</div><div class="mines qty-pizza">-</div>');
$(".qty-pizza").on("click", function() {
var $button = $(this);
var oldValue = $button.parent().find("input").val();
if ($button.text() == "+") {
var newVal = parseFloat(oldValue) + 1;
} else {
// Don't allow decrementing below zero
if (oldValue > 0) {
var newVal = parseFloat(oldValue) - 1;
} else {
newVal = 0;
}
}
$button.parent().find("input").val(newVal);
var v1 = $('#item1 span').text();
var v2 = Number(document.getElementById("qtdpedidos").value);
document.getElementById("resultado").innerHTML = parseFloat(v1 * v2).toFixed(2);
});
});
So friend, I made the changes but he keeps accusing that is not number.
– Harakin
Sorry: changes the text to html() wait I will edit
– Douglas Juliao
see if it works that way.
– Douglas Juliao
It works, however it only sums with the first element, wanted to add all the elements at once you have some suggestion of how it could be done?
– Harakin
yes, it is just you always take the value of all imputs and do the calculation in Event change between inputs: Document.getElementById("id"). value
– Douglas Juliao