Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Automatyczne odliczanie inputów i zmienianie ich klas
Forum PHP.pl > Forum > Przedszkole
michal_s
Problem wygląda tak.
Mam sobie kilka zwykłych inputów np.

  1. <input name="xx1" id="xx1" type="text">
  2. <input name="xx2" id="xx2" type="text">


I chcę, aby były one automatycznie sumowane. Problem polega na tym, że są one w kilku divach, które się rozwijają gdy użytkownik zaznaczy jakiś checkbox. I nie chcę, aby było tak, że ktoś zaznaczy checkbox i wpisze jakąś kwotę a potem odczepi checkbox a ilość z inputa, który wtedy zniknął i tak będzie wtedy liczona.
Więc zrobiłem tak:
  1. $('#jakis_checkbox_o_id').click(function(){
  2. $('#xx1').toggleClass('price');
  3. });
  4.  
  5. $('#jakis_checkbox_o_id2').click(function(){
  6. $('#xx2').toggleClass('price');
  7. });


Oraz zliczanie:
  1. $.fn.sumValues = function() {
  2. var sum = 0;
  3. this.each(function() {
  4. if ( $(this).is(':input') ) {
  5. var val = $(this).val();
  6. } else {
  7. var val = $(this).text();
  8. }
  9. sum += parseFloat( ('0' + val).replace(/[^0-9-\.]/g, ''), 10 );
  10. });
  11. return sum;
  12. };
  13.  
  14. $(document).ready(function() {
  15. $('input.price').bind('keyup', function() {
  16. $('span.total').html( $('input.price').sumValues() );
  17. });
  18. });


Wszystko pięknie działa tylko nie automatycznie. Jeśli zamknę checkboxa to, żeby ilość w spanie o nazwie total się zmieniła to muszę coś zmienić w innym inpucie, który jest aktywny a to bez sensu.
jak to zrobić żeby po odkliknięciu checkboxa automatycznie zmieniała się wartość total?
mam nadzieję, ze dobrze to objaśniłem:)
com
no to ja widzę to tak sprawdzaj czy dane checkboxy są chacked jeśli tak no to zsumuj wszystkie aktywne wink.gif
michal_s
Chociaż teraz widzę, że problem jest jeszcze bardziej zagmatwany. JS nie liczy mi tych inputów, które po zalogowaniu strony nie miały clasy price i która im została dodana dopiero poprzez JS po zaznaczeniu checkboxa. Zaczyna je liczyc dopiero po 'keyup' wykonanym na jakimś inpucie, który miał tą klasę przy załadowaniu strony. Jak to ominąć żeby liczył też te, które mają tą klasę dodaną potem?
c1chy
[JAVASCRIPT] pobierz, plaintext
  1.  
  2. var sum=0;
  3. $('input.klasa_inputa:visible').each(function(){
  4. sum+=parseFloat($(this).val()); //rzutowanie na float
  5. })
  6.  
[JAVASCRIPT] pobierz, plaintext


w ten sposób zsumujesz tylko widoczne inputy.
michal_s
Już jest trochę lepiej.
Te inputy domyślnie mają display:none i jak checkbox jest zaznaczany to robi się display:
I faktycznie jak zaznaczam checkboxa i coś wpisuję to ładnie suma mi się pojawia w tym polu total. Ale jak go odznaczam to on się nie odejmuje...
Odejmuje się dopiero jak zmienię jakąś wartość w innym polu input, który jest zaznaczony. A by musiało to tak działać, że od razu po odznaczeniu checkboxa kwota w total się zmniejsza ;/
c1chy
przenieś sumowanie do jakiejś funkcji i wywołuj ją zarówno przy zmianie inputa jak i kliknięciu checkboxa
michal_s
np tak ?

  1. function sumowanie() {
  2. $.fn.sumValues = function() {
  3. var sum = 0;
  4. this.each(function() {
  5. if ( $(this).is(':input') ) {
  6. var val = $(this).val();
  7. } else {
  8. var val = $(this).text();
  9. }
  10. sum += parseFloat( ('0' + val).replace(/[^0-9-\.]/g, ''), 10 );
  11. });
  12. return sum;
  13. };
  14.  
  15. $(document).ready(function() {
  16. $('input.price').bind('keyup', function() {
  17. $('span.total').html( $('input.price').sumValues() );
  18. });
  19. });
  20. }
  21.  


i potem

  1. <input id="inne" name="inne" type="checkbox" onchange="sumowanie()"/>
  2. <input name="xx1" id="xx1" type="text" onchange="sumowanie()">


Jeśli tak by to miało wyglądać to nadal efekt jest niestety taki sam jak poprzednio. Po odznaczeniu checkboxa kwota się nie zmienia.
c1chy
Skoro to ma być rozszerzenie do jQuery to nie zamykaj tego w funkcji, po prostu dodaj:


[JAVASCRIPT] pobierz, plaintext
  1. $('input.klasa_checkboxa').on('click',function(){
  2.  
  3. $('span.total').html( $('input.price').sumValues() );
  4.  
  5. });
[JAVASCRIPT] pobierz, plaintext
michal_s
Jeśli zrobię tak jak mówisz czyli:

  1. $.fn.sumValues = function() {
  2. var sum=0;
  3. $('input.price:visible').each(function(){
  4. sum+=parseFloat($(this).val()); //rzutowanie na float
  5. })
  6. return sum;
  7. };
  8.  
  9. $(document).ready(function() {
  10. $('input.price').on('click',function(){
  11. $('span.total').html( $('input.price').sumValues() );
  12. });
  13. });


napisałeś input.klasa_checkboxa ale chyba chodziło o klasę inputa...

To w ogóle nic nie liczy i wywala NaN .

I oczywiście dzięki za dotychczasową pomoc.
c1chy
Chodziło mi o coś takiego:

http://jsfiddle.net/K7zFw/
michal_s
Dzięki, widzę, że działa ładnie:) Jutro to ogarnę myślę...
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.