jQuery AJAX error handling issue - php

Question

i am making a form that on success will display a bootstrap modal with success or with fail text. The problem that i am facing is that my success part is working the modal gets displayed with the success message but the fail part brings up the modal but empty, its missing the error text. I don't seem to find the problem maybe its because i have been looking at it for a long time now. Any help would be much appreciated.
Code is the following:
HTML:
<form id="ajax-contact" method="post" action="mail.php">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control msg" id="name" name="name" placeholder="Your name..." required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control msg" id="email" name="email" placeholder="Your email address..." required>
</div>
<div class="form-group">
<label for="select">Category:</label>
<select class="form-control msg" id="select" name="select" required>
<option value="">Select a category</option>
<option value="Website building">Website building</option>
<option value="Template creation">Template creation</option>
<option value="Logo Design">Logo Design</option>
<option value="Mobile App">Mobile App</option>
<option value="SEO Services">SEO Services</option>
</select>
</div>
<div class="form-group">
<label for="subject">Subject:</label>
<input type="text" class="form-control msg" id="subject" name="subject" placeholder="Message subject..." required>
</div>
<div class="form-group">
<label for="message">Message:</label>
<textarea class="form-control" rows="5" id="message" name="message" placeholder="Type your message here..." required></textarea>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<h1 id="form-messages" class="text-center">
</h1>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default center-block modalBtn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-default msg-button" data-toggle="modal" data-target="#myModal">Submit</button>
</form>
PHP:
<?php
// 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);
$subject = strip_tags(trim($_POST["subject"]));
$subject = str_replace(array("\r","\n"),array(" "," "),$subject);
$select = trim($_POST["select"]);
$message = trim($_POST["message"]);
// Check that data was sent to the mailer.
if (empty($name) OR empty($message) OR empty($subject) OR empty($select) 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 = "info#email.com";
// Build the email content.
$email_content = "Name: $name\n";
$email_content .= "Email: $email\n";
$email_content .= "Category: $select\n";
$email_content .= "Subject: $subject\n\n";
$email_content .= "Message: $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.";
}
?>
Jquery:
$(function() {
// Get the form.
var form = $('#ajax-contact');
// Get the messages div.
var formMessages = $('#form-messages');
// TODO: The rest of the code will go here...
// Set up an event listener for the contact form.
$(form).submit(function(event) {
// Stop the browser from submitting the form.
event.preventDefault();
// Serialize the form data.
var formData = $(form).serialize();
// Submit the form using AJAX.
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData,
success: function(response) {
// Make sure that the formMessages div has the 'success' class.
$(formMessages).removeClass('error');
$(formMessages).addClass('success');
console.log(response);
// Set the message text.
$(formMessages).text(response);
// Clear the form.
$('#name').val('');
$('#email').val('');
$('#select').val('');
$('#subject').val('');
$('#message').val('');
},
error: function(textStatus) {
alert("asd");
// Make sure that the formMessages div has the 'error' class.
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
console.log(textStatus);
// Set the message text.
if (textStatus !== '') {
$(formMessages).text(textStatus);
} else {
$(formMessages).text('Oops! An error occured and your message could not be sent.');
}
}
});
});
});

Answer 1

Change
$(form).submit(function(event) {
to
$(form).find('[type="submit"]').click(function(event) {
And you would get
// Oops! There was a problem with your submission. Please complete the form and try again.
Problem was you are using the form tag and HTML5 wont allow to submit form untill required fields are filled, so your was form not getting submitted in first place.