Sending an email with ajax and object oriented php best practices - php

Question

I am building a form to send an email and I want to use Object Oriented Php and Ajax.
I was able to build the PHP backend (variable and function) regardless of Ajax, but I have problems in making the Ajax call because I have not yet understood what are the steps to follow.
My problem is that I don't really understand how the ajax URL works (the call the to PHP file). Should I try to target the function (and how can I do) or should I call the page directly, in which I'm gonna create the json function to output a json file to parse with ajax?
Here's my code:
Footer.php and main.js
$('#contact-form').on('submit',function(e) {
e.preventDefault();
$('.output-message').text('Loading...');
const form = $(this);
const post_url = $(this).attr("action");
console.log(post_url);
$.ajax({
url: post_url,
method: form.attr('method'),
data: form.serialize(),
type:'POST',
success: function(result){
console.log(result);
if (result == 'success'){
$('.output-message').text('Message Sent!');
} else {
$('.output-message').text('Error Sending email!');
}
}
});
return false;
});
<form id="contact-form" name="contact-form" action="Contact.php" method="POST" data-parsley-validate="">
<div class="row">
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="name" name="name" class="form-control" required="">
<label for="name" class="">Your name</label>
</div>
</div>
<div class="col-md-6">
<div class="md-form mb-0">
<input type="email" id="email" name="email" class="form-control" required="">
<label for="email" class="">Your email</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="md-form">
<textarea type="text" id="message" name="message" rows="2" class="form-control md-textarea" required=""></textarea>
<label for="message">Your message</label>
</div>
</div>
</div>
<div class="text-center text-md-right">
<input type="submit" id="submit" class="btn-primary" name="submit" value="Request Info">
<span class="output-message"></span>
</div>
</form>
And the php Class:
Contact.php
<?php
class Contact {
public $name;
public $email;
public $message;
public $admin = 'myemail#email.email';
public $errors;
public function sendMail() {
$errors = "";
if ($this->name == "") {
$errors .= '- You forgot to enter a name!<br />';
}
if ($this->email == "") {
$errors .= '- You forgot to enter an email!<br />';
}
if ($this->message == "") {
$errors .= '- You forgot to enter a message!<br />';
}
if(empty($errors)) {
$contents = "To: $this->name<br />Message: $this->message";
$headers = "From:" . $this->email;
$sendmail = mail($this->admin, $this->message, $contents, $headers);
} else {
echo '<p class=\'message error\'>';
echo '<font color="black">' . $errors . '</font>';
echo '</p><br />';
}
}
}
if(isset($_POST['submit'])) {
$sendMail = new Contact();
$sendMail->name = $_POST['name'];
$sendMail->email = $_POST['email'];
$sendMail->message = $_POST['message'];
$sendMail->sendMail();
}
?>
The javascript part doesn't work, and I'm trying to understand this part:
const post_url = $(this).attr("action");
$.ajax({
url: post_url,
Should I create another function in PHP that will output a JSON file that collects all the variables?
My though is that I'm serializing the URL and then I will send it to the PHP file, but I'm not even able to console.log() the result.

Answer 1

Refactor a little bit :
class Contact
{
public $name;
public $email;
public $message;
public $admin = 'myemail#email.email';
public $errors;
public function sendMail() {
$errors = "";
if ($this->name == "") {
$errors .= '- You forgot to enter a name!<br />';
}
if ($this->email == "") {
$errors .= '- You forgot to enter an email!<br />';
}
if ($this->message == "") {
$errors .= '- You forgot to enter a message!<br />';
}
if(empty($errors)) {
$contents = "To: $this->name<br />Message: $this->message";
$headers = "From:" . $this->email;
$sendmail = mail($this->admin, $this->message, $contents, $headers);
} else {
throw new Exception($errors, 400);
}
}
}
if(isset($_POST['submit'])) {
$sendMail = new Contact();
$sendMail->name = $_POST['name'];
$sendMail->email = $_POST['email'];
$sendMail->message = $_POST['message'];
header('Content-Type: aaplication/json');
try {
$sendMail->sendMail();
echo json_encode(array('success' => 'success'));
} catch (Exception $e) {
header ('HTTP/1.1 400 Bad Request')
$errors = array('error' => $e->getMessage);
echo json_encode($errors);
}
}
I've made it return the string instead of echoing in the class, and I've thrown an exception on an error. Also, since we are sending to JS I made it return JSON.
Lastly, change the JS here:
$.ajax({
url: post_url,
method: form.attr('method'),
data: form.serialize(),
type:'POST',
success: function(result){
console.log(result);
$('.output-message').text('Message Sent!');
}
error: function(result) {
console.log(result);
$('.output-message').text('Error Sending email!');
}
});
JS will check a 200, so know if it is success. Since you now send a 400 on error, the error function will trigger! Give that a try :-)