This is a password recovery form through HTML page that post data to PHP file via AJAX. Everything is okay with the code except once submitted and response recived, form input fields don't clear. I have been searching the web for the past 4 hours and found too many code lines to do so but none of them seems to work. plz help me in this matter :) have a good day.
$(function() {
/////////////////////////////////////////////////////////'Form ID' & 'Element Name' /////////////////////////////////////////
// Get the form.
var form = $('#emailform');
// Get the messages div.
var formMessages = $('#formresults');
// Set up an event listener for the contact form.
$(form).submit(function(e) {
// Stop the browser from submitting the form.
e.preventDefault();
// Serialize the form data.
var formData = $(form).serialize();
// Submit the form using AJAX.
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
})
.done(function(response) {
// Make sure that the formMessages div has the 'success' class.
$(formMessages).removeClass('error');
$(formMessages).addClass('success');
// Set the message text.
$(formMessages).text(response);
// Clear the form.
// $('#email1').val('');
//var email = $('input[name=#email]').val("");
//document.getElementById("emailform").reset();
//$('#emailform')[0].reset();
//$('input:text').val('');
//$('#emailform input[type=text]').val('');
//setTimeout(function(){
//$('input,textarea','#emailform').val(''); //clearing inputs
//},1);
})
.fail(function(data) {
// Make sure that the formMessages div has the 'error' class.
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
// Set the message text.
if (data.responseText !== '') {
$(formMessages).text(data.responseText);
} else {
$(formMessages).text('Oops! An error occured and your message could not be sent.');
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX Contact Form Demo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="page-wrapper">
<h1>AJAX Contact Form Demo</h1>
<div id="formresults"></div>
<form id="emailform" name="emailform1" method="post" action="exa.php">
<table align="center">
<tr><td><div class="input-append"><input type="text" name="email" id="email1" class="input-xlarge" placeholder="email" maxlength="100" /><span class="add-on"><li class="icon-envelope"></li></span></div></td></tr>
</table>
<!-- <hr /> -->
<center><input type="submit" name="Forget" id="btn" class="btn btn-primary Loading-btn" value="ٍSend" data-loading-text="Sending ..." /></center>
</form>
</div>
<script src="ajax/jquery-2.1.0.min.js"></script>
<script src="ajax/app.js"></script>
</body>
</html>
<?php
// Get Access to data base
// Only process POST reqeusts.
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Get the form fields and remove whitespace.
$email = $_POST["email"];
// Check that data was sent to the mailer.
if ( empty($email) ) {
// Set a 400 (bad request) response code and exit.
http_response_code(100);
echo "BLABLABLA.";
exit;
}
if ( !filter_var($email, FILTER_VALIDATE_EMAIL) ) {
// Set a 400 (bad request) response code and exit.
http_response_code(200);
echo "BLABLABLA.";
exit;
}
if (#mysql_num_rows(mysql_query("SELECT `id` FROM `accounts` WHERE `email`='$email'")) < 1) {
// Set a 400 (bad request) response code and exit.
http_response_code(300);
echo "BLABLABLA.";
exit;
}
$row_user = #mysql_fetch_array(mysql_query("SELECT * FROM `accounts` WHERE `email`='$email'"));
////////////////////////////
$password = $row_user['pass'];
$to = $row_user['email'];
$subject = "Your Recovered Password";
$message = "Please use this password to login: " . $password;
$headers = "From : XXX#XXX.XXX";
// Send the email.
if (mail($to, $subject, $message, $headers)) {
// Set a 200 (okay) response code.
http_response_code(400);
echo "BLABLABLA.";
} else {
// Set a 500 (internal server error) response code.
http_response_code(500);
echo "BLABLABLA.";
}
} else {
// Not a POST request, set a 403 (forbidden) response code.
http_response_code(600);
echo "There was a problem with your submission, please try again.";
}
?>
You can use JavaScript's .reset() function on the form element which will clear all input fields.
I found the answer, just removed http_response_code()
for all if statments .
Thx all for your help. I can sleep now knowing my day is not wasted :)
Related
I have a form for password recovery via email. I send input to PHP to do the following:
Validate {three different validation messages)
If passed, Process
Once the response is received, in AJAX, although is not valid, it is considered successful because it has been processed in php.
I need to differentiate between every response so I can display appropriate alert messages
if field input is empty, I want to show it in alert-info message box
if field input is noa t valid email, I want to show it in alert-warning message box
if field input is not found the in server, I want to show it in alert-danger message box
if successful, I want to show it in alert-success
$(function() {
// Get FORM ID ///////////////////////////////////////////
var form = $('#RecoveryForm');
// Get MESSAGE DIV ID ///////////////////////////////////////////
var formMessages = $('#formresults');
$(form).submit(function(e) {
$( "#submit" ).prop( "disabled", false );
e.preventDefault();
var formData = $(form).serialize();
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
})
.done(function(response) {
$(formMessages).removeClass('error');
$(formMessages).addClass('success');
$(formMessages).text(response);
// Get FORM ID ///////////////////////////////////////////
document.getElementById("RecoveryForm").reset();
//$('#reset-button').click();
})
.fail(function(data) {
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
if (data.responseText !== '') {
$(formMessages).text(data.responseText);
} else {
$(formMessages).text('Oops! An error occured and your message could not be sent.');
}
});
$("#submit").removeAttr("disabled");
});
});
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="formresults"></div>
<form id="RecoveryForm" method="post" action="exa.php">
<table align="center">
<tr><td><div class="input-append"><input type="text" name="email" id="email" class="input-xlarge" placeholder="Email" maxlength="100" /><span class="add-on"><li class="icon-envelope"></li></span></div></td></tr>
</table>
<input type="hidden" name="token" value="<?=Token::generate();?>" />
<center><input type="submit" id="submit" name="Forget" class="btn btn-primary" value="Submit" /></center>
</form>
<script src="ajax/jquery-2.1.0.min.js"></script>
<script src="ajax/app.js"></script>
<!---------------------------------------------------------------->
<?php include 'footer.php'; ?>
</body>
</html>
PHP Code >>
<?php
header('Content-type: application/json');
require 'Access.php'; // Get Access
//response array with status code and message
$response_array = array();
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$email = $_POST["email"];
if ( empty($email) ) {
$response_array['status'] = 'info';
$response_array['message'] = 'No Input';
echo json_encode($response_array);
exit;
}
if ( !filter_var($email, FILTER_VALIDATE_EMAIL) ) {
$response_array['status'] = 'warning';
$response_array['message'] = 'Not Valid Email';
echo json_encode($response_array);
exit;
}
if (#mysql_num_rows(mysql_query("SELECT `id` FROM `accounts` WHERE `email`='$email'")) < 1) {
$response_array['status'] = 'danger';
$response_array['message'] = 'Account Not Found';
echo json_encode($response_array);
exit;
}
$row_user = #mysql_fetch_array(mysql_query("SELECT * FROM `accounts` WHERE `email`='$email'"));
$password = $row_user['pass'];
$to = $row_user['email'];
$subject = "Your Recovered Password";
$message = "Please use this password to login: " . $password;
$headers = "From : XXX#hotmail.com";
// Send the email.
if (mail($to, $subject, $message, $headers)) {
$response_array['status'] = 'Success';
$response_array['message'] = 'Email Sent';
echo json_encode($response_array);
} else {
$response_array['status'] = 'info';
$response_array['message'] = 'Try Again Later';
echo json_encode($response_array);
}
} else {
$response_array['status'] = 'info';
$response_array['message'] = 'Try Again Later';
echo json_encode($response_array);
}
$response_array['status'] = 'info';
$response_array['message'] = 'Try Again Later';
echo json_encode($response_array);
?>
First of all we start validation from the html of cause this can be hampered and manipulated by the user but still a good way to start.
first we add the required attribute to your input fields in html and change the input types to match the data types your expecting eg: input type="email" hiding an input does not prevent it form being tampered with, best to add the Readonly attribute also.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="formresults"></div>
<form id="RecoveryForm" method="post" action="exa.php">
<table align="center">
<tr>
<td>
<div class="input-append">
<input type="email" Required name="email" id="email" class="input-xlarge" placeholder="Email" maxlength="100" />
<span class="add-on"><li class="icon-envelope"></li></span>
<p id="mailerror"></p> <!-- This Segment Displays The Validation Rule For Email -->
</div>
</td>
</tr>
</table>
<input type="hidden" Readonly name="token" value="<?=Token::generate();?>" />
<center>
<input type="submit" id="submit" name="Forget" class="btn btn-primary" value="Submit" />
</center>
<script src="ajax/jquery-2.1.0.min.js"></script>
<script src="ajax/app.js"></script>
</form>
</body>
</html>
Second of all you are using jquery although this much much more easy to use i will suggest you start with java script validation, using the onsubmit attribute to catch the form and begin validation. you will be better understand what exactly is going on as a beginner rather than jquery.
<script>
$(function() {
/*Get FORM ID*/
var form = $('#RecoveryForm');
/*Get MESSAGE DIV ID */
var formMessages = $('#formresults');
/*Email Validation*/
var email_regex = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
var email = $('#email').val();
if (!email.match(email_regex) || email.length == 0) {
$('#mailerror').text("* Please enter a valid email address *");
$("#email").focus();
return false;
}
else if (email.match(email_regex) && email.length >= 5){
$(form).submit(function(e) {
$( "#submit" ).prop( "disabled", false );
e.preventDefault();
var formData = $(form).serialize();
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
})
.done(function(response) {
if (response.status=='Success'){
$(formMessages).removeClass('error');
$(formMessages).addClass('success');
$(formMessages).text(response.message);
}
else if (response.status=='warning'){
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
$(formMessages).text(response.message);
}
else if (response.status=='danger'){
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
$(formMessages).text(response.message);
}
else if (response.status=='info'){
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
$(formMessages).text(response.message);
}
/*Get FORM ID */
document.getElementById("RecoveryForm").reset();
})
.fail(function(data) {
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
if (data.responseText !== '') {
$(formMessages).text(data.responseText);
} else {
$(formMessages).text('Oops! An error occured and your message could not be sent.');
}
});
$("#submit").removeAttr("disabled");
});
}
});
</script>
Third of all your PHP could have been better written but it works fine presumably :( so we leave that for now.
report different response with php validation
.done(function(response) {
var messageAlert = response.type;
var messageText = response.message;
var alertBox = '<div class="alert ' + messageAlert + '"style="margin-top:10px;"><button type="button" class="close" data-dismiss="alert">×</button><d style="font-size:11px; ">' + messageText + '</d></div>';
(formMessages).html(alertBox);
For every PHP statement add:
$responseArray = array('type' => 'alert-warning', 'message' => '<b>Alert!</b>There is not enough credit');
Then send response json encoded
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$encoded = json_encode($responseArray); header('Content-Type: application/json'); echo $encoded; } else { echo $responseArray['message']; }
This question already has answers here:
PHP mail function doesn't complete sending of e-mail
(31 answers)
Closed 7 years ago.
I'm using a php mail script from http://blog.teamtreehouse.com/create-ajax-contact-form connected to a contact form on a website I'm building.
I have everything put together and it seems to function properly (doesn't display any errors), but I am not receiving most of the emails. If I test the contact form using one of my personal email accounts I will receive the message. If I use any other emails (for example something from http://www.fakemailgenerator.com) I won't receive anything. I've attached all of the code below. Is there something I'm missing that anyone can spot?
If it helps, the site is hosted in an AWS LAMP linux instance and the domain is with GoDaddy.
Thanks in advance.
contact.html
<form id="ajax-contact" method="post" action="mailer.php">
<div class="field">
<input type="text" id="name" name="name" placeholder="name*" required>
</div>
<div class="field">
<input type="email" id="email" name="email" placeholder="email*" required>
</div>
<div class="field">
<input type="text" id="school" name="school" placeholder="school" >
</div>
<div class="field">
<input type="tel" id="phone" name="phone" placeholder="phone" >
</div>
<div class="field">
<textarea id="message" name="message" placeholder="message" ></textarea>
</div>
<div class="field">
<button type="submit">Submit</button>
</div>
</form>
mailer.php
<?php
// My modifications to mailer script from:
// http://blog.teamtreehouse.com/create-ajax-contact-form
// Added input sanitizing to prevent injection
// Only process POST reqeusts.
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Get the form fields and remove whitespace.
$name = strip_tags(trim($_POST["name"]));
$name = str_replace(array("\r","\n"),array(" "," "),$name);
$email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
$phone = trim($_POST["phone"]);
$school = trim($_POST["school"]);
$message = trim($_POST["message"]);
// Check that data was sent to the mailer.
if ( empty($name) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
// Set a 400 (bad request) response code and exit.
http_response_code(400);
echo "There was a problem with your submission. Please ensure all required fields are filled out.";
exit;
}
// Set the recipient email address.
// FIXME: Update this to your desired email address.
$recipient = "sample#gmail.com";
// Set the email subject.
$subject = "Sample subject - New contact from $name";
// Build the email content.
$email_content = "Name: $name\n";
$email_content .= "Email: $email\n\n";
$email_content .= "School: $school\n";
$email_content .= "Phone: $phone\n";
$email_content .= "Message:\n$message\n";
// Build the email headers.
$email_headers = "From: $name <$email>";
// Send the email.
if (mail($recipient, $subject, $email_content, $email_headers)) {
// Set a 200 (okay) response code.
http_response_code(200);
echo "Thank You! Your message has been sent. We'll get back to you as soon as possible.";
} else {
// Set a 500 (internal server error) response code.
http_response_code(500);
echo "Oops! Something went wrong and we couldn't send your message. Please try again later.";
}
} else {
// Not a POST request, set a 403 (forbidden) response code.
http_response_code(403);
echo "There was a problem with your submission, please try again.";
}
?>
app.js
$(function() {
// Get the form.
var form = $('#ajax-contact');
// Get the messages div.
var formMessages = $('#form-messages');
// Set up an event listener for the contact form.
$(form).submit(function(e) {
// Stop the browser from submitting the form.
e.preventDefault();
// Serialize the form data.
var formData = $(form).serialize();
// Submit the form using AJAX.
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
})
.done(function(response) {
// Make sure that the formMessages div has the 'success' class.
$(formMessages).removeClass('error');
$(formMessages).addClass('success');
// Set the message text.
$(formMessages).text(response);
// Clear the form.
$('#name').val('');
$('#email').val('');
$('#phone').val('');
$('#school').val('');
$('#message').val('');
})
.fail(function(data) {
// Make sure that the formMessages div has the 'error' class.
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
// Set the message text.
if (data.responseText !== '') {
$(formMessages).text(data.responseText);
} else {
$(formMessages).text('Oops! An error occured and your message could not be sent.');
}
});
});
});
I think it's simply Amazon that filter suspicious mail provider. Most of SMTP server comes with filters. Thoses filters prevents user to receive spam.
As said from Amazon FAQ :
Amazon SES uses in-house anti-spam/anti-virus technologies to filter email messages containing poor-quality content and prevent them from being sent.
Your message formatting is just wrong, I'm not going to begin to correct it. Use a library to do it right - you already tagged this question with PHPMailer, but you're not using it. Base your code on one of the examples provided with PHPMailer, not one you find elsewhere as nearly all are obsolete or wrong.
You're also forging the from address, so many services will just reject or bounce your messages. Send from your own address and put the submitter's address in reply-to.
Also ensure that your SPF record is configured correctly, and ideally sign your messages with DKIM too.
I have managed to get ReCaptcha 2.0 working in my website. However, it's only working when I don't use AJAX and I let the form submit "naturally".
I want to submit the form with the captcha and alert the user with a success note without refreshing the page.
I tried the following code, but it seems like the server doesn't get the user response:
HTML:
<form class="form" action="javascript:void(0)" novalidate>
<!-- all the inputs... -->
<!-- captcha -->
<div class="input-group">
<div class="g-recaptcha" data-sitekey="6LdOPgYTAAAAAE3ltWQGar80KUavaR-JblgPZjDI"></div>
</div>
<div class="errors" id="errors" style="display: none"></div>
<div class="input-group">
<input type="button" value="Send" class="btn-default right" id="submit">
<div class="clear"></div>
</div>
</form>
JS:
$('#submit').click(function(e) {
console.log('clicked submit'); // --> works
var $errors = $('#errors'),
$status = $('#status'),
name = $('#name').val().replace(/<|>/g, ""), // prevent xss
email = $('#email').val().replace(/<|>/g, ""),
msg = $('#message').val().replace(/<|>/g, "");
if (name == '' || email == '' || msg == '') {
valid = false;
errors = "All fields are required.";
}
// pretty sure the problem is here
console.log('captcha response: ' + grecaptcha.getResponse()); // --> captcha response:
if (!errors) {
// hide the errors
$errors.slideUp();
// ajax to the php file to send the mail
$.ajax({
type: "POST",
url: "http://orenurbach.com/assets/sendmail.php",
data: "email=" + email + "&name=" + name + "&msg=" + msg + "&g-recaptcha-response=" + grecaptcha.getResponse()
}).done(function(status) {
if (status == "ok") {
// slide down the "ok" message to the user
$status.text('Thanks! Your message has been sent, and I will contact you soon.');
$status.slideDown();
// clear the form fields
$('#name').val('');
$('#email').val('');
$('#message').val('');
}
});
} else {
$errors.text(errors);
$errors.slideDown();
}
});
PHP:
<?php
// assemble the message from the POST fields
// getting the captcha
$captcha = '';
if (isset($_POST['g-recaptcha-response']))
$captcha = $_POST['g-recaptcha-response'];
echo 'captcha: '.$captcha;
if (!$captcha)
echo 'The captcha has not been checked.';
// handling the captcha and checking if it's ok
$secret = 'MY_SECRET';
$response = json_decode(file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secret."&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']), true);
var_dump($response);
// if the captcha is cleared with google, send the mail and echo ok.
if ($response['success'] != false) {
// send the actual mail
#mail($email_to, $subject, $finalMsg);
// the echo goes back to the ajax, so the user can know if everything is ok
echo 'ok';
} else {
echo 'not ok';
}
?>
The result in the PHP page:
captcha: The captcha has not been checked.array(2) { ["success"]=> bool(false) ["error-codes"]=> array(1) { [0]=> string(22) "missing-input-response" } } not ok
Bottom line is, how can I get the input response manually without it automatically going with the rest of the POST data?
Ok, this was pretty silly.
I have done a couple of things wrong:
In the PHP file, all the strings had single quotes on them, and that caused problems.
Throughout the testing, I added multiple printings of things in the PHP file, thus the if (status == "ok") was never working. I did get the emails but did not get any conformation that I did and now I see why.
When I wanted to check what the PHP file was omitting, I simply went to it's address in the URL and always got an error. Even when the mails were sent. Now I understand that that is not the correct way of checking the logs.
Thanks to #Samurai who helped my figure out things.
Final PHP code:
<?php
// assemble the message from the POST fields
// getting the captcha
$captcha = "";
if (isset($_POST["g-recaptcha-response"]))
$captcha = $_POST["g-recaptcha-response"];
if (!$captcha)
echo "not ok";
// handling the captcha and checking if it's ok
$secret = "MY_SECRET";
$response = json_decode(file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secret."&response=".$captcha."&remoteip=".$_SERVER["REMOTE_ADDR"]), true);
// if the captcha is cleared with google, send the mail and echo ok.
if ($response["success"] != false) {
// send the actual mail
#mail($email_to, $subject, $finalMsg);
// the echo goes back to the ajax, so the user can know if everything is ok
echo "ok";
} else {
echo "not ok";
}
?>
In the following code, I have a contact form and in that form there is an email validation script. As a result of validation, I want the error message to be shown in a div called confirmation without reloading the page. Also, if the email is valid, the mail will be sent and I want the Thank you message to be shown in the same div confirmation. The problem is what can I do to prevent reloading the page and let the error message or the thanks message shows in the confirmation div?
<html>
<body>
<?php
function spamcheck($field) {
// Sanitize e-mail address
$field=filter_var($field, FILTER_SANITIZE_EMAIL);
// Validate e-mail address
if(filter_var($field, FILTER_VALIDATE_EMAIL)) {
return TRUE;
} else {
return FALSE;
}
}
?>
<?php
if (!isset($_POST["submit"])) {
?>
<form method="post" action="<?php echo $_SERVER["PHP_SELF"];?>">
From: <input type="text" name="from"><br>
Subject: <input type="text" name="subject"><br>
Message: <textarea rows="10" cols="40" name="message"></textarea><br>
<input type="submit" name="submit" value="Submit Feedback"><br>
<div id="confirmation" style="display:none" align="center"></div>
</form>
<?php
} else { // the user has submitted the form
// Check if the "from" input field is filled out
if (isset($_POST["from"])) {
// Check if "from" email address is valid
$mailcheck = spamcheck($_POST["from"]);
if ($mailcheck==FALSE) {
echo"
<script>
document.getElementById('confirmation').text ='invalid email';
</script>";
} else {
$from = $_POST["from"]; // sender
$subject = $_POST["subject"];
$message = $_POST["message"];
// message lines should not exceed 70 characters (PHP rule), so wrap it
$message = wordwrap($message, 70);
// send mail
mail("nawe11#gmail.com",$subject,$message,"From: $from\n");
echo"
<script>
document.getElementById('confirmation').text ='Thank you';
</script>";
}
}
}
?>
</body>
</html>
Thanks
<input type="text" name="from" id ="from">
Call example:
var request = $.ajax({
url: "file.php",
type: "POST",
data: { email : $('#from').val() }
});
request.done(function( msg ) {
//handle HTML
});
request.fail(function( jqXHR, textStatus ) {
//Handle problem at server side
});
PHP Side
<?php
$email = $_POST["email"]
function spamcheck($field) {
// Sanitize e-mail address
$field=filter_var($field, FILTER_SANITIZE_EMAIL);
// Validate e-mail address
if(filter_var($field, FILTER_VALIDATE_EMAIL)) {
return 'valid';
} else {
return 'no_valid';
}
}
echo spamcheck($email);
There's no way you could do that with just PHP.
What you're looking at is commonly known as AJAX, and uses client-side language (Javascript)
It's very common, and widely used on the internet. You can find many examples and production-ready scripts by searching ajax on google.
More informations here : http://www.w3schools.com/ajax/
I have this html markup:
<form id="ajax-contact" method="post" action="mailer.php">
<div id="form-messages"></div>
<div class="field">
<label for="name">Name:</label>
<input type="text" id="name" class="contact" name="name" placeholder="Name" required>
</div>
<div class="field">
<label for="email">Email:</label>
<input type="email" id="email" class="contact" name="email" placeholder="Email" required>
</div>
<div class="field">
<label for="message">Message:</label>
<textarea id="message" name="message" placeholder="Message" required></textarea>
</div>
<div class="field">
<button type="submit">Send</button>
</div>
</form>
this jQuery (for the AJAX call):
$(function() {
// Get the form.
var form = $('#ajax-contact');
// Get the messages div.
var formMessages = $('#form-messages');
// Set up an event listener for the contact form.
$(form).submit(function(e) {
// Stop the browser from submitting the form.
e.preventDefault();
// Serialize the form data.
var formData = $(form).serialize();
// Submit the form using AJAX.
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
})
.done(function(response) {
// Make sure that the formMessages div has the 'success' class.
$(formMessages).removeClass('error');
$(formMessages).addClass('success');
// Set the message text.
$(formMessages).text(response);
// Clear the form.
$('#name').val('');
$('#email').val('');
$('#message').val('');
})
.fail(function(data) {
// Make sure that the formMessages div has the 'error' class.
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
// Set the message text.
if (data.responseText !== '') {
$(formMessages).text(data.responseText);
} else {
$(formMessages).text('Oops! An error occured and your message could not be sent.');
}
});
});
});
and this mailer.php file:
<?php
// My modifications to mailer script from:
// http://blog.teamtreehouse.com/create-ajax-contact-form
// Added input sanitizing to prevent injection
// Only process POST reqeusts.
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Get the form fields and remove whitespace.
$name = strip_tags(trim($_POST["name"]));
$name = str_replace(array("\r","\n"),array(" "," "),$name);
$email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
$message = trim($_POST["message"]);
// Check that data was sent to the mailer.
if ( empty($name) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
// Set a 400 (bad request) response code and exit.
http_response_code(400);
echo "Oops! There was a problem with your submission. Please complete the form and try again.";
exit;
}
// Set the recipient email address.
// FIXME: Update this to your desired email address.
$recipient = "email#email.com";
// Set the email subject.
$subject = "New contact from $name";
// Build the email content.
$email_content = "Name: $name\n";
$email_content .= "Email: $email\n\n";
$email_content .= "Message:\n$message\n";
// Build the email headers.
$email_headers = "From: $name <$email>";
// Send the email.
if (mail($recipient, $subject, $email_content, $email_headers)) {
// Set a 200 (okay) response code.
http_response_code(200);
echo "Thank You! Your message has been sent.";
} else {
// Set a 500 (internal server error) response code.
http_response_code(500);
echo "Oops! Something went wrong and we couldn't send your message.";
}
} else {
// Not a POST request, set a 403 (forbidden) response code.
http_response_code(403);
echo "There was a problem with your submission, please try again.";
}
?>
The issue is that after I press the submit button, I receive this message:
Oops! An error occured and your message could not be sent.
When I check the console I see this error:
Failed to load resource: the server responded with a status of 500 (Internal Server Error) which is the mailer.php file.
However, when I check my inbox I see the email submitted in the form.
I can not figure out what is going wrong, can someone tell how can I fix this issue?
Thank you!
You are using the wrong error number - 500 is reserved for faults in code (hence why internal server error).
Even for security reasons, always send 200 however when mail returns false, log the email in a text file. Together with the get_last_error function, so that you can properly analyze your issue.
Hope this helps.
http://www.w3schools.com/php/func_error_get_last.asp