[jQuery, JS] Aktualizowanie sumy po wysłaniu formularza poprzez ajax Opcje

[oskarszlempo]

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.

[JAVASCRIPT] pobierz, plaintext 
$('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');
    }); 
});
[JAVASCRIPT] pobierz, plaintext 

Przykład:

Suma: 0.00

Cena: 2.39

Suma: 2.39 (0.00+2.39)

Cena: 4.49

Suma: 6.88 (2.39+4.49)

--

Czy jest ktoś w stanie pomóc mi napisać taką funkcję, która będzie aktualizowała cenę po każdym wysłanym formularzu?

---

Robiąc to w ten sposób:

[JAVASCRIPT] pobierz, plaintext 
var first = $("#suma").text();
var second = data.price;
 
$("#suma").text(+first + +second);
[JAVASCRIPT] pobierz, plaintext 

Otrzymuję: NaN

[nospor]

aby nie pobierać wartości z diva tylko z jakiejś zmiennej która się będzie aktualizowała po każdym wysłanym formularzu?

No to wczym problem. Zrob dokladnie to co wlasnie napisales. Trzymaj to jeszcze w zmiennej globalnej i juz.

[oskarszlempo]

No to wczym problem. Zrob dokladnie to co wlasnie napisales. Trzymaj to jeszcze w zmiennej globalnej i juz.

[JAVASCRIPT] pobierz, plaintext 
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');
    }); 
});
[JAVASCRIPT] pobierz, plaintext 

Pokazuje mi NaN.. :/

Ten post edytował oskarszlempo 17.04.2020, 23:06:36