Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [PHP] kalkulator - kłopot z deklaracją, prawie dziala
--poczatkujacy--
post
Post #1





Goście
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?
Go to the top of the page
+Quote Post
b4rt3kk
post
Post #2





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

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

Ja bym to prościej zrobił:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html lang="pl">
  3. <head>
  4. <title>Tytul</title>
  5. <meta charset="utf-8" />
  6. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
  7. <script type="text/javascript">
  8. $(function(){
  9. 	$('input').keyup(function(){
  10. 		var quantity = $(this).closest('.row').children('.cell').children('.quantity').val();
  11. 		var price = $(this).closest('.row').children('.cell').children('.price').val();
  12. 		sum = quantity*price;
  13. 		$(this).closest('.row').children('.cell').children('.sum').html(sum+' PLN');	
  14. 	});
  15. });
  16. </script>
  17. <style type="text/css">
  18. .table {
  19. 	display: table;
  20. }
  21.  
  22. .row {
  23. 	display: table-row;
  24. }
  25.  
  26. .odd {
  27. 	background: silver;
  28. }
  29.  
  30. .cell {
  31. 	display: table-cell;
  32. 	padding: 5px;
  33. }
  34.  
  35. .row input {
  36. 	width: 100px;
  37. }
  38. </style>
  39. </head>
  40.  
  41. <body>
  42. <div class="table">
  43. <div class="row">
  44. <div class="cell">Produkt 1</div>
  45. <div class="cell"><input class="quantity" type="text" /></div>
  46. <div class="cell"><input class="price" type="text" /></div>
  47. <div class="cell"><span class="sum"></span></div>
  48. </div>
  49. <div class="row odd">
  50. <div class="cell">Produkt 2</div>
  51. <div class="cell"><input class="quantity" type="text" /></div>
  52. <div class="cell"><input class="price" type="text" /></div>
  53. <div class="cell"><span class="sum"></span></div>
  54. </div>
  55. <div class="row">
  56. <div class="cell">Produkt 3</div>
  57. <div class="cell"><input class="quantity" type="text" /></div>
  58. <div class="cell"><input class="price" type="text" /></div>
  59. <div class="cell"><span class="sum"></span></div>
  60. </div>
  61. <div class="row odd">
  62. <div class="cell">Produkt 4</div>
  63. <div class="cell"><input class="quantity" type="text" /></div>
  64. <div class="cell"><input class="price" type="text" /></div>
  65. <div class="cell"><span class="sum"></span></div>
  66. </div>
  67. </div>
  68. </body>
[HTML] pobierz, plaintext


O to chodzi?
Go to the top of the page
+Quote Post
--poczatkujacy--
post
Post #3





Goście
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 (IMG:style_emoticons/default/wink.gif)
Go to the top of the page
+Quote Post
b4rt3kk
post
Post #4





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

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

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

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


Co do sumy całości:

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


Ten post edytował b4rt3kk 21.11.2012, 19:56:11
Go to the top of the page
+Quote Post
--poczatkujacy--
post
Post #5





Goście
Dzieki.

var price - podmieniam linijke
gdzie wsawic 2 kod var total = 0;
i jak go wywolac?
Go to the top of the page
+Quote Post
--poczatkujacy--
post
Post #6





Goście
Nadal nie moge tego poskladac (IMG:style_emoticons/default/sad.gif)
pomozesz?

Chcialem "podziekowac" ale chyba niezalogowani nie moga, bo nie widze przycisku.
Zaraz zaloze konto.
Go to the top of the page
+Quote Post
b4rt3kk
post
Post #7





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

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

Proszę, poprawiona wersja skryptu:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html lang="pl">
  3. <head>
  4. <title>Tytul</title>
  5. <meta charset="utf-8" />
  6. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
  7. <script type="text/javascript">
  8. $(function(){
  9.  
  10. 	$('input').keyup(function(){
  11. 		var quantity = $(this).closest('.row').children('.cell').children('.quantity').val();
  12. 		var price = $(this).closest('.row').children('.cell').children('.price').val();
  13. 		sum = quantity*price;
  14. 		$(this).closest('.row').children('.cell').children('.sum').html(sum);
  15. 		Total();	
  16. 	});
  17.  
  18. 	function Total() {
  19. 		var total = 0;
  20. 		$('.sum').each(function(){
  21. 			if ($(this).html() == '') total += 0; else total += parseInt($(this).html());
  22. 		});
  23. 		$('.total').html(total);
  24. 	}
  25.  
  26. });
  27. </script>
  28. <style type="text/css">
  29. .table {
  30. 	display: table;
  31. }
  32.  
  33. .row {
  34. 	display: table-row;
  35. }
  36.  
  37. .odd {
  38. 	background: silver;
  39. }
  40.  
  41. .cell {
  42. 	display: table-cell;
  43. 	padding: 5px;
  44. }
  45.  
  46. .row input {
  47. 	width: 100px;
  48. }
  49. </style>
  50. </head>
  51.  
  52. <body>
  53. <div class="table">
  54. <div class="row">
  55. <div class="cell">Produkt 1</div>
  56. <div class="cell"><input class="quantity" type="text" /></div>
  57. <div class="cell"><input class="price" type="text" /></div>
  58. <div class="cell"><span class="sum"></span></div>
  59. </div>
  60. <div class="row odd">
  61. <div class="cell">Produkt 2</div>
  62. <div class="cell"><input class="quantity" type="text" /></div>
  63. <div class="cell"><input class="price" type="text" /></div>
  64. <div class="cell"><span class="sum"></span></div>
  65. </div>
  66. <div class="row">
  67. <div class="cell">Produkt 3</div>
  68. <div class="cell"><input class="quantity" type="text" /></div>
  69. <div class="cell"><input class="price" type="text" /></div>
  70. <div class="cell"><span class="sum"></span></div>
  71. </div>
  72. <div class="row odd">
  73. <div class="cell">Produkt 4</div>
  74. <div class="cell"><input class="quantity" type="text" /></div>
  75. <div class="cell"><input class="price" type="text" /></div>
  76. <div class="cell"><span class="sum"></span></div>
  77. </div>
  78. <div class="row">
  79. <div class="cell"><span class="total"></span></div>
  80. </div>
  81. </div>
  82. </body>
[HTML] pobierz, plaintext
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: Standardowy · Przełącz na: 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 - 22:32
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn