Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][JavaScript]Problem z select i jquery
elnino17
post 12.04.2014, 19:21:27
Post #1





Grupa: Zarejestrowani
Postów: 35
Pomógł: 0
Dołączył: 2.10.2012

Ostrzeżenie: (10%)
X----

Co jest nie tak z kodem że nic nie wyświetla ? #ulga, jest utworzone
[HTML] pobierz, plaintext 
  1. $(document).ready(function () {
  2.                 switch (parseInt($('#ulga').val())) {
  3.                     case "a" :
  4.                         var cenaZulga = cenaPodstawowa;
  5.                         document.getElementById('cenaZulga').innerHTML = cenaZulga;
  6.                         break;
  7.                     case "b" :
  8.                         var cenaZulga = cenaPodstawowa*0.37;
  9.                         document.getElementById('cenaZulga').innerHTML = cenaZulga;
  10.                         break;
  11.                     case "c" :
  12.                         var cenaZulga = cenaPodstawowa*0.51;
  13.                         document.getElementById('cenaZulga').innerHTML = cenaZulga;
  14.                         break;
  15.                     case "d" :
  16.                         var cenaZulga = cenaPodstawowa*0.37;
  17.                         document.getElementById('cenaZulga').innerHTML = cenaZulga;
  18.                         break;
  19.                 default:
  20.  
  21.     }
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1. <form action="#" onsubmit="showLocation(); return false;">
  2.                                         <select id="ulga" name="ulga">
  3. 						<option value="a">-</option>
  4. 						<option value="b">Uczeń - ulga 37%</option>
  5. 						<option value="c">Student - ulga 51%</option>
  6. 						<option value="d">Emeryt - ulga 37%</option>
  7. 					</select>
  8. 					<table>
  9.                                         <tr>
  10.                                             <td>Miejscowość początkowa</td>
  11.                                         <td>
  12.                                         <input type="text" name="address1" class="field">
  13.                                         </td>
  14.                                         </tr>
  15.                                         <tr>
  16.                                         <td>Miejscowość końcowa</td>
  17.                                         <td>
  18.                                         <input type="text" name="address2" class="field">
  19.                                         </td>
  20.                                         </tr>
  21.                                         </table>
  22. 					<button type="submit" class="submit"><b>Zobacz cenę biletu</b></button> 
  23.     </form>
  24.  
  25.  
[HTML] pobierz, plaintext


Ten post edytował elnino17 12.04.2014, 19:23:06
Go to the top of the page
+Quote Post
trueblue
post 12.04.2014, 19:26:30
Post #2





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

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

Sprawdź co zwraca funkcja parseInt ze stringa typowo tekstowego.

Ten post edytował trueblue 12.04.2014, 19:26:41


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
elnino17
post 12.04.2014, 20:45:11
Post #3





Grupa: Zarejestrowani
Postów: 35
Pomógł: 0
Dołączył: 2.10.2012

Ostrzeżenie: (10%)
X----

Zmieniłem ale wyświetla tylko wartość 10, mimo zmiany listy rozwijanej i wysłania formularza
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Cennik biletów</title>
  5.         <meta charset="UTF-8">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.         <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  8.         <script>
  9.             var cenaPodstawowa = 10.00;
  10.             $(document).ready(function () {
  11.                 switch (parseInt($('#ulga').val())) {
  12.                     case 1 :
  13.                         var cenaZulga = cenaPodstawowa;
  14.                         document.getElementById('cenaZulga').innerHTML = cenaZulga;
  15.                         console.log(cenaZulga);
  16.                         break;
  17.                     case 2 :
  18.                         var cenaZulga = cenaPodstawowa*0.37;
  19.                         document.getElementById('cenaZulga').innerHTML = cenaZulga;
  20.                         console.log(cenaZulga);
  21.                         break;
  22.                     case 3 :
  23.                         var cenaZulga = cenaPodstawowa*0.51;
  24.                         document.getElementById('cenaZulga').innerHTML = cenaZulga;
  25.                         console.log(cenaZulga);
  26.                         break;
  27.                     case 4 :
  28.                         var cenaZulga = cenaPodstawowa*0.37;
  29.                         document.getElementById('cenaZulga').innerHTML = cenaZulga;
  30.                         console.log(cenaZulga);
  31.                         break;
  32.  
  33.                 }
  34.                 }); 
  35.  
  36.  
  37.         </script>
  38.     </head>
  39.     <body>
  40.         <form>
  41.                                         <select id="ulga">
  42. 						<option value="01">-</option>
  43. 						<option value="02">Uczeń - ulga 37%</option>
  44. 						<option value="03">Student - ulga 51%</option>
  45. 						<option value="04">Emeryt - ulga 37%</option>
  46. 					</select>
  47. 					<a href="#">Open</a> 
  48.         </form>
  49.         <h1 id="cenaZulga"></h1>
  50.  
  51.     </body>
  52. </html>
  53.  
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
ber32
post 12.04.2014, 20:51:45
Post #4





Grupa: Zarejestrowani
Postów: 332
Pomógł: 22
Dołączył: 6.07.2010

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

Zrób tak
do każdego tego elementu przypisz inną cenę np
[HTML] pobierz, plaintext 
  1. document.getElementById('cenaZulga').innerHTML = 5;
[HTML] pobierz, plaintext

potem zmień wszystkie value="01" na value="1" itd...
i napisz czy ok

Ten post edytował ber32 12.04.2014, 20:53:49


--------------------
PDO
Go to the top of the page
+Quote Post
elnino17
post 12.04.2014, 21:01:14
Post #5





Grupa: Zarejestrowani
Postów: 35
Pomógł: 0
Dołączył: 2.10.2012

Ostrzeżenie: (10%)
X----

Zrobiłem tak:
[HTML] pobierz, plaintext 
  1.  case 2 :
  2.                         var cenaZulga = cenaPodstawowa;
  3.                         document.getElementById('cenaZulga').innerHTML = 27;
  4.                         console.log(cenaZulga);
  5.                         break;
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1. <option value = "2">Uczeń - ulga 37%</option>
[HTML] pobierz, plaintext

i nie działa.
Go to the top of the page
+Quote Post
ber32
post 13.04.2014, 00:03:43
Post #6





Grupa: Zarejestrowani
Postów: 332
Pomógł: 22
Dołączył: 6.07.2010

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

No i co zero inicjatywy. ohno-smiley.gif 

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Cennik biletów</title>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  8. <script>
  9. $(document).ready(function () {
  10.    var cenaPodstawowa = 10.00;
  11.   $( "select" )
  12. .change(function() {  
  13.     $('#ulga option:selected').each(function() {
  14.        var x = $( this ).val();
  15.          switch (parseInt(x)) {
  16. case 1 :
  17. var cenaZulga = cenaPodstawowa;
  18. $( "#cenaZulga" ).text( cenaZulga ); 
  19. console.log(cenaZulga);
  20. break;
  21. case 2 :
  22. var cenaZulga = cenaPodstawowa*0.37;
  23. $( "#cenaZulga" ).text( cenaZulga );
  24. console.log(cenaZulga);
  25. break;
  26. case 3 :
  27. var cenaZulga = cenaPodstawowa*0.51;
  28. $( "#cenaZulga" ).text( cenaZulga );
  29. console.log(cenaZulga);
  30. break;
  31. case 4 :
  32. var cenaZulga = cenaPodstawowa*0.399;
  33. $( "#cenaZulga" ).text( cenaZulga );
  34. console.log(cenaZulga);
  35. break;
  36. }
  37. }); 
  38. });
  39.      }); 
  40. </script>
  41. </head>
  42. <body>
  43. <form>
  44. <select id="ulga">
  45. <option value="01">-</option>
  46. <option value="02">Uczeń - ulga 37%</option>
  47. <option value="03">Student - ulga 51%</option>
  48. <option value="04">Emeryt - ulga 37%</option>
  49. </select>
  50. <a href="#">Open</a>
  51. </form>
  52. <h1 id="cenaZulga"></h1>
  53.  
  54. </body>
  55. </html>
[HTML] pobierz, plaintext


I daj więcej ulgi na emerytów bo są biedni na leki nie mają, a dla studentów przynajmniej 90% oneeyedsmiley02.png

Ten post edytował ber32 13.04.2014, 00:06:28


--------------------
PDO
Go to the top of the page
+Quote Post
elnino17
post 13.04.2014, 20:22:22
Post #7





Grupa: Zarejestrowani
Postów: 35
Pomógł: 0
Dołączył: 2.10.2012

Ostrzeżenie: (10%)
X----

Dzięki, wszystko działa, temat do zamknięcia smile.gif

Ten post edytował elnino17 14.04.2014, 06:17:20
Go to the top of the page
+Quote Post
« 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: 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 Wersja Lo-Fi Aktualny czas: 27.04.2024 - 14:07
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn