Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript][HTML] Różne działania na liczbach z formularza - brak umiejętności, Jak wyświetlić wynik równań?
encoresin
post 28.02.2018, 16:59:41
Post #1





Grupa: Zarejestrowani
Postów: 19
Pomógł: 0
Dołączył: 6.05.2017

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

Witam,

Kiedyś zrobiłem sobie w Excelu (i tam zrobić to to pikuś) pewien kalkulatorek, który oblicza mi pewne rzeczy wprowadzone w tabelę. Teraz chciałbym udostępnić to rozwiązanie odwiedzającym moją stronę gościom.

Jako, że na PHP znam się o włos lepiej niż na JS, zacząłem tam poszukiwania. Wszędzie odradzano, bo przecież łatwiej zrobić to w JS. No to poszukałem jakiś gotowców i za chiny nie rozumiem. Po kilkunastu stronach znalazłem jakiś skrypcik, który w sumie wystarczyło rozwinąć do moich potrzeb. Zmiana ich danych na moje pozwoliła wyświetlić mi ich wynik w moim skrypcie - trochę działa - sukces. Dalej, chciałem już dodać moje obliczenia. I tu już przestało działać. Nie mam kompletnie pojęcia co mam robić... Skrypt męczę na jsbin.com, ale i tak nie wychodzi.

[HTML] pobierz, plaintext 
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <title>Calc</title>
  7. <script type="text/javascript" src="view.js"></script>
  8.  
  9. </head>
  10. <body id="main_body" >
  11.  
  12. 	<img id="top" src="top.png" alt="">
  13. 	<div id="form_container">
  14.  
  15. 		<h1><a>Calc</a></h1>
  16. 		<form id="form_1" class="appnitro"  method="post" action="">
  17. 					<div class="form_description">
  18. 			<p>Desc.</p>
  19. 		</div>						
  20. 			<ul >
  21.  
  22. 					<li id="li_14" >
  23. 		<label class="description" for="cena_on">cena  on </label>
  24. 		<div>
  25. <!-- TU user ma wpisać cenę -->
  26. 			<input id="cena_on" type="text" maxlength="255" value=""/> 
  27. 		</div> 
  28. 		</li>		<li id="li_15" >
  29. 		<label class="description" for="cena_pb">cena pb </label>
  30. 		<div>
  31. <!-- TU user ma wpisać 2 cenę -->
  32. 			<input id="cena_pb" type="text" maxlength="255" value=""/> 
  33. 		</div> 
  34. 		</li>		<li id="li_16" >
  35. 		<label class="description" for="cena_lpg">cena lpg </label>
  36. 		<div>
  37. <!-- TU user ma wpisać 3 cenę -->
  38. 			<input id="cena_lpg" type="text" maxlength="255" value=""/> 
  39. 		</div> 
  40. 		</li>		<li class="section_break">
  41. 			<h3>Section Break</h3>
  42. 			<p></p>
  43. 		</li>		<li id="li_1" >
  44. 		<label class="description" for="element_1">Nazwa </label>
  45. 		<div>
  46. <!-- TU user ma wpisać nazwę która mu pasuje - nie wliczane w kalkulacje -->
  47. 			<input id="element_1" type="text" maxlength="255" value=""/> 
  48. 		</div> 
  49. 		</li>		<li id="li_21" >
  50. 		<label class="description" for="element_21">rodzaj paliwa </label>
  51. 		<div>
  52. <!-- TU user ma wybrać opcję - i ta opcja będzie posiadała jedną z wartości podanej u góry w cenie 1, 2 lub 3. Tu na pewno siedzi błąd, ale nie umiem zmusić skryptu do liczenia 4 pól, a co dopiero tego... -->
  53. 		<select class="element select medium" id="element_21"> 
  54. 			<option value="" selected="selected"></option>
  55.               <option value="cena_on" >ON</option>
  56.               <option value="cena_pb" >PB</option>
  57.               <option value="cena_lpg" >LPG</option>
  58. 		</select>
  59. 		</div> 
  60. 		</li>		<li class="section_break">
  61. 			<h3>Section Break</h3>
  62. 			<p></p>
  63. 		</li>		<li id="li_2" >
  64. 		<label class="description" for="bel3">Dodatek 3 </label>
  65. 		<div>
  66. <!-- TU user ma wpisać wartość liczbową -->
  67. 			<input id="bel3" type="text" maxlength="255" value=""/> 
  68. 		</div> 
  69. 		</li>		<li id="li_3" >
  70. 		<label class="description" for="bel12">Dodatek 12 </label>
  71. 		<div>
  72. <!-- To chciałem zmienić, aby nie wyświetlało się okienko, ale wynik (bel3 * 4) -->
  73.           <input id="bel12" type="text" maxlength="255" value=""/> 
  74. 		</div> 
  75. 		</li>		<li class="section_break">
  76. 			<h3>Section Break</h3>
  77. 			<p></p>
  78. 		</li>		<li id="li_5" >
  79. 		<label class="description" for="ver1">ube 1 </label>
  80. 		<div>
  81. <!-- TU user ma wpisać wartość liczbową -->
  82. 			<input id="ver1" type="text" maxlength="255" value=""/> 
  83. 		</div> 
  84. 		</li>		<li id="li_6" >
  85. 		<label class="description" for="ver12">ube 12 </label>
  86. 		<div>
  87. <!-- To chciałem zmienić, aby nie wyświetlało się okienko, ale wynik (ver1 * 12) -->
  88. 			<input id="ver12" type="text" maxlength="255" value=""/> 
  89. 		</div> 
  90. 		</li>		<li class="section_break">
  91. 			<h3>Section Break</h3>
  92. 			<p></p>
  93. 		</li>		<li id="li_4" >
  94. 		<label class="description" for="km12">kmR </label>
  95. 		<div>
  96. <!-- TU user ma wpisać wartość liczbową -->
  97. 			<input id="km12" type="text" maxlength="255" value=""/> 
  98. 		</div> 
  99. 		</li>		<li class="section_break">
  100. 			<h3>Section Break</h3>
  101. 			<p></p>
  102. 		</li>		<li id="li_7" >
  103. 		<label class="description" for="koms">hovelL</label>
  104. 		<div>
  105. <!-- TU user ma wpisać wartość liczbową -->
  106. 			<input id="koms" type="text" maxlength="255" value=""/> 
  107. 		</div> 
  108. 		</li>		<li class="section_break">
  109. 			<h3>Section Break</h3>
  110. 			<p></p>
  111. 		</li>		<li id="li_9" >
  112. 		<label class="description" for="spalanie12">spalanie12 </label>
  113. 		<div>
  114. <!-- To chciałem zmienić, aby nie wyświetlało się okienko, ale wynik ((koms*wybrany z dropboxa element 21)*(km12/100)) -->
  115. 			<input id="spalanie12" type="text" maxlength="255" value=""/> 
  116. 		</div> 
  117. 		</li>		<li id="li_8" >
  118. 		<label class="description" for="oplaty12">oplata </label>
  119. 		<div>
  120. <!-- To chciałem zmienić, aby nie wyświetlało się okienko, ale wynik (bel12 * ver12) -->
  121. 			<input id="oplaty12" type="text" maxlength="255" value=""/> 
  122. 		</div> 
  123. 		</li>		<li class="section_break">
  124. 			<h3>Section Break</h3>
  125. 			<p></p>
  126. 		</li>		<li id="li_11" >
  127. 		<label class="description" for="total">RAZEM </label>
  128. 		<div>
  129. <!-- To chciałem zmienić, aby nie wyświetlało się okienko, ale wynik (spalanie12+oplaty12) -->
  130. 			<input id="total" type="text" maxlength="255" value=""/> 
  131. 		</div> 
  132. 		</li>
  133.               <!-- Zanim zacząłem grzebać to tu ładnie wyświetlał się wynik... Mój HTML posiadał przycisk, a skrypt liczył wszystko w tle, więc nie był wymagany - stąd na początku HTML'u ten 'POST' -->
  134.                                     Razem: <span id="razem"> </span><br/>
  135.  
  136.  
  137. 		</li>
  138. 			</ul>
  139. 		</form>	
  140. 	</body>
  141. </html>
  142.  
[HTML] pobierz, plaintext


Jeżeli o JS chodzi to bardzo szybko stanąłem... zmieniłem tylko to "eval(value10 + value11);" na swoje dane i skrypt padł... Więc nie potrafię zrobić nawet najprostszego równania.
[PHP] pobierz, plaintext 
  1.  
  2. $('#cena_on, #cena_pb, #cena_lpg, #bel3, #ver1, #km12, #koms').on('keyup', function() {
  3.   var value1 = parseInt($('#cena_on').val(),10);
  4.   var value2 = parseInt($('#cena_pb').val(),10);
  5.   var value3 = parseInt($('#cena_lpg').val(),10);
  6.   var value4 = parseInt($('#bel3').val(),10);
  7.   var value5 = parseInt($('#bel12').val(),10);
  8.   var value6 = parseInt($('#ver1').val(),10);
  9.   var value7 = parseInt($('#ver12').val(),10);
  10.   var value8 = parseInt($('#km12').val(),10);
  11.   var value9 = parseInt($('#koms').val(),10);
  12.   var value10 = parseInt($('#spalanie12').val(),10);
  13.   var value11 = parseInt($('#oplaty12').val(),10);
  14.  
  15.  
  16.   var razem = eval(value10 + value11);
  17.   $('#razem').text(razem);
  18.  
  19. });
  20.  
[PHP] pobierz, plaintext


Jak już to zadziała i będzie mnie słuchać to z tego co zauważyłem - gdy są puste pola wynik to NaN - będę chciał to zmienić na informacje o pustym polu, ale sam chcę spróbować to zrobić.

Poproszę o podpowiedzi, nie od razu gotowca.
Go to the top of the page
+Quote Post

Posty w temacie
- encoresin   [JavaScript][HTML] Różne działania na liczbach z formularza - brak umiejętności   28.02.2018, 16:59:41
- - trzczy   Skrypt padł? Ale jaki błąd i w której linii?   28.02.2018, 18:49:31
- - encoresin   Chodziło mi raczej o brak wyniku tam gdzie chciałb...   28.02.2018, 19:07:53
- - viking   A po co tam eval jak zwykle dodawanie robisz?   28.02.2018, 19:10:48
- - encoresin   Chyba nie wyraziłem się jasno - skopiowałem czyis...   28.02.2018, 19:22:36
- - viking   To źle rozumiesz bo nic nie łączysz w tej linii. h...   28.02.2018, 19:30:37
- - encoresin   No łączę wpisując "oplaty12". Nie wiem ...   28.02.2018, 19:42:00
- - viking   A działa w linku? Skoro tak to masz odpowiedź.   28.02.2018, 19:45:17
|- - encoresin   Cytat(viking @ 28.02.2018, 19:45:17 )...   28.02.2018, 19:55:22
- - viking   To i tak jedno jest pewne. W 99.9% przypadków eval...   28.02.2018, 20:03:34
- - encoresin   Podstawowe ogarnięte. Teraz dosyć trudne... Dropd...   28.02.2018, 20:43:59
- - viking   A konkretnie?   28.02.2018, 20:52:51
- - encoresin   [PHP] pobierz, plaintext <ul >  ...   28.02.2018, 20:58:50
- - viking   Zrób zdarzenie change na select i po wybraniu odcz...   1.03.2018, 09:08:07
- - encoresin   Zgadzam się. Pewnie ktoś by to zrobił w 5 minut. ...   1.03.2018, 13:04:13
- - viking   Niestety nie. Metoda na żula na mnie nie działa. P...   1.03.2018, 13:10:32

« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 19.07.2025 - 09:45
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn