Пытаюсь сделать обратную связь нашла очень старый код 2011 года. Этот вариант мне подходит, там используется fadeOut, чтобы форма плавно исчезла и появилась надпись, например "Спасибо". Изначально в исходниках использовалась textarea, я хочу добавить еще input'ы (name и email) и чтобы они тоже исчезали. Как это можно сделать? И вот еще что я понимаю, что код очень старый, за это время много что изменилось, есть ли какие-нибудь способы сделать скрипт более современным?
Вот примеры исходных кодов:
<?php
header("Content-Type: text/html; charset=utf-8");
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Форма обратной связи с использованием PHP и jQuery</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="feedback">
<div class="section">
<h6>Обратная связь</h6>
<textarea></textarea>
<a class="submit" href="">Отправить</a>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
script.js
$(document).ready(function(){
// Относительный URL скрипта submit.php.
// Вероятно, вам нужно будет его поменять.
var submitURL = 'submit.php';
// Кэшируем объект feedback:
var feedback = $('#feedback');
$('#feedback a.submit').live('click',function(){
var button = $(this);
var textarea = feedback.find('textarea');
// Мы используем класс working не только для задания стилей для кнопки отправки данных,
// но и как своеобразный замок для предотварщения множественных генераций формы.
if(button.hasClass('working') || textarea.val().length < 5){
return false;
}
// Запираем форму и изменяем стиль кнопки:
button.addClass('working');
$.ajax({
url : submitURL,
type : 'post',
data : { message : textarea.val()},
complete : function(xhr){
var text = xhr.responseText;
// Жанная операция помогает пользователю определить ошибку:
if(xhr.status == 404){
text = 'К путь к скрипту submit.php не верный.';
}
// Прячем кнопку и область текста , после которой
// мы показывали полученный ответ из submit.php
button.fadeOut();
textarea.fadeOut(function(){
var span = $('<span>',{
className : 'response',
html : text
})
.hide()
.appendTo(feedback.find('.section'))
.show();
}).val('');
}
});
return false;
});
});
submit.php
<?php
header("Content-Type: text/html; charset=utf-8");
// Здесь нужно ввести свой адрес
$emailAddress = '';
session_start();
if( $_SESSION['lastSubmit'] && ( time() - $_SESSION['lastSubmit'] < 10 || $_SESSION['submitsLastHour'][date('d-m-Y-H')] > 10 )){
die('Пожалуста, подождите несколько минут, прежде чем отправить соообщение снова.');
}
echo 'Спасибо!';
?>
На всякий случай вот исходники:
test2.zip