Forum PHP.pl > [PHP] kalkulator - kłopot z deklaracją

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [PHP] kalkulator - kłopot z deklaracją

-poczatkujacy-

21.11.2012, 17:24:47

Witam

Potrzebuje prosty kalkulator.
Poszukałem, wyszperałem i mam.
Teraz zmieniłem 1 rzecz i przestał działac.

Kalkulator to tylko taka tableka
Produkt / ilosc / cena / suma
np.
Produkt#1 / 2 / 5 / =10

Poprawny, dzialajacy kod

Kod

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="pl">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Kalkulator</title>
      <script type="text/javascript" src="http://www.google.com/jsapi"></script>
      <script type="text/javascript">
         google.load("jquery", "1");
      </script>
      <script type="text/javascript">
         function update(){
            var sum = 0;
            $("#calculator > tbody > tr").each(function(){
               var price  = parseFloat($(this).find("td:eq(2)").text());
               var amount = parseFloat($(this).find("td:eq(3)").find("input:first").val());
               var value  = $(this).find("td:eq(4)");
               if (amount > 0) {
                  value.text(price*amount);
                  sum += price*amount;
               } else {
                  value.text(0);
               }
            });
            $("#summary").text(sum);
         }
         $(document).ready(function(){
            update();
            $("#calculator input").keyup(function(){
               update();
            });
         });
      </script>
   </head>
   <body>
      <table id="calculator">
         <thead>
            <tr>
               <th>Rodzaj usługi</th>
               <th>Jm</th>
               <th>Cena</th>
               <th>Ilość</th>
               <th>Wartość</th>
            </tr>
         </thead>
         <tfoot>
            <tr>
               <th colspan="4">Razem</th>
               <th id="summary"></th>
            </tr>
         </tfoot>
         <tbody>
            <tr>
               <td>Produkt 1</td>
               <td>1 szt</td>
               <td>12.00</td>
               <td><input type="text" name="gadzie-gipsowe"></td>
               <td></td>
            </tr>
            <tr>
               <td>Produkt 2</td>
               <td>1 szt.</td>
               <td>5.00</td>
               <td><input type="text" name="malowanie"></td>
               <td></td>
            </tr>

         </tbody>
      </table>
   </body>
</html>

Powyzszy dziala, ale ma zadeklarowane ceny.
Chcialby miec 2 kalkulator, gdzie user sam wpisze cene i ilosc.

Zrobilem zmiane w kodzie i tu pojawia sie problem - nie dziala.
Co zle zrobilem?
Sam chcialem, ale juz nie wiem co zle zrobilem.
Pewnie cos prostego :)

Kod

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf 8">
<title>Kalkulator</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
</script>
<script type="text/javascript">
function update(){
var sum = 0;
$("#calculator > tbody > tr").each(function(){
var price = parseFloat($(this).find("td:eq(2)").find("input:first").val());
var amount = parseFloat($(this).find("td:eq(3)").find("input:second").val());
var value = $(this).find("td:eq(4)");
{
value.text(price*amount);
sum += price*amount;
} else {
value.text(0);
}
});
$("#summary").text(sum);
}
$(document).ready(function(){
update();
$("#calculator input").keyup(function(){
update();
});
});
</script>
</head>
<body>
<table id="calculator">
<thead>
<tr>
<th>Rodzaj usługi</th>
<th>Jednostki</th>
<th>Cena</th>
<th>Ilość</th>
<th>Wartość</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="4">Razem</th>
<th id="summary"></th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Produkt 1</td>
<td>1 szt.</td>
<td><input type="text" name="cena1"></td>
<td><input type="text" name="produkt1"></td>
<td></td>
</tr>
<tr>
<td>Produkt 2</td>
<td>1 szt.</td>
<td><input type="text" name="cena2"></td>
<td><input type="text" name="produkt2"></td>
<td></td>
</tr>

</tbody>
</table>
</body>

Co w powyzszym kodzie jest zle ze nie dziala?

b4rt3kk

21.11.2012, 17:47:01

Ja bym to prościej zrobił:

[HTML] pobierz, plaintext 
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Tytul</title>
<meta charset="utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(function(){
	$('input').keyup(function(){
		var quantity = $(this).closest('.row').children('.cell').children('.quantity').val();
		var price = $(this).closest('.row').children('.cell').children('.price').val();
		sum = quantity*price;
		$(this).closest('.row').children('.cell').children('.sum').html(sum+' PLN');	
	});
});
</script>
<style type="text/css">
.table {
	display: table;
}
 
.row {
	display: table-row;
}
 
.odd {
	background: silver;
}
 
.cell {
	display: table-cell;
	padding: 5px;
}
 
.row input {
	width: 100px;
}
</style>
</head>
 
<body>
<div class="table">
<div class="row">
<div class="cell">Produkt 1</div>
<div class="cell"><input class="quantity" type="text" /></div>
<div class="cell"><input class="price" type="text" /></div>
<div class="cell"><span class="sum"></span></div>
</div>
<div class="row odd">
<div class="cell">Produkt 2</div>
<div class="cell"><input class="quantity" type="text" /></div>
<div class="cell"><input class="price" type="text" /></div>
<div class="cell"><span class="sum"></span></div>
</div>
<div class="row">
<div class="cell">Produkt 3</div>
<div class="cell"><input class="quantity" type="text" /></div>
<div class="cell"><input class="price" type="text" /></div>
<div class="cell"><span class="sum"></span></div>
</div>
<div class="row odd">
<div class="cell">Produkt 4</div>
<div class="cell"><input class="quantity" type="text" /></div>
<div class="cell"><input class="price" type="text" /></div>
<div class="cell"><span class="sum"></span></div>
</div>
</div>
</body>
[HTML] pobierz, plaintext

O to chodzi?

-poczatkujacy-

21.11.2012, 19:48:09

Fakt, inaczej ale efekt ten sam

Brakuje tylko sumy calosci - bo liczy poszczegolne produkty

Jak zmienic aby mozna bylo podawac kwoty 2,50 a nie 2.50.
Jak sie wpisze 2,50 pojawia sie "NaN"

Z reszta sobie poradze

b4rt3kk

21.11.2012, 19:53:51

Musisz użyć replace, bo amerykańce używają kropek jako delimitera i tak się przyjęło w językach programowania.

[HTML] pobierz, plaintext 
var price = $(this).closest('.row').children('.cell').children('.price').val().replace(',','.');
[HTML] pobierz, plaintext

Co do sumy całości:

[HTML] pobierz, plaintext 
var total = 0;
$('.sum').each(function(){
  total += $(this).val();
});
[HTML] pobierz, plaintext

-poczatkujacy-

21.11.2012, 20:18:23

Dzieki.

var price - podmieniam linijke
gdzie wsawic 2 kod var total = 0;
i jak go wywolac?

-poczatkujacy-

22.11.2012, 12:41:05

Nadal nie moge tego poskladac

pomozesz?

Chcialem "podziekowac" ale chyba niezalogowani nie moga, bo nie widze przycisku.
Zaraz zaloze konto.

b4rt3kk

22.11.2012, 14:05:41

Proszę, poprawiona wersja skryptu:

[HTML] pobierz, plaintext 
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Tytul</title>
<meta charset="utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(function(){
 
	$('input').keyup(function(){
		var quantity = $(this).closest('.row').children('.cell').children('.quantity').val();
		var price = $(this).closest('.row').children('.cell').children('.price').val();
		sum = quantity*price;
		$(this).closest('.row').children('.cell').children('.sum').html(sum);
		Total();	
	});
 
	function Total() {
		var total = 0;
		$('.sum').each(function(){
			if ($(this).html() == '') total += 0; else total += parseInt($(this).html());
		});
		$('.total').html(total);
	}
 
});
</script>
<style type="text/css">
.table {
	display: table;
}
 
.row {
	display: table-row;
}
 
.odd {
	background: silver;
}
 
.cell {
	display: table-cell;
	padding: 5px;
}
 
.row input {
	width: 100px;
}
</style>
</head>
 
<body>
<div class="table">
<div class="row">
<div class="cell">Produkt 1</div>
<div class="cell"><input class="quantity" type="text" /></div>
<div class="cell"><input class="price" type="text" /></div>
<div class="cell"><span class="sum"></span></div>
</div>
<div class="row odd">
<div class="cell">Produkt 2</div>
<div class="cell"><input class="quantity" type="text" /></div>
<div class="cell"><input class="price" type="text" /></div>
<div class="cell"><span class="sum"></span></div>
</div>
<div class="row">
<div class="cell">Produkt 3</div>
<div class="cell"><input class="quantity" type="text" /></div>
<div class="cell"><input class="price" type="text" /></div>
<div class="cell"><span class="sum"></span></div>
</div>
<div class="row odd">
<div class="cell">Produkt 4</div>
<div class="cell"><input class="quantity" type="text" /></div>
<div class="cell"><input class="price" type="text" /></div>
<div class="cell"><span class="sum"></span></div>
</div>
<div class="row">
<div class="cell"><span class="total"></span></div>
</div>
</div>
</body>
[HTML] pobierz, plaintext

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.