Sending email with PHP on a modal with AJAX - php

Question

I have a modal that contains a form that sends email using PHP. I do not want that Modal to close when the email is sent so I have tried to use AJAX to send it without refreshing the page. However, I cannot keep it from closing when I push submit and cannot figure out what the problem is. The emails still send so I believe it has something to do with AJAX.
<?php include 'email_form.php';?>
<?php echo $result; ?>
<form method="post">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" name="name" id="name" class="form-control" placeholder="Your Name"
value="<?php echo $_SESSION['post-data']['name']; ?>" />
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" name="email" id="email" class="form-control" placeholder="Your Email"
value="<?php echo $_SESSION['post-data']['email']; ?>" />
</div>
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" id="comment" name="comment"><?php echo $_SESSION['post-data']['comment']; ?></textarea>
</div>
<div class="modal-footer text-center">
<input type="submit" name="submit" id="submit" class="btn" value="Submit"/>
</div>
</form>
The PHP
<?php
$_SESSION['post-data'] = $_POST;
$name = strip_tags($_POST['name']);
$email = strip_tags($_POST['email']);
$comment = strip_tags($_POST['comment']);
if ($_POST["submit"]) {
if (!$_POST['name']) {
$error="<br />Please enter your name";
}
if (!$_POST['email']) {
$error.="<br />Please enter your email address";
}
if (!$_POST['comment']) {
$error.="<br />Please enter a comment";
}
if ($_POST['email']!="" AND !filter_var($_POST['email'],
FILTER_VALIDATE_EMAIL)) {
$error.="<br />Please enter a valid email address";
}
if ($error) {
$result='<div class="alert alert-danger"><strong>There were error(s)
in your form:</strong>'.$error.'</div>';
} else {
if (mail("user#email.com", "Comment from website.com", "Name: ".
$_POST['name']."
Email: ".$_POST['email']."
Comment: ".$_POST['comment']))
{
$result='<div class="alert alert-success"><strong>Thank
you!</strong> I\'ll be in touch.</div>';
unset($_SESSION['post-data']['name']);
unset($_SESSION['post-data']['email']);
unset($_SESSION['post-data']['comment']);
session_destroy();
} else {
$result='<div class="alert alert-danger">Sorry, there was
an error sending your message. Please try again later.</div>';
}
}
}
?>
JavaScript
<script>
$(document).ready(function () {
$('#submit').click(function(event) {
$('.modal').on('hide.bs.modal', function(e) {
e.preventDefault();
});
var formData = {
'name' : $('input[id=name]').val(),
'email' : $('input[id=email]').val(),
'comment' : $('input[id=comment]').val(),
};
$.ajax({
type: "post",
url: "email_form.php",
data: formData,
success: function(msg){
alert("Email sent");
},
error: function(){
alert("Please try to resubmit");
}
});
});
});
</script>
I have also tried this but it too closed the modal
<script>
$(document).ready(function () {
$('#submit').submit(function(event) {
event.preventDefault();
var formData = {
'name' : $('input[id=name]').val(),
'email' : $('input[id=email]').val(),
'comment' : $('input[id=comment]').val(),
};
$.ajax({
type: "post",
url: "email_form.php",
data: formData,
success: function(msg){
alert("Email sent");
},
error: function(){
alert("Please try to resubmit");
}
});
});
});
</script>

Answer 1

Instead of calling
e.preventDefault();
in the first version of your javascript just do the following:
return false;
You can also use the second version of your html and instead of calling event.preventDefault(); , return false at the end of the function after the ajax call.

Answer 2

Your second Javascript example is closer to the right answer.
You're attaching the submit event to the button id rather than the form ID, which is incorrect. You're also querying your input attributes needlessly. Modify your markup with something like this:
<form id="email-submit-form" method="post">
Then modify your Javascript with something like this:
<script>
$(document).ready(function () {
$('#email-submit-form').submit(function(event) {
event.preventDefault();
var formData = {
'name' : $('#name').val(),
'email' : $('#email').val(),
'comment' : $('#comment').val(),
'submit' : 'AJAX' //Rudimentary example to help you differentiate between POST types
};
$.ajax({
type: "post",
url: "email_form.php",
data: formData,
success: function(msg){
alert(msg); //See my notes below
},
error: function(){
alert("Please try to resubmit");
}
});
});
});
You also have a lot wrong with your PHP, as it would never fire due to the absence of a "submit" field from your original AJAX POST request. Additionally, you're trying to set fields as session data, never using them in the script, and then you're unsetting them on success.
Session data is intended to persist data between requests. You aren't doing that here.
Secondly, even if you output an error message (which your AJAX method won't see, because you're not outputting anything), the status code returned by the request will be 200 and the success message will fire every time, even with malformed data.
This should be closer to what you want:
<?php
$name = strip_tags($_POST['name']);
$email = strip_tags($_POST['email']);
$comment = strip_tags($_POST['comment']);
if ($_POST["submit"]) {
$error = '';
if (!$name){
$error="<br />Please enter your name";
}
if (!$email) {
$error.="<br />Please enter your email address";
}
if(!$comment) {
$error.="<br />Please enter a comment";
}
if(!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$error.="<br />Please enter a valid email address";
}
if ($error) {
$result='<div class="alert alert-danger"><strong>There were error(s) in your form:</strong>'.$error.'</div>';
}
else {
if(mail("user#email.com", "Comment from website.com",
"Name: ".$name."
Email: ".$email."
Comment: ".$comment)
){
$result='<div class="alert alert-success"><strong>Thank you!</strong> I\'ll be in touch.</div>';
} else {
$result='<div class="alert alert-danger">Sorry, there was
an error sending your message. Please try again later.</div>';
}
}
/*
This will only fire on your above AJAX request, and stop the server from running
after this point. All you need is the response for your AJAX script to read
*/
if($_POST['submit'] === 'AJAX'){
die($result);
}
}
?>
With all of that said, this is largely untested and isn't guaranteed to work perfectly. Instead, this should give you a little bit of a better idea in terms of how everything works together.
Good luck.