Quando você lê os dados no interior de um <span></span>
, você acessa o texto que está no interior das tags através do método .text()
. Mas para ler os dados que estão em um <input></input>
, você deve ler o seu valor, com o método .val()
.
Assim, se você substituir estas linhas no método calculate
:
var price = parseFloat($(obj).parent().parent().parent().find('.amount').text()) || 0;
/* ... */
$(obj).parent().parent().parent().find('.total_amount').text(total);
por estas:
var price = parseFloat($(obj).closest('.cart_item').find('.amount').val()) || 0;
/* ... */
$(obj).closest('.cart_item').find('.total_amount').val(total);
irá ter o mesmo comportamento dos spans
.
Além disto, alterei sua cadeia de parent()
para o método closest()
, que localiza o parent mais "próximo" com aquele selector fornecido.
Fiddle aqui: https://jsfiddle.net/mrlew/qvaf5bkj/1/
Por fim, a título de sugestão, você tem diversos id's
de elementos repetidos (quantity
, price
, total
) . Você deve ter apenas um id
único para cada elemento. Mas pode ser que seja apenas para teste, já que você não os usa.
EDITADO
Como bem sugerido pelo @JuniorNunes, se você quiser manter os dois "sistemas", você pode modificar seu método calculate
e checar se o elemento é um input
através do método is
do jQuery
. Algo assim:
function calculate(obj) {
var obj_price = $(obj).closest('.cart_item').find('.amount');
var obj_total = $(obj).closest('.cart_item').find('.total_amount');
var price = parseFloat( (obj_price.is("input") ? obj_price.val() : obj_price.text()) ) || 0;
var quantity = parseInt($(obj).closest('.cart_item').find('.qty').val());
var total = price * quantity;
if (obj_price.is("input")) {
obj_total.val(total);
} else {
obj_total.text(total);
}
}
Fiddle aqui: https://jsfiddle.net/mrlew/qvaf5bkj/2/