Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JQ] Prosty kalkulator
pietrov8
post
Post #1





Grupa: Zarejestrowani
Postów: 188
Pomógł: 1
Dołączył: 4.07.2009
Skąd: ...

Ostrzeżenie: (10%)
X----

Witam.

Mam taki mały kalkulator składający się z 4 elementów. Dwóch inputów których wartości są aktualizowane na zasadzie slidera z jQuery UI oraz dwóch inputów typu radio zależnych od siebie.

Poniżej przedstawiam szkielet jak to ma wyglądać:
http://jsfiddle.net/qWfdB/6/

Działanie jest banalne lecz nie wiem jak zatkualizować zmienne "na żywo".
Opiszę po krótce o co chodzi.
Mamy dwa inputy których wartość jest aktualizowana poprzez suwaki z jQuery UI. Ich wartości zmieniają się po stronie użytkownika. Chciałbym także by zmienne zawierające wartości tych inputów zmieniały się bez musu odświeżania strony. Tutaj najprawdopodobniej będę musiał zastosować funkcję bind(). Lecz prosiłbym o wskazówki.

Mamy również dwa inputy radio. Tutaj chciałbym by zmienna zawierała wartość inputu który jest aktualnie zaznaczony czyli którego atrybut checked jest checked. Najprawdopodobniej dla radio trzeba będzie zastosować funkcję click() jeżeli się nie mylę.

Wszystko ma się aktualizować po stronie użytkownika bez odświeżania strony.

Z góry dziękuję za wszelkie wskazówki i porady.

Pozdrawiam
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 5)
Dominator
post
Post #2





Grupa: Zarejestrowani
Postów: 565
Pomógł: 15
Dołączył: 11.10.2010

Ostrzeżenie: (20%)
X----

Użyj setInterval do aktualizowania "na żywo".
Go to the top of the page
+Quote Post
grzes999
post
Post #3





Grupa: Zarejestrowani
Postów: 305
Pomógł: 29
Dołączył: 5.07.2011

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

Cytat(Dominator @ 1.09.2012, 11:00:20 ) *
Użyj setInterval do aktualizowania "na żywo".

A do czego on mu tutaj.
http://jsfiddle.net/qWfdB/12/

Ten post edytował grzes999 1.09.2012, 15:08:37
Go to the top of the page
+Quote Post
ethann
post
Post #4





Grupa: Zarejestrowani
Postów: 56
Pomógł: 18
Dołączył: 7.04.2012

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

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html><head>
  3.  
  4. 	<meta charset="utf-8" />
  5.  
  6. 	<link rel="stylesheet" type="text/css" href="http://jqueryui.com/themes/base/jquery.ui.all.css" />
  7. 	<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
  8. 	<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
  9. 	<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
  10. 	<script src="http://jqueryui.com/ui/jquery.ui.mouse.js"></script>
  11. 	<script src="http://jqueryui.com/ui/jquery.ui.slider.js"></script>
  12. 	<script>
  13. 		function updateValue() {
  14. 			var value1 = $( "#slider1" ).slider( "option", "value" );
  15. 			var value2 = $( "#slider2" ).slider( "option", "value" );
  16.  
  17. 			var opcja = $( "input[type=radio][name=opcja]:checked" ).val();
  18.  
  19. 			var wynik = (value1 + value2) * opcja;
  20. 			$("span.wynik").text(wynik);
  21.  
  22. 		}
  23. 		$(function() {
  24. 			$( "#slider1" ).slider({
  25. 				value:100,
  26. 				min: 0,
  27. 				max: 500,
  28. 				step: 1,
  29. 				slide: updateValue,
  30. 				change: updateValue
  31. 			});
  32.  
  33. 			$( "#slider2" ).slider({
  34. 				value:100,
  35. 				min: 0,
  36. 				max: 500,
  37. 				step: 1,
  38. 				slide: updateValue,
  39. 				change: updateValue
  40. 			});
  41.  
  42. 			$( "input[type=radio][name=opcja]" ).change(updateValue);
  43.  
  44. 			updateValue();
  45. 		});
  46. 	</script>
  47.  
  48. </head><body>
  49.  
  50. <div id="slider1" style="width:200px;"></div><br /><br />
  51. <div id="slider2" style="width:200px;"></div>
  52.  
  53. <input type="radio" name="opcja" id="opcja1" value="100" checked="checked">
  54. <label for="opcja1">Opcja 1</label><br />
  55.  
  56. <input type="radio" name="opcja" id="opcja2" value="10">
  57. <label for="opcja2">Opcja 2</label><br />
  58.  
  59. <span class="wynik"></span>
  60.  
  61. </body></html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
pietrov8
post
Post #5





Grupa: Zarejestrowani
Postów: 188
Pomógł: 1
Dołączył: 4.07.2009
Skąd: ...

Ostrzeżenie: (10%)
X----

Kod
    $(function() {
        var input = $('input:checked').val();    
        $('.nr3').val(5*12*input);
        $( ".stanowiska" ).slider({
            range: "min",
            value:14,
            min: 1,
            max: 12,
            step: 1,
            slide: function( event, ui ) {
                $("#amount1").val(ui.value);
                var cena1 = $('#amount').val();
                var cena2 = $('#amount1').val();
                var input = $('input:checked').val();
                $('.nr3').val(+ cena1 * +cena2);
                var cena = input * $('.nr3').val();
                $('.nr3').val(cena);
            }
        });
        $( "#amount1" ).val($( ".stanowiska" ).slider( "value" ) );
    });
    // slider 2
    $(function() {
        var input = $('input:checked').val()
        $('.nr3').val(5*12*input)
        $( ".abonament" ).slider({
            range: "min",
            value:5,
            min: 1,
            max: 12,
            step: 1,
            slide: function( event, ui ) {
                $("#amount").val(ui.value);
                var cena1 = $('#amount').val();
                var cena2 = $('#amount1').val();
                $('.nr3').val(+ cena1 * +cena2);
                var input = $('input:checked').val()
                var cena = input * $('.nr3').val();
                $('.nr3').val(cena);
            }
        });
        $( "#amount" ).val( $( ".abonament" ).slider( "value" ) );

        
    });
            <div class="sowaki">
                <div class="stanowisko_box">
                    <label for="amount">Liczba stanowisk:</label>
                    <input type="text" id="amount1" />
                    <div class="stanowiska"></div>
                </div>
                <div class="orientacyjna">
                    <h5>Orientacyjna cena</h5>
                    <p><input type="text" class="nr3"></span> pln netto</p>
                </div>
                <div class="abonament_box">
                    <label for="amount">Okres abonamentu:</label>
                    <input type="text" id="amount" />
                    <div class="abonament"></div>
                </div>
            </div>


Działa jak należy tylko że zmiana ceny poprzez input radio następuje tylko gdy przesuniemy suwak. Co mam zmienić by tak nie było?
Go to the top of the page
+Quote Post
ethann
post
Post #6





Grupa: Zarejestrowani
Postów: 56
Pomógł: 18
Dołączył: 7.04.2012

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

W sumie podałem Ci gotowy przykład, wystarczyłoby go zmodyfikować/wyciągnąć odpowiednie dane.

[JAVASCRIPT] pobierz, plaintext 
  1. $("input[type=radio][name=opcja]").change(function(){
  2.  // funkcja która wykona się przy zmianie inputu radio
  3. });
[JAVASCRIPT] pobierz, plaintext


Zauważ, że te same inputy muszą mieć tą samą nazwę w tym przypadku. np.
<input type="radio" name="opcja" value="10" />
<input type="radio" name="opcja" value="15" />
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · 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: 23.08.2025 - 20:43
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn