Cześć! Powiedzmy, że mam formularz z polem tekstowym barcode. Użytkownik wpisuje tam kod, który poprzez ajax jest wysyłany do api, a z niego otrzymuje się cenę, która powinna się wyświetlić w okienku typu alert, ale oprócz tego na stronie index.html jest wyświetlany div o nazwie suma z domyślną wartością 0.00. Jeśli użytkownik wyśle formularz to ta kwota powinna wzrosnąć o wartość odebraną z api.
Poradziłem sobie z wysłaniem zapytania do api i wyświetlam w alercie cenę, ale nie umiem zaktualizować łącznej sumy w divie.
$('form').submit(function(e) { var formData = { 'barcode': $('input[name=barcode]').val() }; $.ajax({ type: 'POST', url: 'barcode.php', data: formData, dataType: 'json', encode: true }).done(function(data) { alert('Cena: '+data.price); }).fail(function(data) { alert('fail'); }); });
var first = $("#suma").text(); var second = data.price; $("#suma").text(+first + +second);
Te plusy przed zmiennymi są niepotrzebne.
Sprawdź co jest w data.price, czy nie jest to czasem liczba z przecinkiem albo z postfixem "zł".
$("#suma").text(first + second);
Kwoty przepuść przez parseFloat. https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Obiekty/parseFloat
parseFloat(first) + parseFloat(second);
var first = $(".suma").text(); var second = data.price; console.log('First: ' + first); console.log('Second: ' + second); console.log('Total: ' + parseFloat(first) + parseFloat(second));
console.log(parseFloat(first) + parseFloat(second));
console.log('Total: ' + (parseFloat(first) + parseFloat(second)));
let price = 0; $('form').submit(function(e) { var formData = { 'barcode': $('input[name=barcode]').val() }; $.ajax({ type: 'POST', url: 'barcode.php', data: formData, dataType: 'json', encode: true }).done(function(data) { alert('Cena: '+data.price); price += parseFloat(data.price); $("#suma").text(price); }).fail(function(data) { alert('fail'); }); });
alert(data.price);
alert(parseFloat(data.price));
Ale czemy widze wynik tylko jednego alert?
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)