Обрабатываем и сохраняем данные формы с помощью JQuery
Простой пример работы с формой HTML и сохранения её данных на стороне сервера, подобно вот этому, но новее и с использованием JQuery (подключается с сайта ajax.googleapis.com).
В демо-форме представлены основные интерфейсные элементы HTML 4/5 (однострочное и многострочное поля ввода, группа радиокнопок, чекбокс, списки с выбором одного элемента и с множественным выбором) и показаны обработка и отправка данных от них. Текстовые поля возвращаются в форму "исправленными" (избавленными от лишних разделителей и переводов строк). Перегрузка всей страницы, как и положено в AJAX, не выполняется.
Нам понадобилось 2 файла - index.php выводит форму и организует проверку результатов,
возвращённых вторым скриптом, data.php, который выполняет контроль данных на стороне сервера и
обрабатывает их (в демо-примере - переписывает на сервере файл 1.txt с JSON-представлением данных формы).
Форма для простоты сделана просто "ручной" разметкой. Всё остальное, думаю, легко увидеть из исходников.
Файл index.php
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>JQuery Form Processing Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p>Пример обработки формы на JQuery;
<a href="http://blog.kislenko.net/show.php?id=2726" target="_blank">статья</a>;
<a href="1.txt" charset="UTF-8" target="_blank">последний записанный файл</a> (.txt, JSON).
</p>
<form method="post" id="postForm">
<p>
Имя: <input type="text" id="name" placeholder="Введите строку">
</p>
<p>
Пол:
<select id="gender" size="1">
<option value="none">Гендерный</option>
<option value="male">Мужской</option>
<option value="female">Женский</option>
</select>
</p>
<p>Я хочу получить услуги:
<input type="radio" id="tarif1" name="tarif" value="1"><label for="tarif1">быстро и недорого</label>
<input type="radio" id="tarif2" name="tarif" value="2"><label for="tarif2">качествено и недорого</label>
<input type="radio" id="tarif3" name="tarif" value="3"><label for="tarif3">быстро и качественно</label>
</p>
<p>
<p>Дополнительные опции (<i>выберите нужные при зажатой клавише Ctrl</i>):<br>
<select id="options" size="3" multiple>
<option value="1">Позвать Ктулху</option>
<option value="2">Налепить на стену</option>
<option value="3">Раскрасить рюшечками</option>
</select>
</p>
Я хочу получать спам:
<input type="checkbox" id="spam"><label for="spam">да</label>
</p>
<p>
Комментарий:<br>
<textarea id="comment" rows="10" cols="80" maxlength="1024"></textarea>
</p>
<p>
<input name="action" type="submit">
</p>
<p>
<span class="throw_error"></span>
</p>
</form>
<script>
$(document).ready(function() {
$('#postForm').submit(function(event) {
$('.throw_error').empty(); //Очистили поле сообщений
let postForm = { //Собрали данные формы
'name': $('#name').val(), //поле ввода
'gender': $('#gender').val(), //список с выбором одного элемента
'tarif': $('input:radio[name=tarif]:checked').val(), //радиокнопки
'options': $('#options').val().join(';'), //список multiple передадим как строку
'comment': $('#comment').val(), //многострочное поле
'spam': $('#spam:checked').val() //чекбокс
};
$.ajax({
type: 'POST',
url: 'data.php', //подключаем обработчик!
data: postForm,
dataType: 'json',
success: function(data) {
if (!data.success) { //Проверили ошибки
if (data.errors) {
$('.throw_error').fadeIn(1000).html(data.errors);
}
}
else { //Успешно
$('.throw_error').fadeIn(1000).html(data.posted);
}
//Вернули в форму нужные данные:
$('#name').val(data.name);
$('#comment').val(data.comment);
}
});
event.preventDefault();
});
});
</script>
</body></html>
Файл data.php (та же папка на сервере)
<?php
//Получение данных формы
function trimall ($string) { //Удалить лишние пробелы и переводы строк
return preg_replace("/(^\s*)|(\s*$)/",'',preg_replace("/\s+/",' ',trim($string)));
}
$params = array ('action','name','gender','tarif','options','spam','comment'); //Разрешённые имена параметров
foreach ($params as $num=>$var) { //Получаем все параметры или создаём пустые переменные с разрешёнными именами
if (isset($_POST[$var])) $$var = trimall(htmlspecialchars($_REQUEST[$var],ENT_COMPAT,'UTF-8'));
else if (isset($_SESSION[$var])) {
$$var = trimall(htmlspecialchars($_SESSION[$var],ENT_COMPAT,'UTF-8'));
unset ($_SESSION[$var]);
}
else $$var = '';
}
//Валидация формы на стороне сервера
$form_data = [];
$errors = '';
if (empty($name)) {
$errors .= 'Имя не должно быть пустым<br>';
}
if (empty($gender) or $gender == 'none') {
$errors .= 'Пол не должен быть гендерным, выберите мужской или женский<br>';
}
if (empty($tarif)) {
$errors .= 'Вы должны выбрать тариф<br>';
}
if (empty($spam)) {
$errors .= 'Вы должны соласиться получать спам<br>';
}
//Передача для формы значений, которые, возможно, будут исправлены
$form_data['name'] = $name;
$form_data['comment'] = $comment;
//Контроль ошибок валидации
if (!empty($errors)) {
$form_data['success'] = false;
$form_data['errors'] = $errors;
}
else {
$form_data['success'] = true;
$form_data['posted'] = 'Данные отправлены успешно';
}
//Что-то делаем с данными $name, $gender, $tarif, $options, $spam, $comment, пишем их в базу, солим или маринуем
$arr['name'] = $name;
$arr['gender'] = $gender;
$arr['tarif'] = $tarif;
$arr['options'] = $options;
$arr['spam'] = $spam;
$arr['comment'] = $comment;
file_put_contents ('1.txt', json_encode($arr, JSON_UNESCAPED_UNICODE)); //Просто для примера переписываем файл
echo json_encode($form_data, JSON_UNESCAPED_UNICODE); //Возврат результатов обработки
?>
Следует учесть, что на сервере текстовый файл может "закэшироваться" и для показа настоящего содержимого придётся понажимать кнопку "Обновить" в браузере. Также не исключено, что вы увидите "не своё" содержимое, если скриптом в этот момент пользовался кто-то ещё :)
20.06.2021, 15:56 [1712 просмотров]