Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: (jquery) podliczanie zawartości input po zwolnieniu klawisza
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
niebieszki
Witam chciałbym napisać funkcję jquery ktora będzie wyliczac iloczyn 2 pól i wpisywała je do inputa wynik zaraz po wpisaniu 2 wartosci.

Poniżej przedstawiam obrazy i kod źródłowy:


  1. <tr>
  2. <td>Liczba 1</td>
  3. <td>Liczba 2</td>
  4. <td>Wynik</td>
  5. </tr>
  6. </thead>
  7. <tr>
  8. <td><input name="liczba1[0]" id="liczba1[0]"></td>
  9. <td><input name="liczba2[0]" id="liczba2[0]"></td>
  10. <td><input name="wynik[0]" id="wynik[0]" disabled="disabled"></td>
  11. </tr>
  12. <tr>
  13. <td><input name="liczba1[1]" id="liczba1[1]"></td>
  14. <td><input name="liczba2[1]" id="liczba2[1]"></td>
  15. <td><input name="wynik[1]" id="wynik[1]" disabled="disabled"></td>
  16. </tr>
  17. .
  18. .
  19. .
  20. <tr>
  21. <td><input name="liczba1[n]" id="liczba1[n]"></td>
  22. <td><input name="liczba2[n]" id="liczba2[n]"></td>
  23. <td><input name="wynik[n]" id="wynik[n]" disabled="disabled"></td>
  24. </tr>
  25. </tbody>

[JAVASCRIPT] pobierz, plaintext
  1. $(document).ready(function() {
  2. $("input[name='liczba2[0]']").keyup(
  3. function()
  4. {
  5. var wynik = $("input[name='liczba1[0]']").val()*$("input[name='liczba2[0]']").val();
  6. $("input[name='wynik[0]']").val(wynik);
  7.  
  8. });
  9. });
[JAVASCRIPT] pobierz, plaintext

powyższy kod działa dla pierwszego pola (co nie jest rzeczą dziwną)
liczba wierszy tabeli jest nieokreślona, co trzeba zastosować aby ta funkcja była bardziej uniwersalna? próbowałem z pętla for lecz niestety nie wyszło mi.
Czy zna ktoś jakieś rozwiązanie takiego problemu?
ziolo.92
Proponuję Ci podpiąć zdarzenie pod oba inputy poprzez:
[JAVASCRIPT] pobierz, plaintext
  1. $('input[disabled!=disabled]')
[JAVASCRIPT] pobierz, plaintext

Samo zliczenie wartości to odniesienie się do wiersza poprzez .parent().parent() i znalezienie inputów które tak jak powyżej nie są wyłączone.
niebieszki
Niestety albo ja nic z tego nie rozumiem albo z twojej wypowiedzi nic nie wynika.
Mi nie chodziło o to aby się dowiedzieć jak podpiąć zdarzenie pod pola tylko o to jak dokonać stosownych obliczeń dla każdego wiersza ( nie dla wszystkich jednocześnie tylko po zwolnieniu klawisza z pola liczba2 w każdym wierszu z osobna). Docelowy kod będzie posiadał wiele pól wynikowych jak i nie tylko pola input do obliczeń.
Mi chodzi o metodę iteracji. Kod powinien być udynamiczniony poprzez zmienne:

[JAVASCRIPT] pobierz, plaintext
  1. var i=0;
  2. $(document).ready(function() {
  3. $("input[name='liczba2['+(i)+']']").keyup(
  4. function()
  5. {
  6. var wynik = $("input[name='liczba1['+(i)+']']").val()*$("input[name='liczba2['+(i)+']']").val();
  7. $("input[name='wynik['+(i)+']']").val(wynik);
  8. });
  9. });
[JAVASCRIPT] pobierz, plaintext


Tylko w za pomocą jakiej pętli (jeśli w ogóle pętla wchodzi w grę) powinienem zmienna i inkrementować aby dla 'nieznanej' liczby wierszy móc stosować obliczenia
ziolo.92
Miałem na myśli takie rozwiązanie:
[JAVASCRIPT] pobierz, plaintext
  1. $(document).ready(function() {
  2. $("table input:not(:disabled)")
  3. .val(0)
  4. .bind('keyup', function(){
  5. var wynik = 1;
  6. var tr = $(this).parent().parent();
  7. tr.find('input:not(:disabled)')
  8. .each(function(){
  9. wynik*=$(this).val();
  10. });
  11. tr.find('input:disabled').val(wynik);
  12. });
  13. });
[JAVASCRIPT] pobierz, plaintext


Dzięki temu masz kod uniezależniony od ilości kolumn i ich kolejności.

Lub jeśli chcesz korzystać z pętli co w przypadku jquery będzie znacznie szybsze z powodu odnoszenia się bezpośrednio po id można zrobić tak:
[JAVASCRIPT] pobierz, plaintext
  1. $(document).ready(function() {
  2. var i=0;
  3. while(i <= $('table tr').length-2){
  4. $('#liczba1_'+i+', #liczba2_'+i)
  5. .val(0)
  6. .keyup(function(){
  7.  
  8. var id = $(this).attr('id');
  9. id = id.substr(id.indexOf('_')+1, id.length-id.indexOf('_')-1);
  10.  
  11. var wynik = $('#liczba1_'+id+'').val()*$('#liczba2_'+id).val();
  12. $('#wynik_'+id).val(wynik);
  13.  
  14. });
  15. i++;
  16. }
  17. });
[JAVASCRIPT] pobierz, plaintext


Tyle, że to rozwiązanie ma jeden mankament, mianowicie nie można w id używać znaków '[', ']', dlatego zastąpiłem je jednym znakiem '_' przed liczbą.

Pozdrawiam
niebieszki
Dzięki za wyjaśnienia.

Pierwsze rozwiązanie bardzo ukierunkowany tylko na ten typ tabeli (chciałbym do obliczeń korzystając także z pól select i nie mam pojęcia jak zmienić ten kod aby obsługiwał bardziej skomplikowane obliczenia z włączeniem selectów)

Drugie rozwiązanie jest bardzo fajne takie o jakie mi chodziło łatwo rozwijalne podpinane do rożnych zdażeń np change selecta... tylko własnie mankament o którym wspomniałeś. Niestety potrzebuje aby t były zmienne tablicowe aby móc w kontrolerze polecieć na nich foreach-em i do bazy. Nie ma żadnej możliwości aby umieścić w tym drugim rozwiązaniu te klamry? Jeśli możesz to powiedz dlaczego to jest nie możliwe.
ziolo.92
Możesz używać notacji tablicowej w taki sposób:
[JAVASCRIPT] pobierz, plaintext
  1. $(document).ready(function() {
  2. var i=0;
  3. while(i <= $('table tr').length-2){
  4. $('#liczba1\\['+i+'\\], #liczba2\\['+i+'\\]')
  5. .val(0)
  6. .bind('change', function(){
  7. var id = $(this).attr('id');
  8. id = id.substr(id.indexOf('[')+1, id.length-2-id.indexOf('['));
  9. var wynik = $('#liczba1\\['+id+'\\]').val()*$('#liczba2\\['+id+'\\]').val();
  10. $('#wynik\\['+id+'\\]').val(wynik);
  11.  
  12. });
  13. i++;
  14. }
  15. });
[JAVASCRIPT] pobierz, plaintext

Ale jest to rozwiązanie mało elastyczne. Nadal proponuję Ci skorzystać z poniższego rozwiązania, które mimo że jest wolniejsze to są to takie wartości milisekund, że nie odczujesz różnicy, a dzięki zastosowaniu ":input" odnosi się również do pola select.
[JAVASCRIPT] pobierz, plaintext
  1. $(document).ready(function() {
  2. $("table :input:not(:disabled)")
  3. .val(0)
  4. .bind('change', function(){
  5. var wynik = 1;
  6. var tr = $(this).parent().parent();
  7. tr.find(':input:not(:disabled)')
  8. .each(function(){
  9. wynik*=$(this).val();
  10. });
  11. tr.find('input:disabled').val(wynik);
  12. });
  13. });
[JAVASCRIPT] pobierz, plaintext
niebieszki
Dobrze wiec przystaje za twoją radą i wybieram opcje drugą.

Podpowiedz mi tylko jeszcze jak do tego kodu wprowadzić a dokładniej jak rozróżnić pola aby móc
np. dodać pole pierwsze z wartością pola trzeciego selecta( stworzonego) i podzielić przez (pole drugie + pole pierwsze) = całość ląduje oczywiście w polu wynik.

To jest przykład nie musi być konkretnie to chodzi mi ogólnie o zasadę.

Starałem się przerobić ten kod samodzielnie lecz niestety nie dałem rady.

Pozdrawiam
ziolo.92
[JAVASCRIPT] pobierz, plaintext
  1. $(document).ready(function() {
  2. $("table :input:not(:disabled)")
  3. .val(0)
  4. .bind('change', function(){
  5. var wynik = 1,
  6. tr = $(this).parent().parent(),
  7. liczby = [];
  8. tr.find(':input:not(:disabled)')
  9. .each(function(){
  10. liczby[] = $(this).val();
  11. });
  12. //tutaj przeprowadzasz działania na elementach tablicy liczby które są wartościami kolejnych pól formularza w wierszu
  13. tr.find('input:disabled').val(wynik);
  14. });
  15. });
[JAVASCRIPT] pobierz, plaintext
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.