Forum PHP.pl > [JQ] Prosty kalkulator

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

pietrov8

1.09.2012, 09:19:57

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

Dominator

1.09.2012, 10:00:20

Użyj setInterval do aktualizowania "na żywo".

grzes999

1.09.2012, 15:01:38

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/

ethann

1.09.2012, 15:59:16

[HTML] pobierz, plaintext 
<!DOCTYPE html>
<html><head>
 
	<meta charset="utf-8" />
 
	<link rel="stylesheet" type="text/css" href="http://jqueryui.com/themes/base/jquery.ui.all.css" />
	<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
	<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
	<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
	<script src="http://jqueryui.com/ui/jquery.ui.mouse.js"></script>
	<script src="http://jqueryui.com/ui/jquery.ui.slider.js"></script>
	<script>
		function updateValue() {
			var value1 = $( "#slider1" ).slider( "option", "value" );
			var value2 = $( "#slider2" ).slider( "option", "value" );
 
			var opcja = $( "input[type=radio][name=opcja]:checked" ).val();
 
			var wynik = (value1 + value2) * opcja;
			$("span.wynik").text(wynik);
 
		}
		$(function() {
			$( "#slider1" ).slider({
				value:100,
				min: 0,
				max: 500,
				step: 1,
				slide: updateValue,
				change: updateValue
			});
 
			$( "#slider2" ).slider({
				value:100,
				min: 0,
				max: 500,
				step: 1,
				slide: updateValue,
				change: updateValue
			});
 
			$( "input[type=radio][name=opcja]" ).change(updateValue);
 
			updateValue();
		});
	</script>
 
</head><body>
 
<div id="slider1" style="width:200px;"></div><br /><br />
<div id="slider2" style="width:200px;"></div>
 
<input type="radio" name="opcja" id="opcja1" value="100" checked="checked">
<label for="opcja1">Opcja 1</label><br />
 
<input type="radio" name="opcja" id="opcja2" value="10">
<label for="opcja2">Opcja 2</label><br />
 
<span class="wynik"></span>
 
</body></html>
[HTML] pobierz, plaintext

pietrov8

2.09.2012, 10:09:05

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?

ethann

2.09.2012, 10:25:41

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

[JAVASCRIPT] pobierz, plaintext 
$("input[type=radio][name=opcja]").change(function(){
 // funkcja która wykona się przy zmianie inputu radio
});
[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" />

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.