Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JQUERY] Obliczanie danch z pól formularza, jak obliczyć dane w czasie rzeczywistym
nikos
post
Post #1





Grupa: Zarejestrowani
Postów: 88
Pomógł: 0
Dołączył: 30.03.2009

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

Witam chciałem zrobić kalkulator BMI. Udało mi się zrobić coś takiego:
[JAVA] pobierz, plaintext 
  1.  $(document).ready(function() {
  2.  
  3.    $("a").click(function() {
  4.    var total = 0;
  5.      var waga = parseFloat($('#waga').attr('value'));
  6.      var wzrost = parseFloat($('#wzrost').attr('value'));
  7.  
  8.     var total = ((waga)/(wzrost * wzrost));
  9.     alert(total);
  10.  
  11.    });
  12.  });
[JAVA] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1.  <form id="bmi">
  2. Waga: <input id="waga" type="text" name="waga" />KG<br />
  3. Wzrost: <input id="wzrost" type="text" name="wzrost" />m
  4. </form>
  5. <a href="">Sprawdz</a>
[HTML] pobierz, plaintext


Po wklepaniu danych i kliknięciu sprawdz wyświetla jako alert BMI
Chciałbym zmodyfikować ten kod aby można było wyświetlać pod spodem BMI. Aby dane wyświetliły się bez przyciskania w przycisk zaraz po wpisaniu (live).
Dodałem więc
[HTML] pobierz, plaintext 
  1. <div id="results"></div>
[HTML] pobierz, plaintext

Oraz 
[JAVA] pobierz, plaintext 
  1. $("#results").html(total);
[JAVA] pobierz, plaintext

tylko ten drugi nie wiem w którym miejsu umieścić i jaką instrukcję do tego dodać.
Jeśli ktoś zna temat proszę o wsparcię
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 5)
longinus_torwald...
post
Post #2





Grupa: Zarejestrowani
Postów: 28
Pomógł: 6
Dołączył: 12.08.2011

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

[HTML] pobierz, plaintext 
  1. <head>
  2. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  3. <script>
  4.  
  5.     $(document).ready(function() {
  6.  
  7.                                      $("a").click(function() {
  8.                                      var total = 0;
  9.                                      var waga = parseFloat($('#waga').attr('value'));
  10.                                      var wzrost = parseFloat($('#wzrost').attr('value'));
  11.  
  12.                                     var total = ((waga)/(wzrost * wzrost));
  13.                                             alert(total);
  14.  
  15.                             $("#results").html(total);
  16.                                         return false;
  17.  
  18.  
  19.  
  20.                                  });
  21.                 })
  22.  
  23. </script>
  24. </head>
  25. <body>
  26.     <form id="bmi">
  27.       Waga: <input id="waga" type="text" name="waga" />KG<br />
  28.  Wzrost: <input id="wzrost" type="text" name="wzrost" />m
  29. </form>
  30. <a href="">Sprawdz</a>
  31.  <div id="results"></div>
  32. </body>
  33.  
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
nikos
post
Post #3





Grupa: Zarejestrowani
Postów: 88
Pomógł: 0
Dołączył: 30.03.2009

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

Dziękuję.
Wynik się wyświetla po wciśnięciu przycisku sprawdź. Dokładnie chodziło mi o taką modyfikację która nie będzie potrzebować przycisku tylko po wpisaniu obu danych wynik zostanie automatycznie wyświetlony. Czy jest to do zrobienia?
Pozdrawiam
Go to the top of the page
+Quote Post
longinus_torwald...
post
Post #4





Grupa: Zarejestrowani
Postów: 28
Pomógł: 6
Dołączył: 12.08.2011

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

[HTML] pobierz, plaintext 
  1. <head>
  2. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  3. <script>
  4.  
  5.     $(document).ready(function() {
  6.  
  7.                                      $("#waga,#wzrost").keyup(function() {
  8.                                      var total = 0;
  9.                                      var waga = parseFloat($('#waga').attr('value'));
  10.                                      var wzrost = parseFloat($('#wzrost').attr('value'));
  11.                                                  if (!waga || !wzrost)return false;                           
  12.                                     var total = ((waga)/(wzrost * wzrost));
  13.  
  14.                             $("#results").html(total);
  15.                                         return false;
  16.  
  17.  
  18.  
  19.                                  });
  20.                 })
  21.  
  22. </script>
  23. </head>
  24. <body>
  25.     <form id="bmi">
  26.         Waga: <input id="waga" type="text" name="waga" />KG<br />
  27.          Wzrost: <input id="wzrost" type="text" name="wzrost" />m
  28.    </form>
  29.     <a href="">Sprawdz</a>
  30.     <div id="results"></div>
  31. </body>
  32.  
[HTML] pobierz, plaintext


Ten post edytował longinus_torwaldzki 26.08.2011, 13:49:01
Go to the top of the page
+Quote Post
nikos
post
Post #5





Grupa: Zarejestrowani
Postów: 88
Pomógł: 0
Dołączył: 30.03.2009

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

Dokładnie o to chodziło dziękuję!
Go to the top of the page
+Quote Post
--Dyniak--
post
Post #6





Goście
Cześć wszystkim,
Wybaczcie, że odświeżam stary temat, ale chciałem dopytać się o jedną rzecz. Postaram się w miarę starannie opisać problem.

Po otrzymaniu wyniku bmi chciałbym podać drugą wartość, która generowałaby drugi wynik na podstawie pierwszego oraz drugiej zmiennej którą ktoś wprowadzi.
Taki nieco bardziej rozbudowany formularz niż ten gdyż musi "w locie" obliczyć jedną wartość i zaraz obliczyć po podaniu drugiej wartości drugiego wyniku.

Często korzystają z takiego rozwiązania jakieś ubezpieczalnie które na podstawie wcześniejszego wyniku przy podawaniu drugiej np. składki dają kolejne wartości.
Nie wiem czy wyraziłem się dosyć jasno, ale mam nadzieję, że ktoś mi pomoże (IMG:style_emoticons/default/smile.gif)

Pozdrawiam,
Dyniak
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 22.08.2025 - 13:18
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn