Пример кода для создания формы обратной связи на PHP с использованием AJAX и проверками данных:
HTML-код формы (index.html):
<!DOCTYPE html>
<html>
<head>
<title>Форма обратной связи</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Форма обратной связи</h1>
<div id="message"></div>
<form id="contact-form" method="post">
<div>
<label for="name">Имя:</label>
<input type="text" id="name" name="name" required>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div>
<label for="message">Сообщение:</label>
<textarea id="message" name="message" required></textarea>
</div>
<div>
<input type="submit" value="Отправить">
</div>
</form>
</body>
</html>
?
PHP-код для обработки формы (contact.php):
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// Получение данных из формы
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
// Проверка данных
if (empty($name) || empty($email) || empty($message)) {
$response = array('status' => 'error', 'message' => 'Пожалуйста, заполните все поля.');
} elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$response = array('status' => 'error', 'message' => 'Пожалуйста, введите корректный email.');
} else {
// Отправка данных на почту или сохранение в базу данных
// В данном примере просто выводим данные на экран
$response = array('status' => 'success', 'message' => 'Спасибо! Ваше сообщение успешно отправлено.');
}
// Отправка ответа в формате JSON
echo json_encode($response);
}
?>
JavaScript-код для отправки формы с использованием AJAX (script.js):
$(document).ready(function() {
$('#contact-form').submit(function(e) {
e.preventDefault();
// Очистка сообщений об ошибках
$('#message').html('');
// Получение данных из формы
var formData = $(this).serialize();
// Отправка данных на сервер
$.ajax({
type: 'POST',
url: 'contact.php',
data: formData,
dataType: 'json',
success: function(response) {
if (response.status === 'success') {
// Если сообщение успешно отправлено
$('#contact-form')[0].reset(); // Очистка формы
}
// Отображение сообщения об успехе или ошибке
$('#message').html('<div class="' + response.status + '">' + response.message + '</div>');
}
});
});
});
?
Вышеуказанный код создает простую форму обратной связи на HTML, обрабатывает ее данные на сервере с помощью PHP и отправляет данные на сервер с использованием AJAX. В PHP-скрипте данные проверяются на пустые значения и правильный формат email. Результаты проверки возвращаются в формате JSON и отображаются на странице с помощью JavaScript.
Автор статьи:
RedCode