How to make notification with jquery ajax - php

Question

I want to ask about the notification section of a company profile application which I have created
using PHP, AJAX and including PHP send mail function. Somehow it's not working and I don't know what's wrong.
This is my code :
<div class="full black">
<div class="large-12 columns">
<h2 class="white">We are ready.</h2>
<div class='form'>
<form id='contact_form'action="send.php" method='POST'>
<div class="large-4 columns">
<input class='required' name='name' placeholder='NAME' type='text'>
</div>
<div class="large-4 columns">
<input class='required email' name='email' placeholder='EMAIL' type='text'>
</div>
<div class="large-4 columns">
<input class='required' name='subject' placeholder='SUBJECT' type='text'>
</div>
<div class="large-12 columns">
<textarea class='required' name='message' placeholder='MESSAGE'></textarea>
<input id="submit" class='button white boxed contact-button' type='submit' value="Send it">
<p id='thanks' class='hide'>
Thanks for contacting us, we'll be in touch soon!
</p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<nav>
<a href="#" id='back' class="hide">
<i class="fa fa-close"></i>
</a>
</nav>
if($('form#contact_form').length > 0) {
$('form#contact_form').validate({
messages: { },
submitHandler: function(form) {
$.ajax({
type: 'POST',
url: 'send.php',
data: $(form).serialize(),
success: function(data) {
if(data.match(/success/)) {
$(form).trigger('reset');
$('#thanks').removeClass('hide').fadeOut(5000);
}
}
});
return false;
}
});
}
and this is my send mail code (I'm using php native) :
$send_to = "toastermedia26#gmail.com";
$send_subject = "Ajax form ";
/*Be careful when editing below this line */
$email = 'vincent#vincentjunior1.xyz';
$f_name = cleanupentries($_POST["name"]);
$f_email = cleanupentries($_POST["email"]);
$f_message = cleanupentries($_POST["message"]);
$from_ip = $_SERVER['REMOTE_ADDR'];
$from_browser = $_SERVER['HTTP_USER_AGENT'];
function cleanupentries($entry) {
$entry = trim($entry);
$entry = stripslashes($entry);
$entry = htmlspecialchars($entry);
return $entry;
}
$message = "This email was submitted on " . date('m-d-Y') .
"\n\nName: " . $f_name .
"\n\nE-Mail: " . $f_email .
"\n\nMessage: \n" . $f_message .
"\n\n\nTechnical Details:\n" . $from_ip . "\n" . $from_browser;
$send_subject .= " - {$f_name}";
$headers = "From: " . $email . "\r\n" .
"Reply-To: " . $f_email . "\r\n" .
"X-Mailer: PHP/" . phpversion();
if (!$f_email) {
echo "no email";
exit;
}else if (!$f_name){
echo "no name";
exit;
}else{
if (filter_var($f_email, FILTER_VALIDATE_EMAIL)) {
$mail = mail($send_to, $send_subject, $message, $headers);
if($mail = true){
json_encode(['ressponses' => 'success']);
}else{
return false;
exit;
}
}
}
I'm really confused. How to make response successfully with my code. Can someone help me.

Answer 1

I have done some changes and tested. It works fine, and try this,
<div class="full black">
<div class="large-12 columns">
<h2 class="white">We are ready.</h2>
<div class='form'>
<form id='contact_form' action="send.php" method='POST'>
<div class="large-4 columns">
<input class='required' name='name' id='name' placeholder='NAME' type='text'>
</div>
<div class="large-4 columns">
<input class='required email' name='email' id='email' placeholder='EMAIL' type='text'>
</div>
<div class="large-4 columns">
<input class='required' name='subject' id='subject' placeholder='SUBJECT' type='text'>
</div>
<div class="large-12 columns">
<textarea class='required' name='message' id ='message' placeholder='MESSAGE'></textarea>
<input id="submit" class='button white boxed contact-button' type='submit' value="Send it">
<p id='thanks' class='hide'>
Thanks for contacting us, we'll be in touch soon!
</p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<nav>
<a href="#" id='back' class="hide">
<i class="fa fa-close"></i>
</a>
</nav>
In your javaScript,
<script type="text/javascript">
$("#contact_form").unbind('submit').bind('submit', function() {
$(".text-danger").remove();
// remove the form error
$('.form-group').removeClass('has-error').removeClass('has-success');
var name = $("#name").val();
var email = $("#email").val();
if (name === "") {
$("#name").after('<p class="text-danger">Name field is required</p>');
// $('#name').closest('.form-group').addClass('has-error');
} else {
// remov error text field
$("#name").find('.text-danger').remove();
// $("#name").closest('.form-group').addClass('has-success');
}
if (email === "") {
$("#name").after('<p class="text-danger">email field is required</p>');
// $('#name').closest('.form-group').addClass('has-error');
} else {
$("#name").find('.text-danger').remove();
// $("#name").closest('.form-group').addClass('has-success');
}
//same as subject and message
if (name && email) {
var form = $(this);
$.ajax({
url: form.attr('action'),
type: form.attr('method'),
data: form.serialize(),
dataType: 'json',
success: function(response) {
if (response.success == true) {
console.log(response.messages);
// reset the form text
$("#contact_form")[0].reset();
$('#thanks').removeClass('hide').fadeOut(5000);
} // if
} // /success
}); // /ajax
} // if
return false;
}); // /submit form function
</script>
and your send.php file should like this,
<?php
$valid['success'] = array('success' => false, 'messages' => array());
$send_to = "toastermedia26#gmail.com";
$send_subject = "Ajax form ";
/*Be careful when editing below this line */
$email = 'vincent#vincentjunior1.xyz';
$f_name = cleanupentries($_POST["name"]);
$f_email = cleanupentries($_POST["email"]);
$f_message = cleanupentries($_POST["message"]);
$from_ip = $_SERVER['REMOTE_ADDR'];
$from_browser = $_SERVER['HTTP_USER_AGENT'];
function cleanupentries($entry)
{
$entry = trim($entry);
$entry = stripslashes($entry);
$entry = htmlspecialchars($entry);
return $entry;
}
$message = "This email was submitted on " . date('m-d-Y') .
"\n\nName: " . $f_name .
"\n\nE-Mail: " . $f_email .
"\n\nMessage: \n" . $f_message .
"\n\n\nTechnical Details:\n" . $from_ip . "\n" . $from_browser;
$send_subject .= " - {$f_name}";
$headers = "From: " . $email . "\r\n" .
"Reply-To: " . $f_email . "\r\n" .
"X-Mailer: PHP/" . phpversion();
if (!$f_email) {
$valid['success'] = false;
$valid['messages'] = "No email";
// exit;
} elseif (!$f_name) {
$valid['success'] = false;
$valid['messages'] = "No name";
// exit;
} else {
if (filter_var($f_email, FILTER_VALIDATE_EMAIL)) {
$mail = mail($send_to, $send_subject, $message, $headers);
if ($mail = true) {
$valid['success'] = true;
$valid['messages'] = "Successfully sent";
//json_encode(['ressponses' => 'success']);
} else {
$valid['success'] = false;
$valid['messages'] = "Send fail";
}
}
}
echo json_encode($valid);
Think it will be help.