Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JavaScript][PHP]Liczenie czasu - na żywo
andrzejlechniak
post 24.06.2019, 20:38:12
Post #1





Grupa: Zarejestrowani
Postów: 242
Pomógł: 0
Dołączył: 7.11.2008

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


Cześć,

Mam pytanie: jaki skrypt napisać, aby na bieżąco - lub jak kto woli 'na żywo' można było obserwować liczenie elementów na stronie, np.
1. Klikam w checkbox z lewej strony z opisem 1 owoc - z prawej automatycznie [z pozycji wyjściowej '0'] wyskakuje cena 2 złote
2. Klikam w kolejny checkbox z lewej strony z opisem 2 owoc - z prawej automatycznie [z pozycji wyjściowej '0'] wskakuje cena 2 złote
3. Chcę, aby automatycznie zliczało się naliczenie zaznaczonych wyżej opcji: np. 3 sztuki owoców - razem 10 zł.
Chodzi mi o to, aby formularz nie był przeładowany i nie przechodził na następną stronę.
Bardzo proszę o radę - pomoc, jak mogę to załatwić?
Go to the top of the page
+Quote Post
trueblue
post 24.06.2019, 20:40:08
Post #2





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

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


https://kawalekkodu.pl/milion-piecset-sto-d...-liczeniu-w-css


--------------------
Go to the top of the page
+Quote Post
SmokAnalog
post 25.06.2019, 02:30:38
Post #3





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

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


Najwygodniej takie interfejsy się robi frameworkami jak Angular czy Vue.js lub bibliotekami jak React. Ale możesz to też łatwo zrobić bez żadnych paczek, wystarczy coś w stylu (uproszczony HTML):

[JAVASCRIPT] pobierz, plaintext
  1. <form id="products-form">
  2. <input type="checkbox" data-price="1.99">
  3. <input type="checkbox" data-price="2.59">
  4. <input type="checkbox" data-price="0.89">
  5. <input type="checkbox" data-price="4.99">
  6. <div id="total-price"></div>
  7. </form>
  8. <script>
  9. function refreshPrice() {
  10. const totalPrice = [...document.querySelectorAll('#products-form input[type=checkbox]:checked')].reduce(
  11. (totalPrice, checkbox) => totalPrice + parseFloat(checkbox.dataset.price),
  12. 0
  13. );
  14.  
  15. document.getElementById('total-price').textContent = totalPrice.toFixed(2);
  16. }
  17.  
  18. refreshPrice();
  19.  
  20. document.getElementById('products-form').addEventListener('click', e => {
  21. if (e.target.matches('input[type=checkbox]')) {
  22. refreshPrice();
  23. }
  24. });
  25. </script>
[JAVASCRIPT] pobierz, plaintext


Wyświetlanie ceny tylko dla zaznaczonego produktu możesz zrobić w czystym CSS, jeśli checkbox i cena (albo wrapper ceny) są na tym samym poziomie hierarchii:

  1. :checked ~ .price {
  2. /* style */
  3. }
Go to the top of the page
+Quote Post
andrzejlechniak
post 25.06.2019, 20:29:32
Post #4





Grupa: Zarejestrowani
Postów: 242
Pomógł: 0
Dołączył: 7.11.2008

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


Hej,
Ok, działa, śmiga i dziękuję - a jak mógłbym dodać do tego, aby można było dodawać 'możliwość sztukowania' - np. coś kosztuje 1,95 a klient zamówił sobie 2 lub 3 sztuki.
Pytanie 2: czy jest możliwość, aby te wartości byłby przekazywane między np. 2 stronami: np. na jednej dokonuje wyboru a na drugiej mam potwierdzenie i aby jeszcze raz nie trzeba był liczyć od nowa?
Pozdrawiam.
Go to the top of the page
+Quote Post
SmokAnalog
post 25.06.2019, 21:42:12
Post #5





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

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


Oczywiście, że można też zrobić sztukowanie. Tylko zastanów się jak to ma wyglądać - gdzie są do tego inputy itd.

Raczej nie przekazuje się danych w taki sposób, tylko liczy od nowa. Na stronie z potwierdzeniem możesz już po stronie serwera sobie to policzyć. To są na tyle proste obliczenia, że nikomu się krzywda nie stanie.
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: 29.03.2024 - 00:13