Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][AJAX][PHP]Ajax contact-form, które nie działa w tle
Forum PHP.pl > Forum > Przedszkole
followc
26.09.2014, 14:10:26
Witam, zrobiłem zgodnie z instrukcjami contact-form z użyciem AJAXu. Po drobnych poprawkach pięknie maile wysyła, lecz nie tak jakbym chciał- w tle, tylko przekierowuje do strony mailer.php, gdzie wyświetla się komunikat o sukcesie. Mój niski poziom doświadczenia nie pozwala mi znaleźć błedu. Pomocy!



index.html
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>AJAX Contact Form Demo</title>
  6.  
  7. 	<link rel="stylesheet" href="style.css">
  8. </head>
  9. <body>
  10. 	<div id="page-wrapper">
  11. 	  <h1>AJAX Contact Form Demo</h1>
  12.  
  13. 	  <div id="form-messages"></div>
  14.  
  15. 		<form id="ajax-contact" method="post" action="mailer.php">
  16. 			<div class="field">
  17. 				<label for="name">Name:</label>
  18. 				<input type="text" id="name" name="name" required>
  19. 			</div>
  20.  
  21. 			<div class="field">
  22. 				<label for="email">Email:</label>
  23. 				<input type="email" id="email" name="email" required>
  24. 			</div>
  25.  
  26. 			<div class="field">
  27. 				<label for="message">Message:</label>
  28. 				<textarea id="message" name="message" required></textarea>
  29. 			</div>
  30.  
  31. 			<div class="field">
  32. 				<button type="submit">Send</button>
  33. 			</div>
  34. 		</form>
  35. 	</div>
  36.  
  37. 	<script src="jquery-2.1.0.min.js"></script>
  38. 	<script src="app.js"></script>
  39. </body>
  40. </html>
[HTML] pobierz, plaintext



mailer.php
[PHP] pobierz, plaintext 
  1. <?php
  2.     // My modifications to mailer script from:
  3.     // <a href="http://blog.teamtreehouse.com/create-ajax-contact-form" target="_blank">http://blog.teamtreehouse.com/create-ajax-contact-form</a>
  4.     // Added input sanitizing to prevent injection
  5.  
  6.     // Only process POST reqeusts.
  7.  
  8. 	$from='brydz@szlem.edu.pl';
  9.     if ($_SERVER["REQUEST_METHOD"] == "POST") {
  10.         // Get the form fields and remove whitespace.
  11.         $name = strip_tags(trim($_POST["name"]));
  12. 				$name = str_replace(array("\r","\n"),array(" "," "),$name);
  13.         $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
  14.         $message = trim($_POST["message"]);
  15.  
  16.         // Check that data was sent to the mailer.
  17.         if ( empty($name) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
  18.             // Set a 400 (bad request) response code and exit.
  19.             http_response_code(400);
  20.             echo "Oops! There was a problem with your submission. Please complete the form and try again.";
  21.             exit;
  22.         }
  23.  
  24.         // Set the recipient email address.
  25.         // FIXME: Update this to your desired email address.
  26.         $recipient = "hello@example.com";
  27.  
  28.         // Set the email subject.
  29.         $subject = "New contact from $name";
  30.  
  31.         // Build the email content.
  32.         $email_content = "Name: $name\n";
  33.         $email_content .= "Email: $email\n\n";
  34.         $email_content .= "Message:\n$message\n";
  35.  
  36.         // Build the email headers.
  37.         $email_headers = "From: $name <$email>";
  38.  
  39.         // Send the email.
  40.         if (mail($recipient, $subject, $email_content, $from)) {
  41.             // Set a 200 (okay) response code.
  42.             http_response_code(200);
  43.             echo "Thank You! Your message has been sent.";
  44.         } else {
  45.             // Set a 500 (internal server error) response code.
  46.             http_response_code(500);
  47.             echo "Oops! Something went wrong and we couldn't send your message.";
  48.         }
  49.  
  50.     } else {
  51.         // Not a POST request, set a 403 (forbidden) response code.
  52.         http_response_code(403);
  53.         echo "There was a problem with your submission, please try again.";
  54.     }
  55.  
  56. ?>
[PHP] pobierz, plaintext



app.js
[HTML] pobierz, plaintext 
  1. $(function() {
  2.  
  3. 	// Get the form.
  4. 	var form = $('#ajax-contact');
  5.  
  6. 	// Get the messages div.
  7. 	var formMessages = $('#form-messages');
  8.  
  9. 	// Set up an event listener for the contact form.
  10. 	$(form).submit(function(e) {
  11. 		// Stop the browser from submitting the form.
  12. 		e.preventDefault();
  13.  
  14. 		// Serialize the form data.
  15. 		var formData = $(form).serialize();
  16.  
  17. 		// Submit the form using AJAX.
  18. 		$.ajax({
  19. 			type: 'POST',
  20. 			url: $(form).attr('action'),
  21. 			data: formData
  22. 		})
  23. 		.done(function(response) {
  24. 			// Make sure that the formMessages div has the 'success' class.
  25. 			$(formMessages).removeClass('error');
  26. 			$(formMessages).addClass('success');
  27.  
  28. 			// Set the message text.
  29. 			$(formMessages).text(response);
  30.  
  31. 			// Clear the form.
  32. 			$('#name').val('');
  33. 			$('#email').val('');
  34. 			$('#message').val('');
  35. 		})
  36. 		.fail(function(data) {
  37. 			// Make sure that the formMessages div has the 'error' class.
  38. 			$(formMessages).removeClass('success');
  39. 			$(formMessages).addClass('error');
  40.  
  41. 			// Set the message text.
  42. 			if (data.responseText !== '') {
  43. 				$(formMessages).text(data.responseText);
  44. 			} else {
  45. 				$(formMessages).text('Oops! An error occured and your message could not be sent.');
  46. 			}
  47. 		});
  48.  
  49. 	});
  50.  
  51. });
[HTML] pobierz, plaintext




Turson
26.09.2014, 14:12:14
Na samym końcu $(form).submit(function(e){ daj return false
followc
26.09.2014, 14:34:57
wciąż to samo. rozumiem, że na samym końcu to tu:
[HTML] pobierz, plaintext 
  1. $(form).submit(function(e) {
  2. 		// Stop the browser from submitting the form.
  3. 		e.preventDefault();
  4.  
  5. 		// Serialize the form data.
  6. 		var formData = $(form).serialize();
  7.  
  8. 		// Submit the form using AJAX.
  9. 		$.ajax({
  10. 			type: 'POST',
  11. 			url: $(form).attr('action'),
  12. 			data: formData
  13. 		})
  14. 		.done(function(response) {
  15. 			// Make sure that the formMessages div has the 'success' class.
  16. 			$(formMessages).removeClass('error');
  17. 			$(formMessages).addClass('success');
  18.  
  19. 			// Set the message text.
  20. 			$(formMessages).text(response);
  21.  
  22. 			// Clear the form.
  23. 			$('#name').val('');
  24. 			$('#email').val('');
  25. 			$('#message').val('');
  26.  
  27. 		})
  28. 		.fail(function(data) {
  29. 			// Make sure that the formMessages div has the 'error' class.
  30. 			$(formMessages).removeClass('success');
  31. 			$(formMessages).addClass('error');
  32.  
  33. 			// Set the message text.
  34. 			if (data.responseText !== '') {
  35. 				$(formMessages).text(data.responseText);
  36. 			} else {
  37. 				$(formMessages).text('Oops! An error occured and your message could not be sent.');
  38. 			}
  39. 		});
  40. 		return false; 
  41. 	});
[HTML] pobierz, plaintext
Turson
26.09.2014, 14:44:07
var form = $('#ajax-contact');
$(form).submit(function(e)

jak dla mnie to się kupy nie trzyma i form powinien być
var form = '#ajax-contact';
followc
26.09.2014, 15:23:51
ta edycja niewiele zmieniła- działa tak jak działało przed nią. wysyła wiadomości, ale wciąż przekierowuje na mailer.php. Nie powinienem jakoś zedytować index.html, żeby zawierał w sobie mailer.php?
Turson
26.09.2014, 15:26:46
Daj jakiś alert w tej funkcji JS, bo nie wiadomo czy to się w ogóle wykonuje. Możliwe, że powinieneś był umieścić skrypty js w nagłówku dokumentu.
followc
26.09.2014, 15:49:07
wrzuciłem alerty w dwoch miejscach i faktycznie nic nie 'alertuje'. to nie jest tak, że ta funkcja odpowiedzialna jest za wysyłkę? jakim cudem więc maile dochodzą na moja skrzynkę?

[HTML] pobierz, plaintext 
  1. $(form).submit(function(e) {
  2. 		// Stop the browser from submitting the form.
  3. 		e.preventDefault();
  4.  
  5. 		// Serialize the form data.
  6. 		var formData = $(form).serialize();
  7.  
  8. 		// Submit the form using AJAX.
  9. 		$.ajax({
  10. 			type: 'POST',
  11. 			url: $(form).attr('action'),
  12. 			data: formData
  13. 		})
  14. 		.done(function(response) {
  15. 			// Make sure that the formMessages div has the 'success' class.
  16. 			$(formMessages).removeClass('error');
  17. 			$(formMessages).addClass('success');
  18.  
  19. 			// Set the message text.
  20. 			$(formMessages).text(response);
  21.  
  22. 			// Clear the form.
  23. 			$('#name').val('');
  24. 			$('#email').val('');
  25. 			$('#message').val('');
  26. 			alert('xx');
  27. 			//return false; 
  28. 		})
  29. 		.fail(function(data) {
  30. 			// Make sure that the formMessages div has the 'error' class.
  31. 			$(formMessages).removeClass('success');
  32. 			$(formMessages).addClass('error');
  33.  
  34. 			// Set the message text.
  35. 			if (data.responseText !== '') {
  36. 				$(formMessages).text(data.responseText);
  37. 			} else {
  38. 				$(formMessages).text('Oops! An error occured and your message could not be sent.');
  39. 			}
  40. 		});
  41. 		alert('xx');
  42. 		return false; 
  43. 	});
[HTML] pobierz, plaintext
Turson
26.09.2014, 18:58:19
Maile dochodzą, bo formularz przekierowuje do mailer.php który wysyła wiadomość. Odpal konsolę w przeglądarce i podejrzyj
followc
30.09.2014, 17:29:30
Failed to load resource: the server responded with a status of 404 (Not Found)

w pliku zawierającym jQuery i pliku app.js. To mój serwer nie chce współpracować? Mogę temu jakoś zaradzić?
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.