Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [ajax] i formularze
Forum PHP.pl > Forum > XML, AJAX
hhg
19.07.2007, 14:18:41
to moje pierwsze wykorzystanie ajax w formularzach, w zasadzie przypadek jest błahy ale chodzi tu raczej o aspekty edukacyjne

celem jest pokazania na stronie komunikatu zwróconego przez skrypt php zamiast formularza - czyli podmiana zawartosci div-a o id = "wynik". Narazie niestety wszystkie komunikaty pojawiaja sie na czystej stronie zamiast w pliku .html

oto kod
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.  
  4. <head>
  5. 	<meta http-equiv="Content-Language" content="pl">
  6. 	<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-2">
  7. 	<link rel="stylesheet" href="style.css" type="text/css">
  8. 	<title>kontakt via e-mail</title>
  9.  
  10.  
  11. 	<script type="text/javascript" src="advajax.js"></script>
  12.  
  13. 	<script type="text/javascript">
  14.  
  15. 		advAJAX.assign(document.getElementById("the_form"), {
  16.  
  17. 				onSuccess : function(obj) {
  18. 					var element = document.getElementById("wynik");
  19. 					element.innerHTML = obj.responseText;
  20. 				}
  21. 		});
  22.  
  23. 	</script>
  24.  
  25. </head>
  26. <body bgcolor="black"><br>
  27. 	<div id = "wynik">
  28.  
  29. 	<p class="para">Czekam na pytania, uwagi, sugestie dot. strony i Isengard.';
  30.  
  31. 	<form action="send.php" method="post" id ="the_form">
  32. 		<table cellspacing="0" cellpadding="1" border="0" align="center" width="95%">
  33. 		<tr>
  34. 			<td width="20%" valign="bottom" nowrap>
  35. 				<p align="right" class="para">temat:</p>
  36. 			</td>
  37. 			<td width="80%" align="left">
  38. 				<input type="text" size="30" maxlength="50" name="temat" style="width:200px;">
  39. 			</td>
  40. 		</tr>
  41. 		<tr>
  42. 			<td width="20%" valign="bottom" nowrap>
  43. 				<p align="right" class="para">e-mail nadawcy:</p>
  44. 			</td>
  45. 			<td width="80%" align="left">
  46. 				<input type="text" size="30" maxlength="50" name="email" style="width:200px;">
  47. 			</td>
  48. 		</tr>
  49. 		<tr>
  50. 			<td width="20%" valign="bottom" nowrap class="underline">
  51. 				<p align="right" class="para">treść wiadomości:<br><br><br><br><br><br><br><br><br><br></p>
  52. 			</td>
  53. 			<td width="80%" align="left" class="underline">
  54. 				<textarea name="tresc" style="width:431px; " rows="10" cols="50"></textarea>
  55. 			</td>
  56. 		</tr>
  57. 		<tr>
  58. 			<td align="center" colspan="2">
  59. 				<input type="submit" value="wyślij" name="submit"> <INPUT TYPE="reset" VALUE="wyczyść">
  60. 			</td>
  61. 		</tr>
  62. 		</table>
  63. 	</form>
  64. 	</div>
  65.  
  66. 	<p class="para" align="left">&nbsp;<a href="java script:window.close();" class="genmed">Zamknij Okno</a></p>
  67. </body>
  68. </html>
[HTML] pobierz, plaintext 


[PHP] pobierz, plaintext 
  1. <?php
  2.  
  3. 		#Pobieranie adresu IP
  4. 			$ip=$_SERVER['REMOTE_ADDR'];
  5. 		#Pobieranie serwera
  6. 			$host=gethostbyaddr($ip);
  7. 		#Pobieranie adresu strony
  8. 			$document=$_SERVER['HTTP_REFERER'];
  9.  
  10.  
  11. 		# temat
  12. 		if (empty($_POST['temat'])) {
  13. 			$te = FALSE;
  14. 			$message .= 'Zapomniałeś podać temat wiadomości.';
  15. 			$bg[1] = ' background-color: #C0C0C0; color: black';
  16. 		} else {
  17. 			$te = $_POST['temat'];
  18. 		}
  19.  
  20.  
  21. 		# e-mail
  22. 		if ( !(strstr($_POST['email'], '@')) || strlen($_POST['email'])<6 ) {
  23. 			$em = FALSE;
  24. 			$message .= 'Popraw swój adres e-mail.';
  25. 			$bg[2] = ' background-color: #C0C0C0; color: black';
  26. 		} else {
  27. 			$em = $_POST['email'];
  28. 		}
  29.  
  30.  
  31. 		# tresc
  32. 		if (empty($_POST['tresc'])) {
  33. 			$tr = FALSE;
  34. 			$message .= 'Zapomniałeś podać treść wiadomości.';
  35. 			$bg[3] = ' background-color: #C0C0C0; color: black';
  36. 		} else {
  37. 			$tr = $_POST['tresc'];
  38. 		}
  39.  
  40.  
  41. 			if ($te && $em && $tr) {
  42.  
  43. 							$wiadomosc = "
  44. 	Wiadomość od $em: <br/><br/>
  45.  
  46. 	$tr <br/><br/>
  47.  
  48. 	-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- <br/>
  49. 	IP nadawcy: $ip <br/>
  50. 	HOST nadawcy: $host <br/>
  51. 	wysłano z: $document <br/>
  52. 	";
  53.  
  54. 					$naglowki = "MIME-Version: 1.0rn";
  55. 					$naglowki .= "Content-type: text/html; charset=iso-8859-2rn";
  56. 					$naglowki .= "From: $emrn";
  57.  
  58. 				if ( mail('moj@email.pl',$te,$wiadomosc,$naglowki) ) {
  59. 					echo '<div align="center"><p class="para"><b>Wiadomość wysłana.</b></p></div>';
  60. 				} else { echo 'Wiadomość nie mogła zostać wysłana z przyczyn technicznych.'; }
  61.  
  62. 			} else {
  63. 				echo '<div align="center"><p class="error">';
  64. 					if (isset($message)) {
  65. 						echo $message;
  66. 					}
  67. 				echo '<br><b>Spróbuj jeszcze raz.</b>';
  68. 				echo '</p></div>';
  69. 			}
  70.  
  71.  
  72.  
  73. ?>
[PHP] pobierz, plaintext


a to link jak to obecnie działa:
php programmer
19.07.2007, 14:41:41
Spróbuj wyświetlić komunikat funkcją alert


Kod
alert('Coś tam źle wpisałeś');
skowron-line
19.07.2007, 14:41:42
po 1 wrzuc sobie ten ajax w funkcje np.
[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. function sprawdz()
  3. advAJAX.assign(document.getElementById("the_form"), {
  4.  
  5. onSuccess : function(obj) {
  6. var element = document.getElementById("wynik");
  7. element.innerHTML = obj.responseText;
  8. }
  9. });
  10. }
  11. </script>
[HTML] pobierz, plaintext

no i oczywiscie jakos trzeba sobie to wywolac
[HTML] pobierz, plaintext 
  1. <input type="submit" value="wyślij" name="submit" onclick="sprawdz();">
[HTML] pobierz, plaintext

i tutaj
zamiast
[HTML] pobierz, plaintext 
  1. <form action="send.php" method="post" id ="the_form">
[HTML] pobierz, plaintext

daj 
[HTML] pobierz, plaintext 
  1. <form action="" method="post" id ="the_form">
[HTML] pobierz, plaintext

i powinno zadzialac... pzdr
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.