Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [jQuery, JS] Aktualizowanie sumy po wysłaniu formularza poprzez ajax
oskarszlempo
post 16.04.2020, 00:27:07
Post #1





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 5.06.2019

Ostrzeżenie: (0%)
-----


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
  1. $('form').submit(function(e) {
  2. var formData = {
  3. 'barcode': $('input[name=barcode]').val()
  4. };
  5. $.ajax({
  6. type: 'POST',
  7. url: 'barcode.php',
  8. data: formData,
  9. dataType: 'json',
  10. encode: true
  11. }).done(function(data) {
  12. alert('Cena: '+data.price);
  13. }).fail(function(data) {
  14. alert('fail');
  15. });
  16. });
[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
  1. var first = $("#suma").text();
  2. var second = data.price;
  3.  
  4. $("#suma").text(+first + +second);
[JAVASCRIPT] pobierz, plaintext


Otrzymuję: NaN
Go to the top of the page
+Quote Post
trueblue
post 16.04.2020, 09:18:59
Post #2





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


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


--------------------
Go to the top of the page
+Quote Post
oskarszlempo
post 16.04.2020, 12:58:34
Post #3





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 5.06.2019

Ostrzeżenie: (0%)
-----


Cytat(trueblue @ 16.04.2020, 10: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ł".



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

Jak robię:
[JAVASCRIPT] pobierz, plaintext
  1. $("#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

Ten post edytował oskarszlempo 16.04.2020, 13:00:29
Go to the top of the page
+Quote Post
viking
post 16.04.2020, 13:16:52
Post #4





Grupa: Zarejestrowani
Postów: 6 365
Pomógł: 1114
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----


Kwoty przepuść przez parseFloat. https://developer.mozilla.org/pl/docs/Web/J...ekty/parseFloat


--------------------
Go to the top of the page
+Quote Post
trueblue
post 16.04.2020, 13:17:11
Post #5





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


parseFloat(first) + parseFloat(second);


--------------------
Go to the top of the page
+Quote Post
oskarszlempo
post 16.04.2020, 13:58:19
Post #6





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 5.06.2019

Ostrzeżenie: (0%)
-----


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


Zwraca:
Go to the top of the page
+Quote Post
nospor
post 16.04.2020, 14:03:26
Post #7





Grupa: Moderatorzy
Postów: 36 440
Pomógł: 6290
Dołączył: 27.12.2004




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


--------------------

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer

Go to the top of the page
+Quote Post
oskarszlempo
post 16.04.2020, 14:18:11
Post #8





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 5.06.2019

Ostrzeżenie: (0%)
-----


Cytat(nospor @ 16.04.2020, 15:03:26 ) *
console.log(parseFloat(first) + parseFloat(second));
console.log('Total: ' + (parseFloat(first) + parseFloat(second)));


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?

Ten post edytował oskarszlempo 16.04.2020, 14:19:30
Go to the top of the page
+Quote Post
nospor
post 16.04.2020, 14:21:50
Post #9





Grupa: Moderatorzy
Postów: 36 440
Pomógł: 6290
Dołączył: 27.12.2004




Cytat
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.


--------------------

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer

Go to the top of the page
+Quote Post
oskarszlempo
post 17.04.2020, 22:27:15
Post #10





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 5.06.2019

Ostrzeżenie: (0%)
-----


Cytat(nospor @ 16.04.2020, 15:21:50 ) *
No to wczym problem. Zrob dokladnie to co wlasnie napisales. Trzymaj to jeszcze w zmiennej globalnej i juz.



[JAVASCRIPT] pobierz, plaintext
  1. let price = 0;
  2.  
  3. $('form').submit(function(e) {
  4. var formData = {
  5. 'barcode': $('input[name=barcode]').val()
  6. };
  7. $.ajax({
  8. type: 'POST',
  9. url: 'barcode.php',
  10. data: formData,
  11. dataType: 'json',
  12. encode: true
  13. }).done(function(data) {
  14. alert('Cena: '+data.price);
  15. price += parseFloat(data.price);
  16. $("#suma").text(price);
  17. }).fail(function(data) {
  18. alert('fail');
  19. });
  20. });
[JAVASCRIPT] pobierz, plaintext


Pokazuje mi NaN.. :/

Ten post edytował oskarszlempo 17.04.2020, 23:06:36
Go to the top of the page
+Quote Post
nospor
post 18.04.2020, 15:33:24
Post #11





Grupa: Moderatorzy
Postów: 36 440
Pomógł: 6290
Dołączył: 27.12.2004




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


--------------------

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer

Go to the top of the page
+Quote Post
oskarszlempo
post 18.04.2020, 15:48:53
Post #12





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 5.06.2019

Ostrzeżenie: (0%)
-----


Cytat(nospor @ 18.04.2020, 16:33:24 ) *
alert(data.price);
alert(parseFloat(data.price));


Go to the top of the page
+Quote Post
nospor
post 20.04.2020, 09:44:47
Post #13





Grupa: Moderatorzy
Postów: 36 440
Pomógł: 6290
Dołączył: 27.12.2004




Ale czemy widze wynik tylko jednego alert?


--------------------

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer

Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 28.03.2024 - 21:10