Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Automatyczne sumowanie inputów
Forum PHP.pl > Forum > Przedszkole
bahh
Witam

Mam np 5 inputów gdzie wpisuję wartości liczbowe np. 1, 2, 3, 5, 5
Chcę by w jakimś miejscu pod formularzami wyświetlało mi zsumowaną wartość inputów - w tym przypadku 16 (1+2+3+5+5)

Chodzi mi o tutaj o wykorzystanie javascript by sumowanie liczby dokonywało się przy każdej zmianie inputa.

Pozdrawiam
!*!
Pobierz zawartość value z pól input, po czym je dodaj.
bahh
Chodzi mi o to by nie było przeładowania, na javascript się nie znam i liczę na waszą pomoc
mccd
JQuery:

http://jsfiddle.net/5bsgr/2/

lub:

http://jsfiddle.net/5bsgr/1/
bahh
Jeśli chciałbym żeby dla input nr 1 wartość mnożyło mu wpierw przez np. 240 a każdy kolejny input przez inną wartość, jak wyglądałby kod?
mccd
Następne inputy analogicznie, poza tym możesz im dać type='number' zamiast text.

http://jsfiddle.net/5bsgr/5/
!*!
Cytat(bahh @ 3.06.2012, 13:47:41 ) *
Jeśli chciałbym żeby dla input nr 1 wartość mnożyło mu wpierw przez np. 240 a każdy kolejny input przez inną wartość, jak wyglądałby kod?


Bez przesady, dostałeś gotowca i jeszcze nie potrafisz go przerobić, to są proste obliczenia matematyczne. Wszytko masz dokładnie podane.
bahh
W js jestem zielony. Dziękuję mccd za wyrozumiałość i chwilę poświęconą mojemu problemowi. Pozdrawiam
!*!
Cytat(bahh @ 3.06.2012, 13:54:49 ) *
W js jestem zielony. Dziękuję mccd za wyrozumiałość i chwilę poświęconą mojemu problemowi. Pozdrawiam


Ale mógłbyś przynajmniej coś sam naskrobać, aby pokazać że się nie obijasz wink.gif tylko zwróć uwagę że te przykłady wyżej, spełniają swoje zadanie, ale nie znaczy że będą działać jak należy (chodzi mi o to że przepuszczą wszytko, trzeba by było podpiąć jakąś walidację wcześniej czy to na pewno jest liczba itd.)

http://docs.jquery.com/Plugins/Validation/Methods/number
bahh
Wziąłem to już wcześniej pod uwagę - rozwiązania są tutaj:

http://jurek.net.pl/forum/viewtopic.php?f=9&t=98

http://webmark.shost.pl/webporady/web5/liczby.html
mccd
Jeśli korzystasz z HTML5 za walidację wystarczy type='number', nie pozwoli od na wpisanie innych znaków niż cyfry i przecinek, do starszych przeglądarek musisz zrobić tak jak piszesz.
konrados
Cytat
Jeśli korzystasz z HTML5 za walidację wystarczy type='number', nie pozwoli od na wpisanie innych znaków niż cyfry i przecinek, do starszych przeglądarek musisz zrobić tak jak piszesz.


Z jednym małym zastrzeżeniem - zdaje się, że nawet najnowszy Firefox nie wspiera inputów z html5 (co mnie nieco dziwi).
bahh
Hmm, czy <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> rozwiąże problem z html5 na każdej przeglądarce?
mccd
Jeśli chodzi o obsługę type='number' to nie, użyj walidacji w js.
Ten skrypt pozwala tylko używać nowych znaczników typu <header>, które są traktowane jak divy, a nie atrybutów.
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.