WordPress и FormData

Задача будет следующая. Создаем div элемент, с возможностью его редактирования, аналог <textarea>, только имеет ряд преимуществ перед <textarea>.
Далее, передадим на сервер данные из этого дива методом POST, используя AJAX. Попутно, «на лету», добавим еще одно поле с данными.

В целом, это будет аналог того, если бы вы создали форму с полями, и методом post отправили эту форму на сервер, с дальнейшей ее обработкой. Но, в моем случае, мы не будем использовать тег <form>, мы будем использовать дивы, инструмент для передачи данных будет отличаться, а принцип обработки данных не измениться. И это все будет приводится на примере WordPress, но отличие от того, если бы это был бы не WordPress, а любой другой сайт, написанный на php, заключается только в одной строке, о ней я напишу позже.

Пример, если бы мы использовали форму написанную на HTML:

<form action="save.php" method="post" name="myform">
<textarea>Здесь пишем текст, для отправки на сайт</textarea>
<input type="submit" value="Отправить">
</form>

<textarea>Здесь пишем текст, для отправки на сайт</textarea>

</form>

После нажатия кнопки, произойдет отправка данных на сервер, с перезагрузкой страницы.
Теперь изменим нашу форму, но уже будем использовать JQuery. Уберем теги <form> и <textarea>, <textarea> заменим на div с функцией редактирования. Для этого можно в WordPress создать страницу, и в редакторе перейдите с визуального отображения, на текст, и вставить следующий код:

<div class="mytext" contenteditable="true">Здесь пишем текст, для отправки на сайт</div>
<button class="send">Отправить</button>

<div class="mytext" contenteditable="true">Здесь пишем текст, для отправки на сайт</div>

<button class="send">Отправить</button>

Здесь пишем текст, для отправки на сайт

Можете вписать любой текст и нажать – Отправить.

Используя подобный подход, вы сможете создавать любые формы (Обратная связь, прием заказов и т.д)

Теперь напишем функцию, которая примет наш текст, и вернет его назад в виде алерта (окна оповещения).

Для этого мы создадим js файл, где пропишем наш скрипт, к примеру: send.js. Потом мы этот файл поместим в каталог с нашей темой вордпресса и подключим его с помощью functions.php, который тоже находится в каталоге нашей темы.

send.js

$('.send').click(function(){
var formData = new FormData();
var f=$('.mytext').text();//получаем содержимое див блока с классом mytext
formData.append('mydiv', f);//Помещаем текст из див блока с классом в mytext в объект formdata с именем mydiv    
formData.append('action', 'ajax_saveform');// ajax_saveform  - это зарегестрированная функция в wordpress, которая мы пропишим в functions.php, с помощью которой и будем обрабатывать наш запрос
formData.append('mail', 'mail@ddr64.com');//добавим еще одно поле "налету"
//Отправляем на сервер
$.ajax({
url: "/wp-admin/admin-ajax.php",
type: 'POST',
data:formData,
contentType:false,
processData:false,
success: function(response){
alert(response);//Выводим наш ответ
}
})
});

$('.send').click(function(){

var formData = new FormData();

var f=$('.mytext').text();//получаем содержимое див блока с классом mytext

formData.append('mydiv', f);//Помещаем текст из див блока с классом в mytext в объект formdata с именем mydiv

formData.append('action', 'ajax_saveform');// ajax_saveform - это зарегестрированная функция в wordpress, которая мы пропишим в functions.php, с помощью которой и будем обрабатывать наш запрос

formData.append('mail', 'mail@ddr64.com');//добавим еще одно поле "налету"

//Отправляем на сервер

$.ajax({

url: "/wp-admin/admin-ajax.php",

type: 'POST',

data:formData,

contentType:false,

processData:false,

success: function(response){

alert(response);//Выводим наш ответ

}

})

});

Примечание: если в качестве поля ввода данных у нас будет input, то, чтобы считать значение с помощью JQuery, мы будем уже использовать метод .val(), а не .text() -> $(‘.mytext’).val()

Теперь откроем файл functions.php из вашей темы, и подключим созданный скрипт, плюс, напишем функцию, которая будет обрабатывать переданные данные:

functions.php

//Регистрируем скрипт send.js
function myscript(){
wp_register_script('mysend', get_template_directory_uri() . 'send.js','','',true );
}
//Подключаем скрипт send.js
add_action( 'wp_enqueue_scripts', 'myscript' );

//Регистрируем скрипт send.js

function myscript(){

wp_register_script('mysend', get_template_directory_uri() . 'send.js','','',true );

}

//Подключаем скрипт send.js

add_action( 'wp_enqueue_scripts', 'myscript' );

‘mysend’ – Это уникальное название нашего скрипта. Последний параметр true, означает, что мы хотим подключить наш скрипт в футоре.

Напишем функцию обработки формы:

functions.php

function saveform(){
$mydiv=$_POST['mydiv'];
$mail=$_POST['mail'];
//Передадим полученные переменные обратно
echo $mydiv." - ".$mail;
die();  
}
add_action('wp_ajax_ajax_saveform', 'saveform' );
add_action('wp_ajax_nopriv_ajax_saveform', 'saveform' );//Эта строчка нужна, чтобы запрос отрабатывал для незарегистрированных пользователях

function saveform(){

$mydiv=$_POST['mydiv'];

$mail=$_POST['mail'];

//Передадим полученные переменные обратно

echo $mydiv." - ".$mail;

die();

}

add_action('wp_ajax_ajax_saveform', 'saveform' );

add_action('wp_ajax_nopriv_ajax_saveform', 'saveform' );//Эта строчка нужна, чтобы запрос отрабатывал для незарегистрированных пользователях

Это один из вариантов передачи и обработки данных.

Если бы мы решили отправлять, таким образом данные на сайт, который написан не на движке вордпресса, то тогда нужно было бы исключить следующую строчку:

formData.append(‘action’, ‘ajax_saveform’);