wp_mail() + Ajax + ValidationEngine + $wpdb->insert - php

Question

I decided to ask this question because there is no simple answer to it.
I have a contact form in my home.php which looks like:
HTML:
<form id="js-calculator" name="calculator" action="" method="post">
<input type="email" name="email" id="email" placeholder="E-mail" />
<input type="tel" name="phone" id="phone" placeholder="Phone" />
<textarea name="message" id="message" placeholder="Message"></textarea>
<label for="accept"><input class="" type="checkbox" id="accept" name="accept" /> I agree to terms and conditions</label>
<button type="submit" id="send__btn">Wyślij wycenę</button></p>
</form>
JavaScript:
jQuery(document).ready(function ($) {
$('#js-calculator').submit(function (e) {
e.preventDefault();
var $this = $(this);
$.ajax({
url: '<?php echo admin_url("admin-ajax.php") ?>',
type: 'post',
dataType: 'JSON',
data: $this.serialize()
}
});
});
});
PHP in functions.php
// Function to send emails
function sendMail () {
$subject = 'Automatic evaluation';
$headers = 'From: My Website Contact Form <contact#mysite.com>';
$send_to = "office#mysite.com, ". $_POST['email'];
$subject = "Evaluation for ". $_POST['name'];
$message = "Message from ".$_POST['message'];
}
add_action('wp_ajax_sendhtmlmail', 'sendMail');
add_action('wp_ajax_nopriv_sendhtmlmail', 'sendMail');
add_filter( 'wp_mail_content_type', 'set_content_type' );
function set_content_type( $content_type ) {
return 'text/html';
}
// Function to update DB
function addCustomer(){
global $wpdb;
$phone = $_POST['phone'];
$email = $_POST['email'];
$accept = $_POST['accept'];
if($wpdb->insert('customers',array(
'phone'=>$phone,
'email'=>$email,
'accept'=>$accept
))===FALSE){
echo "Error";
} else {
$wpdb->insert_id;
}
die();
}
add_action('wp_ajax_addCustomer', 'addCustomer');
add_action('wp_ajax_nopriv_addCustomer', 'addCustomer');
What I would like to achive is:
1. Send an HTML email to client and to website admin,
2. Add client details to Database, check if email exists,
3. Have a secure connections and data flow;
Right now I have no idea what I`ve done wrong... Any help will be much appreciated.

Answer 1

You are almost there, couple of things:
In your JS ajax call, you need to specify the action to call, here's modified call:
jQuery(document).ready(function ($) {
$('#js-calculator').submit(function (e) {
e.preventDefault();
var $this = $(this);
$.ajax({
url: '<?php echo admin_url("admin-ajax.php?action=sendhtmlmail") ?>',
type: 'post',
dataType: 'JSON',
data: $this.serialize()
}
});
});
});
Now, lets look at the php functions:
// Function to send emails
function sendMail () {
$data = array(
'email' = sanitize_email($_POST['email']),
'name' = sanitize_text_field($_POST['name']),
'message' = sanitize_text_field($_POST['message']),
);
$subject = 'Automatic evaluation;
$headers = 'From: My Website Contact Form <contact#mysite.com>';
$send_to = "office#mysite.com, ". $data['email'];
$subject = "Evaluation for ". $data['name'];
$message = "Message from ".$data['message'];
wp_mail($send_to, $subject, $message, $headers);
addCustomer($data);
// TODO: Fill in this $response array with meaninfull data (check output from wp_mail and addCustomer)
$response = array(
'success' => true
);
wp_send_json($response);
}
add_action('wp_ajax_sendhtmlmail', 'sendMail');
add_action('wp_ajax_nopriv_sendhtmlmail', 'sendMail');
Just missing the wp_mail call, and the cleanup of the inputs, I removed your other ajax call, and have the sendMail function just pass the data to the addCustomer function. You'll notice a wp_send_json call, this is to send the response to the JS. https://codex.wordpress.org/Function_Reference/wp_send_json
Now lets look at your addCustomer function:
// Function to update DB
function addCustomer($data){
global $wpdb;
$phone = $data['phone'];
$email = $data['email'];
$accept = $data['accept'];
if($wpdb->insert('customers',array(
'phone'=>$phone,
'email'=>$email,
'accept'=>$accept
))===FALSE){
return false;
} else {
return $wpdb->insert_id;
}
}
The only thing that change here, is the return, so that the caller knows if it failed.
To handle inputs from user, check this doc from wordpress and core functions:
https://codex.wordpress.org/Validating_Sanitizing_and_Escaping_User_Data
Or you could use the following plugins together:
https://wordpress.org/plugins/contact-form-7/
https://wordpress.org/plugins/flamingo/
Here's how to use it: https://contactform7.com/save-submitted-messages-with-flamingo/
I hope this helps you!
Regards,
P.S wordpress questions are better suited here: https://wordpress.stackexchange.com/