WP + AJAX success message - php

Question

I have a multilingual website where I should show a success message after successful submission. I use ACF filed and wp_send_json_success () to report a successful send, but I get an error in the console. The letter was sent successfully. How can I do it correctly so that I can send a success message?
PHP:
add_action('wp_ajax_nopriv_send_email', 'send_email');
add_action('wp_ajax_send_email', 'send_email');
function send_email() {
$checkbox = $_POST['myCheckboxes'];
if (isset($checkbox)) {
echo $checkbox;
}
$checkbox_hy = $_POST['myCheckboxesHy'];
if (isset($checkbox_hy)) {
echo $checkbox_hy;
}
$checkbox_modal_2 = $_POST['modalCheckboks2'];
if (isset($checkbox_modal_2)) {
echo $checkbox_modal_2;
}
$checkbox_subs = $_POST['subsCheckbox'];
if (isset($checkbox_subs)) {
echo $checkbox_subs;
}
$checkbox_sp = $_POST['supportCheckbox'];
if (isset($checkbox_sp)) {
echo $checkbox_sp;
}
$headers = 'Content-Type: text/html; charset="utf-8"';
$url = $_POST['url'];
$name = $_POST['name'];
$fullname = $_POST['fullname'];
$spFullname = $_POST['spFullname'];
$hy_name = $_POST['hy_name'];
$from = 'contact#test.com';
$to = 'contact#test.com';
$email = $_POST['email'];
$hy_email = $_POST['hy_email'];
$spEmail = $_POST['spEmail'];
$modalEmail = $_POST['modalEmail'];
$subsEmail = $_POST['subsEmail'];
$msg = $_POST['msg'];
$hy_msg = $_POST['hy_msg'];
$modalMsg = $_POST['modalMsg'];
$spMsg = $_POST['spMsg'];
$company = $_POST['company'];
$spCompany = $_POST['spCompany'];
if ($hy_name) {
$subject = '‘Any questions?’ form: ' . $_POST['hy_email'];
} elseif ($name) {
$subject = 'Footer form: ' . $_POST['email'];
} elseif ($fullname) {
$subject = 'Header form: ' . $_POST['modalEmail'];
} elseif ($subsEmail) {
$subject = 'New blog subscription: ' . $_POST['subsEmail'];
} elseif ($spEmail) {
$subject = 'Support form: ' . $_POST['spEmail'];
}
$message .= (!empty($name)) ? '<p><strong>User Name</strong> : ' . $name .' </p>' : '';
$message .= (!empty($email)) ? '<p><strong>User Email</strong> : '. $email .'</p>' : '';
$message .= (!empty($msg)) ? '<p><strong>User Message</strong> : '.$msg .'</p>' : '';
$message .= (!empty($checkbox)) ? '<p><strong>Checkboxs</strong> : '.$checkbox .'</p>' : '';
$message .= (!empty($hy_name)) ? '<p><strong>User Name</strong> : '.$hy_name .'</p>' : '';
$message .= (!empty($hy_email)) ? '<p><strong>User Email</strong> : '.$hy_email .'</p>' : '';
$message .= (!empty($hy_msg)) ? '<p><strong>User Message</strong> : '.$hy_msg .'</p>' : '';
$message .= (!empty($checkbox_hy)) ? '<p><strong>Checkbox</strong> : '.$checkbox_hy .'</p>' : '';
$message .= (!empty($fullname)) ? '<p><strong>Full Name</strong> : ' . $fullname .' </p>' : '';
$message .= (!empty($modalEmail)) ? '<p><strong>User Email</strong> : ' . $modalEmail .' </p>' : '';
$message .= (!empty($company)) ? '<p><strong>Company</strong> : ' . $company .' </p>' : '';
$message .= (!empty($modalMsg)) ? '<p><strong>User Message</strong> : ' . $modalMsg .' </p>' : '';
$message .= (!empty($checkbox_modal_2)) ? '<p><strong>Checkbox</strong> : '.$checkbox_modal_2 .'</p>' : '';
$message .= (!empty($subsEmail)) ? '<p><strong>User Email</strong> : '. $subsEmail .'</p>' : '';
$message .= (!empty($checkbox_subs)) ? '<p><strong>Checkbox</strong> : '.$checkbox_subs .'</p>' : '';
$message .= (!empty($spFullname)) ? '<p><strong>User Name</strong> : '.$spFullname .'</p>' : '';
$message .= (!empty($spEmail)) ? '<p><strong>User Email</strong> : '.$spEmail .'</p>' : '';
$message .= (!empty($spCompany)) ? '<p><strong>Company</strong> : ' . $spCompany .' </p>' : '';
$message .= (!empty($spMsg)) ? '<p><strong>User Message</strong> : '.$spMsg .'</p>' : '';
$message .= (!empty($checkbox_sp)) ? '<p><strong>Checkbox</strong> : '.$checkbox_sp .'</p>' : '';
$message .= (!empty($url)) ? '<p><strong>Url:</strong> : '.$url .'</p>' : '';
$message .= '</body></html>';
$send_mail = mail($to, $subject, $message, $headers);
echo $send_mail;
if($send_mail) {
$data = get_field('success_message', 'option');
wp_send_json_success($data, 200);
}
return $msg;
die();
}
AJAX:
jQuery('.submit').on('click', function(e) {
e.preventDefault();
// All data from form
var str = $(this).closest('form').serialize();
$("#contact-form input:checkbox:not(:checked)").each(function(e){
str += "&"+this.name+'=false';
});
// Vars
var name = jQuery('#name').val();
var email = jQuery('#email').val();
var msg = jQuery('#msg').val();
var subj = jQuery('#subj').val();
validateEmail(email);
if (msg == '' || email == '' || validateEmail(jQuery('#email').val()) == false) {
validateEmail(email);
validateText(jQuery('#msg'));
validateText(jQuery('#name'));
return false;
}
jQuery.ajax({
type: "post",
url: ajaxactionurl,
data: "action=send_email&" + str + "&url=" + page_url,
dataType: 'json',
success: function (response) {
jQuery('#contact-form input').val('');
jQuery('#contact-form textarea').val('');
jQuery('.submit').text('Thank you!');
console.log(response.data);
},
error: function (jqXHR, textStatus, errorThrown) {
console.log(textStatus);
}
});
});

Answer 1

Your AJAX Call should only return JSON and should not return anything else, so making following changes.
$send_mail = mail($to, $subject, $message, $headers);
//echo $send_mail; Comment this, it is not required
if($send_mail) {
$data = get_field('success_message', 'option');
wp_send_json_success( array('data' => $data ) , 200); //Return as array.
}
//return $msg; Comment this as well.
die();
In your AJAX Callback of JS, you will get the data where you are using console.log(response.data);