Forum PHP.pl > [JQUERY] Obliczanie danch z pól formularza

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JQUERY] Obliczanie danch z pól formularza

nikos

26.08.2011, 12:21:40

Witam chciałem zrobić kalkulator BMI. Udało mi się zrobić coś takiego:

[JAVA] pobierz, plaintext 
 $(document).ready(function() {
 
   $("a").click(function() {
   var total = 0;
     var waga = parseFloat($('#waga').attr('value'));
     var wzrost = parseFloat($('#wzrost').attr('value'));
 
    var total = ((waga)/(wzrost * wzrost));
    alert(total);
 
   });
 });
[JAVA] pobierz, plaintext

[HTML] pobierz, plaintext 
 <form id="bmi">
Waga: <input id="waga" type="text" name="waga" />KG<br />
Wzrost: <input id="wzrost" type="text" name="wzrost" />m
</form>
<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 
<div id="results"></div>
[HTML] pobierz, plaintext

Oraz

[JAVA] pobierz, plaintext 
$("#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ę

longinus_torwaldzki

26.08.2011, 13:09:25

[HTML] pobierz, plaintext 
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
 
    $(document).ready(function() {
 
                                     $("a").click(function() {
                                     var total = 0;
                                     var waga = parseFloat($('#waga').attr('value'));
                                     var wzrost = parseFloat($('#wzrost').attr('value'));
 
                                    var total = ((waga)/(wzrost * wzrost));
                                            alert(total);
 
                            $("#results").html(total);
                                        return false;
 
 
 
                                 });
                })
 
</script>
</head>
<body>
    <form id="bmi">
      Waga: <input id="waga" type="text" name="waga" />KG<br />
 Wzrost: <input id="wzrost" type="text" name="wzrost" />m
</form>
<a href="">Sprawdz</a>
 <div id="results"></div>
</body>
 
[HTML] pobierz, plaintext

nikos

26.08.2011, 13:40:57

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

longinus_torwaldzki

26.08.2011, 13:47:31

[HTML] pobierz, plaintext 
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
 
    $(document).ready(function() {
 
                                     $("#waga,#wzrost").keyup(function() {
                                     var total = 0;
                                     var waga = parseFloat($('#waga').attr('value'));
                                     var wzrost = parseFloat($('#wzrost').attr('value'));
                                                 if (!waga || !wzrost)return false;                           
                                    var total = ((waga)/(wzrost * wzrost));
 
                            $("#results").html(total);
                                        return false;
 
 
 
                                 });
                })
 
</script>
</head>
<body>
    <form id="bmi">
        Waga: <input id="waga" type="text" name="waga" />KG<br />
         Wzrost: <input id="wzrost" type="text" name="wzrost" />m
   </form>
    <a href="">Sprawdz</a>
    <div id="results"></div>
</body>
 
[HTML] pobierz, plaintext

nikos

26.08.2011, 13:53:08

Dokładnie o to chodziło dziękuję!

-Dyniak-

21.08.2013, 18:11:42

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

Pozdrawiam,
Dyniak

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.