Помогите с Ajax
Всем доброго времени суток друзья помогите с обработчиком ajax на WordPress. У меня на сайте есть форма обратной связи я хотел бы что бы она работала на AJAX. Я пытаюсь это сделать но у меня не чего не получается. Потому что я не имею знаний в AJAX и не гуру в программировании я хотел бы что бы когда пользователь нажмет на один из шести чекбоксов это может быть несколько чекбосов сразу с выбранной проблемой, введет свой телефон и имя мне на почту приходило письмо с его выбранной проблемой, именем и телефоном. Я создал папку в директории wp-content/plugins в папке /my-plygin я создал файл и назвал его mail_ajax.php. Далее я в него добавил код:
<?php
/*
Plugin Name: Ajax_Mail
*/
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
function my_enqueue_scripts() {
wp_enqueue_script( 'my-ajax-script', plugin_dir_url( __FILE__ ) . '/assets/components/ajaxform/js/default.js', array( 'jquery' ) );
wp_localize_script( 'my-ajax-script', 'my_ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_ajax_send_mail_ajax', 'send_mail_ajax_callback' );
add_action( 'wp_ajax_nopriv_send_mail_ajax', 'send_mail_ajax_callback' );
function send_mail_ajax_callback() {
// получаем данные из запроса
$problem = $_POST['problem'];
$callbackfio = $_POST['callbackfio'];
$callbacktel = $_POST['callbacktel'];
$iagree = $_POST['iagree'];
// проверяем, что все поля заполнены
if ( empty( $problem ) || empty( $callbackfio ) || empty( $callbacktel ) || empty( $iagree ) ) {
echo json_encode( array( 'success' => false, 'message' => 'Заполните все поля формы.' ) );
wp_die();
}
// отправляем письмо на почту администратора сайта
$to = '[email protected]';
$subject = 'Новая заявка с сайта';
$body = 'Проблема: ' . implode( ', ', $problem ) . "\n";
$body .= 'Имя: ' . $callbackfio . "\n";
$body .= 'Телефон: ' . $callbacktel . "\n";
$headers = array( 'Content-Type: text/html; charset=UTF-8' );
wp_mail( $to, $subject, $body, $headers );
// отправляем ответ клиенту
echo json_encode( array( 'success' => true, 'message' => 'Спасибо за обращение, сообщение отправлено. Наш менеджер перезвонит вам в ближайшее время.' ) );
wp_die();
}
?>
Далее перешел в админ панель WordPress плагины и активировал плагин Ajax_Mail который я создал в директории /wp-content/plugins/my-plygin. Вот html код:
<form method="post" class="ajax_form" id="problems-form" action="#">
<!--======== чекбоксы или радиобоксы, от замены типа инпута вид не изменится =======-->
<div class="checkbox-group checkbox-group--grid">
<div class="form-item">
<label class="label">
<input type="checkbox" name="problem[]" value="Засорилась скважина" >
<span class="fake-checkbox"></span>
<p>Засорилась скважина</p>
</label>
</div>
<div class="form-item">
<label class="label">
<input type="checkbox" name="problem[]" value="Перестала поступать вода" >
<span class="fake-checkbox"></span>
<p>Перестала поступать вода</p>
</label>
</div>
<div class="form-item">
<label class="label">
<input type="checkbox" name="problem[]" value="Щелкает реле" >
<span class="fake-checkbox"></span>
<p>Щелкает реле</p>
</label>
</div>
<div class="form-item">
<label class="label">
<input type="checkbox" name="problem[]" value="Заканчивается вода" >
<span class="fake-checkbox"></span>
<p>Заканчивается вода</p>
</label>
</div>
<div class="form-item">
<label class="label">
<input type="checkbox" name="problem[]" value="Не работает насос" >
<span class="fake-checkbox"></span>
<p>Не работает насос</p>
</label>
</div>
<div class="form-item">
<label class="label">
<input type="checkbox" name="problem[]" value="Другая причина" >
<span class="fake-checkbox"></span>
<p>Другая причина</p>
</label>
</div>
</div>
<div class="form-wrapper">
<div class="form-item">
<input type="text" name="callbackfio" value="" class="required" placeholder="Имя">
<span class="error_callbackfio"></span>
</div>
<div class="form-item">
<input type="tel" name="callbacktel" value="" class="tel required" placeholder="Телефон">
<span class="error_callbacktel"></span>
</div>
<div class="agree-text agree-text--accent">
<input type="hidden" name="iagree" value="" class="required">
<label class="label">
<input type="checkbox" name="iagree" id="iagree-problems" value="I agree that:">
<span class="fake-checkbox"></span>
<p>Заполняя форму, Вы даете согласие на обработку персональных данных</p>
</label>
<span class="error_iagree"></span>
</div>
<div class="form-btn">
<button class="btn-accent" type="submit">Получить консультацию</button>
</div>
</div>
Это js код который находиться в директории /assets/components/ajaxform/js/ и называется default.js:
var AjaxForm = {
initialize: function (afConfig) {
if (!jQuery().ajaxForm) {
document.write('<script src="' + afConfig['assetsUrl'] + '/js/lib/jquery.form.min.js"><\/script>');
}
if (!jQuery().jGrowl) {
document.write('<script src="' + afConfig['assetsUrl'] + '/js/lib/jquery.jgrowl.min.js"><\/script>');
}
$(document).ready(function () {
$.jGrowl.defaults.closerTemplate = '<div>[ ' + afConfig['closeMessage'] + ' ]</div>';
});
$(document).off('submit', afConfig['formSelector']).on('submit', afConfig['formSelector'], function (e) {
$(this).ajaxSubmit({
dataType: 'json',
data: {pageId: afConfig['pageId']},
url: afConfig['actionUrl'],
beforeSerialize: function (form) {
form.find(':submit').each(function () {
if (!form.find('input[type="hidden"][name="' + $(this).attr('name') + '"]').length) {
$(form).append(
$('<input type="hidden">').attr({
name: $(this).attr('name'),
value: $(this).attr('value')
})
);
}
})
},
beforeSubmit: function (fields, form) {
//noinspection JSUnresolvedVariable
if (typeof(afValidated) != 'undefined' && afValidated == false) {
return false;
}
form.find('.error').html('');
form.find('.error').removeClass('error');
form.find('input,textarea,select,button').attr('disabled', true);
return true;
},
success: function (response, status, xhr, form) {
form.find('input,textarea,select,button').attr('disabled', false);
response.form = form;
$(document).trigger('af_complete', response);
if (!response.success) {
AjaxForm.Message.error(response.message);
if (response.data) {
var key, value, focused;
for (key in response.data) {
if (response.data.hasOwnProperty(key)) {
if (!focused) {
form.find('[name="' + key + '"]').focus();
focused = true;
}
value = response.data[key];
form.find('.error_' + key).html(value).addClass('error');
form.find('[name="' + key + '"]').addClass('error');
}
}
}
}
else {
AjaxForm.Message.success(response.message);
form.find('.error').removeClass('error');
form[0].reset();
//noinspection JSUnresolvedVariable
if (typeof(grecaptcha) != 'undefined') {
//noinspection JSUnresolvedVariable
grecaptcha.reset();
}
}
}
});
e.preventDefault();
return false;
});
$(document).on('keypress change', '.error', function () {
var key = $(this).attr('name');
$(this).removeClass('error');
$('.error_' + key).html('').removeClass('error');
});
$(document).on('reset', afConfig['formSelector'], function () {
$(this).find('.error').html('');
AjaxForm.Message.close();
});
}
};
//noinspection JSUnusedGlobalSymbols
AjaxForm.Message = {
success: function (message, sticky) {
if (message) {
if (!sticky) {
sticky = false;
}
$.jGrowl(message, {theme: 'af-message-success', sticky: sticky});
}
},
error: function (message, sticky) {
if (message) {
if (!sticky) {
sticky = false;
}
$.jGrowl(message, {theme: 'af-message-error', sticky: sticky});
}
},
info: function (message, sticky) {
if (message) {
if (!sticky) {
sticky = false;
}
$.jGrowl(message, {theme: 'af-message-info', sticky: sticky});
}
},
close: function () {
$.jGrowl('close');
},
};