Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP][AJAX] Wyświetlanie zależne od select
Forum PHP.pl > Forum > XML, AJAX
CiRiO
27.09.2012, 20:06:12
Borykam się z pewnym problemem. Opiszę może to na przykładach.
[XML] pobierz, plaintext 
  1. function showPrice(str)
  2. {
  3. var xmlhttp;    
  4. if (str=="")
  5.   {
  6.   document.getElementById("txtHint").innerHTML="";
  7.   return;
  8.   }
  9. if (window.XMLHttpRequest)
  10.   {// code for IE7+, Firefox, Chrome, Opera, Safari
  11.   xmlhttp=new XMLHttpRequest();
  12.   }
  13. else
  14.   {// code for IE6, IE5
  15.   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  16.   }
  17. xmlhttp.onreadystatechange=function()
  18.   {
  19.   if (xmlhttp.readyState==4 && xmlhttp.status==200)
  20.     {
  21.     document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
  22.     }
  23.   }
  24. xmlhttp.open("GET","includes/price.php?q="+str,true);
  25. xmlhttp.send();
  26. }
[XML] pobierz, plaintext 


[PHP] pobierz, plaintext 
  1. $q=$_GET["q"];
  2.  
  3. $dbConnect = mysql_connect ($dbHost, $dbUser, $dbPass) or die ('MySQL connect failed. ' . mysql_error());
  4. mysql_select_db($dbName) or die('Cannot select database. ' . mysql_error());
  5.  
  6. $sql = "SELECT * FROM pfase_server, pfase_settings, pfase_payment WHERE payment_id = $q"; 
  7. $result = mysql_query($sql) or die(mysql_error());
  8. $row = mysql_fetch_assoc($result);
  9.  
  10. echo "Cena za SMS: <span>".$row['payment_price']."zł</span> z VAT";
[PHP] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <select onchange="showPrice(this.value)">
  2. 	 	<option value=""></option>
  3. 	        {foreach from=$payment item=row}<option value="{$row.payment_id}">{$row.payment_time}</option>{/foreach}
  4. </select>
[HTML] pobierz, plaintext


W <div id=#txtHint> wyświetla mi się cena, która jest zależna od wyboru w select. Moim celem jest wyświetlenie ponowne ceny, oraz numeru z bazy (id select = id ceny i numeru) tylko w innej postaci, tzn. nie "Cena za SMS: <span>".$row['payment_price']."zł</span> z VAT".
Proszę o pomoc.
szalek01
27.09.2012, 20:07:56
exclamation.gif! sql injection = (SELECT * FROM pfase_server, pfase_settings, pfase_payment WHERE payment_id = $q) <= $q=$_GET["q"];
poczytaj o PDO i JQUERY AJAX
CiRiO
27.09.2012, 20:33:41
Wiem doskonale, że ten kod jest dziurawy i wiem jak temu zaradzić, lecz w tym etapie tworzenia kwestie zabezpieczeń pomijam. Tak samo metoda łączenia się z bazą jest tymczasowa. Odesłanie mnie do lektury jQuery AJAX nie jest rozwiązaniem problemu, tym bardziej, że nie nie poruszam się w tej tematyce i wiedza wykraczająca ponad podstawy jest mi zupełnie zbędna.
Pozdrawiam
Arcioch
28.09.2012, 09:18:01
Hej smile.gif

Tu masz napisane to co potrzebujesz tylko na tablicach i wykorzystując jQuery wink.gif Kod składa się z 2 plików wink.gif selecty.php w którym jest select i kod w js wysyłający wartość selecta do drugiego pliku post.php.
Dostosuj sobie to do bazy danych a następnie odpowiednio zabezpiecz wink.gif

Plik selecty.php

[HTML] pobierz, plaintext 
  1. <?php
  2. 	$produkty = array('Komputer', 'Telewizor', 'Telefon');
  3. ?>
  4.  
  5.  
  6. <!DOCTYPE html>
  7. <html>
  8. <head>
  9. <meta charset="UTF-8">
  10. <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
  11.  
  12. <style>
  13. div.first_select{
  14. display: block;
  15. float: left;
  16. width: 200px;
  17. }
  18.  
  19. select{
  20. width: 150px;
  21. text-align: center;
  22. }
  23.  
  24. div.decv{
  25. display: block;
  26. float: left;
  27. clear: both;
  28. margin: 100px 0px 0px 0px;
  29. }
  30. </style>
  31.  
  32. <script>
  33.  
  34. $(function(){
  35. 	// Tu masz funckje odpowiedzialna za pierwszego select
  36.  
  37. 	$('#produkty').change(function() {
  38.  
  39. 		var produkt = $('select#produkty option:selected').val();
  40.  
  41. 		if(produkt != ''){
  42. 			$.ajax({
  43. 				type: "POST",
  44. 				url: "post.php",
  45. 				data: "produkt=" + produkt , 
  46. 				cache: false,
  47. 				dataType: "json",
  48. 				success: function(data){
  49. 						$('div.desc').html(data);
  50. 				}				
  51. 			});
  52. 		}else{
  53. 			$('div.desc').html('');
  54. 		}
  55.  
  56. 	});	
  57.  
  58. });
  59.  
  60. </script>
  61.  
  62. </head>
  63. <body>
  64.  
  65. <div class="first_select">
  66. 	<select id="produkty" name="produkty">
  67. 		<option value="">Wybierz produkt</option>
  68. 		<? foreach($produkty as $key => $p):?>
  69. 				<option value="<?= $key?>"><?= $p ?></option>
  70. 		<? endforeach; ?>
  71. 	</select>
  72. </div>
  73.  
  74. <div class="desc">
  75. </div>
  76.  
  77. </body>
  78. </html>
[HTML] pobierz, plaintext


plik post.php

[PHP] pobierz, plaintext 
  1. <?php
  2.  
  3.  
  4. 	$produkty = array('Komputer', 'Telewizor', 'Telefon');
  5.  
  6. 	$ceny = array('1500', '1000', '500');
  7.  
  8.  
  9.  
  10. 	if(isset($_POST['produkt'])){
  11.  
  12. 		$cena = 'Cena za produkt wynosci ';
  13. 		foreach($ceny as $key => $c){
  14. 			if($key == $_POST['produkt']){
  15. 					$cena .= $c.' PLN';
  16. 				break;
  17. 			}
  18. 		}
  19.  
  20. 		echo json_encode($cena);
  21. 	}	
  22. ?>
  23.  
[PHP] pobierz, plaintext
CiRiO
28.09.2012, 12:33:06
Wszystko prawdopodobnie działałoby super, gdyby nie fakt, że korzystam również ze SMARTY. Wyklucza to wstawienie w value zmiennej $key, a co za tym idzie zawartość nie zmienia się zależnie od selecta. Rozwiązaniem tej sytuacji mogłoby być nazwanie funkcji przykładowo showPrice(str) i wstawienie do selecta onchange="showPrice(this.value)", lecz wiązałoby się to z przesłaniem metodą GET wartości value. Niestety nie wiem jak wdrożyć coś takiego w dany mi powyżej kod jquery. Ma ktoś jakieś pomysły? Albo potrafi przerobić mój kod bym mógł określić zawartość więcej niż jednego diva tak jak mogę zrobić w kodzie, który podesłał mi Arcioch.
Arcioch
28.09.2012, 12:57:41
Kolego to jest tylko przykład wink.gif bez problemu można go zastosować ze smartami wink.gif
Robisz selecta jak w Twoim kodzie w value wpisując id i ślesz id postem wink.gif Ja akurat wysyłałem klucze tablicy bo mi tak było szybciej wink.gif Kodu jQuery nie musisz zmieniać chyba ze nazwę wysyłanej postem zmiennej i id selecta z którego ma łapać wink.gif Czyli robisz tak wink.gif W pliku z templatem gdzie masz załączane arkusz stylów itp w znaczniku head doklejasz wink.gif

[HTML] pobierz, plaintext 
  1. <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
  2. <script>
  3.  
  4. $(function(){
  5. 	$('#produkty').change(function() {
  6.  
  7. 		var produkt = $('select#produkty option:selected').val();
  8.  
  9. 		if(produkt != ''){
  10. 			$.ajax({
  11. 				type: "POST",
  12. 				url: "post.php",
  13. 				data: "produkt=" + produkt , 
  14. 				cache: false,
  15. 				dataType: "json",
  16. 				success: function(data){
  17. 						$('div.desc').html(data);
  18. 				}				
  19. 			});
  20. 		}else{
  21. 			$('div.desc').html('');
  22. 		}
  23.  
  24. 	});	
  25.  
  26. });
  27.  
  28. </script>
[HTML] pobierz, plaintext


Twój select w smartach wygląda tak wink.gif Dodatkowo potrzeby jest jakiś pusty div w którym będziemy wrzucać ten tekst (w tym przypadku div.desc)wink.gif 

[HTML] pobierz, plaintext 
  1. <select id="produkty" name="produkty">
  2. 	 	<option value=""></option>
  3. 	        {foreach from=$payment item=row}<option value="{$row.payment_id}">{$row.payment_time}</option>{/foreach}
  4. </select>
  5. <div class="desc"></div>
[HTML] pobierz, plaintext


Plik post.php w Twoim przypadku będzie wyglądał tak wink.gif

[PHP] pobierz, plaintext 
  1.  <?
  2. 	if(isset($_POST['produkt'])){
  3.  
  4. 		$q=$_POST['produkt'];
  5.  
  6. 		$dbConnect = mysql_connect ($dbHost, $dbUser, $dbPass) or die ('MySQL connect failed. ' . mysql_error());
  7. 		mysql_select_db($dbName) or die('Cannot select database. ' . mysql_error());
  8.  
  9. 		$sql = "SELECT * FROM pfase_server, pfase_settings, pfase_payment WHERE payment_id = $q";
  10. 		$result = mysql_query($sql) or die(mysql_error());
  11. 		$row = mysql_fetch_assoc($result);
  12. 		$komunikat = "Cena za SMS: <span>".$row['payment_price']."zł</span> z VAT";
  13. 		echo json_encode($komunikat);
  14. 	}
  15. ?>
[PHP] pobierz, plaintext


CiRiO
28.09.2012, 15:04:36
Dziękuję ślicznie za pomoc. Wszystko działa znakomicie smile.gif
Pozdrawiam
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.