Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][HTML] Różne działania na liczbach z formularza - brak umiejętności
Forum PHP.pl > Forum > Przedszkole
encoresin
28.02.2018, 16:59:41
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.
trzczy
28.02.2018, 18:49:31
Skrypt padł? Ale jaki błąd i w której linii?
encoresin
28.02.2018, 19:07:53
Chodziło mi raczej o brak wyniku tam gdzie chciałbym by był. Wiem, że robię źle, ale nie wiem co.
viking
28.02.2018, 19:10:48
A po co tam eval jak zwykle dodawanie robisz?
encoresin
28.02.2018, 19:22:36
Chyba nie wyraziłem się jasno - skopiowałem czyis kod, by przerobić go do swoich potrzeb KOMPLETNIE nie umiejąc JS arrowheadsmiley.png Więc nawet nie wiem co to jest :S


EDIT: parseInt($('#oplaty12').val(),10);

Z tej linijki np. rozumiem tylko to, że łącze ID w chcianym formularzu biggrin.gif
viking
28.02.2018, 19:30:37
To źle rozumiesz bo nic nie łączysz w tej linii. https://jsfiddle.net/zctb4bx9/2/
encoresin
28.02.2018, 19:42:00
No łączę wpisując "oplaty12". Nie wiem jak to poprawnie nazwać. Odnoszę się? Nie ważne.

Czyli cały ten skrypt mogę zrobić w ten sposób? Nie trzeba nic przed tym równaniem pisać?
viking
28.02.2018, 19:45:17
A działa w linku? Skoro tak to masz odpowiedź.
encoresin
28.02.2018, 19:55:22
Cytat(viking @ 28.02.2018, 19:45:17 ) *
A działa w linku? Skoro tak to masz odpowiedź.


Dziękuje serdecznie za pomoc. Pytam, nie bo jestem robotem, a dlatego, że wcześniej było tam coś przed, do dodawania zrobiłeś bez - ale mam też mnożenie, dzielenie. Może tam trzeba będzie znów coś dodać?


EDIT: Przykładowo teraz chcę bel3 pomnożyć przez 4 - ale się nie da. Próbowałem w nawias, w " i w '. A więc muszę specjalnie nową linie zapisać (var value....) czy coś dopisać?
viking
28.02.2018, 20:03:34
To i tak jedno jest pewne. W 99.9% przypadków eval nie powinno się znajdować w żadnym kodzie.
encoresin
28.02.2018, 20:43:59
Podstawowe ogarnięte. Teraz dosyć trudne...

Dropdown menu "element_21". Jak to połączyć z cenami z pierwszych trzech pól formularza?
viking
28.02.2018, 20:52:51
A konkretnie?
encoresin
28.02.2018, 20:58:50 
[PHP] pobierz, plaintext 
  1. 			<ul >
  2.  
  3. 					<li id="li_14" >
  4. 		<label class="description" for="cena_on">cena  on </label>
  5. 		<div>
  6. <!-- TU user ma wpisać cenę -->
  7. 			<input id="cena_on" type="text" maxlength="255" value=""/> 
  8. 		</div> 
  9. 		</li>		<li id="li_15" >
  10. 		<label class="description" for="cena_pb">cena pb </label>
  11. 		<div>
  12. <!-- TU user ma wpisać 2 cenę -->
  13. 			<input id="cena_pb" type="text" maxlength="255" value=""/> 
  14. 		</div> 
  15. 		</li>		<li id="li_16" >
  16. 		<label class="description" for="cena_lpg">cena lpg </label>
  17. 		<div>
  18. <!-- TU user ma wpisać 3 cenę -->
  19. 			<input id="cena_lpg" type="text" maxlength="255" value=""/> 
  20. 		</div> 
  21. 		</li>		
[PHP] pobierz, plaintext


Z tych pól ma być wzięta wartość dla wybranej opcji z dropdown menu

[PHP] pobierz, plaintext 
  1. 		<label class="description" for="element_21">rodzaj paliwa </label>
  2. 		<div>
  3. <!-- 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... -->
  4. 		<select class="element select medium" id="element_21"> 
  5. 			<option value="" selected="selected"></option>
  6.               <option value="cena_on" >ON</option>
  7.               <option value="cena_pb" >PB</option>
  8.               <option value="cena_lpg" >LPG</option>
  9. 		</select>
  10. 		</div> 
  11. 		</li>	
[PHP] pobierz, plaintext



Czyli zakładając, że w pierwsze pole wpiszę 1, w drugie 2, w trzecie 3. To wybierając coś z dropdown menu np ON - opcja pierwsza, to właśnie 1 będzie brane pod uwagę. Ktoś uzupełni wszystko i stwierdzi, że to miał być PB, to wybierając z Dropdown zmieni 1 na opcję drugą czyli przyporządkowana jej liczba 2 i obliczenia zmienią się zgodnie z tym.
viking
1.03.2018, 09:08:07
Zrób zdarzenie change na select i po wybraniu odczytuj wartość danego pola. Na forum pomagamy w problemach a nie pisać cały kod za kogoś. Od tego jest dział zleceń.
encoresin
1.03.2018, 13:04:13
Zgadzam się. Pewnie ktoś by to zrobił w 5 minut. Inaczej, jakbyś chciał pobawić się czymś nowym, mając nawet jakiś cel to pewnie chciałbyś się pomęczyć troszkę i głupio popytać tak by choć trochę dziubnąć czegoś nowego.

Tak też kiedyś uczyłem się HTML'a. Blogi w sumie nie miały dużo z nim wspólnego, ale było trzeba dodawać obrazki. Więc coś się tam powąchało. Później już na ftp się robiło w WYSIWYG i ewentualne edycje kodu. I tak na głupka szło się sporo nauczyć. Później było podobnie z PHP. Tylko, że w tym się aż tak nie zagłębiałem - widząc kod wiem co edytować by dostać co chcę.

Także wolę się jak kretyn popytać i sam zobaczyć co się stanie gdy... Nie chcę się uczyć całości od podstaw, chcę tylko zobaczyć z czym to się je. Poza tym skrypt jest tak mały i żałosny, że nie będzie tu dużo do roboty.

Mam nadzieję, że rozumiesz.
viking
1.03.2018, 13:10:32
Niestety nie. Metoda na żula na mnie nie działa. Poświęć godzinę, poszukaj i nauczysz się czegoś nowego.Trudne nie jest, wystarczy trochę usiąść i chcieć poznać podstawy (zdarzenia to totalne podstawy JS).
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.