Drukowana wersja tematu

Napisany przez: oskarszlempo 16.04.2020, 00:27:07

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

Napisany przez: trueblue 16.04.2020, 09:18:59

Te plusy przed zmiennymi są niepotrzebne.
Sprawdź co jest w data.price, czy nie jest to czasem liczba z przecinkiem albo z postfixem "zł".

Napisany przez: oskarszlempo 16.04.2020, 12:58:34

data.price zwraca decimal(9,2), czyli np 1.00, 2.00, 4.59, 2.35

Jak robię:

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

To na stronie po każdym wysłanym formularzu wygląda to tak:
0.001.492.394.5949.99

Czyli zamiast kwoty się sumować to one się dodają na końcu

Napisany przez: viking 16.04.2020, 13:16:52

Kwoty przepuść przez parseFloat. https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Obiekty/parseFloat

Napisany przez: trueblue 16.04.2020, 13:17:11

parseFloat(first) + parseFloat(second);

Napisany przez: oskarszlempo 16.04.2020, 13:58:19

[JAVASCRIPT] pobierz, plaintext 
var first = $(".suma").text();
var second = data.price;
 
console.log('First: ' + first);
console.log('Second: ' + second);
console.log('Total: ' + parseFloat(first) + parseFloat(second));
[JAVASCRIPT] pobierz, plaintext 

Zwraca:

Napisany przez: nospor 16.04.2020, 14:03:26

console.log(parseFloat(first) + parseFloat(second));
console.log('Total: ' + (parseFloat(first) + parseFloat(second)));

Napisany przez: oskarszlempo 16.04.2020, 14:18:11

NaN
Total: NaN

--

Może da się to jakoś inaczej zrobić, aby nie pobierać wartości z diva tylko z jakiejś zmiennej która się będzie aktualizowała po każdym wysłanym formularzu?

Napisany przez: nospor 16.04.2020, 14:21:50

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

Napisany przez: oskarszlempo 17.04.2020, 22:27:15

[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.. :/

Napisany przez: nospor 18.04.2020, 15:33:24

alert(data.price);
alert(parseFloat(data.price));

Napisany przez: oskarszlempo 18.04.2020, 15:48:53

Napisany przez: nospor 20.04.2020, 09:44:47

Ale czemy widze wynik tylko jednego alert?