Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.09.2020, 04:26
Аспирант
Отправить личное сообщение для Katy93 Посмотреть профиль Найти все сообщения от Katy93
 
Регистрация: 28.12.2018
Сообщений: 67

Как сделать исчезновение нескольких полей и появлении надписи JQuery?
Пытаюсь сделать обратную связь нашла очень старый код 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

Последний раз редактировалось Katy93, 17.09.2020 в 04:29.
Ответить с цитированием
  #2 (permalink)  
Старый 17.09.2020, 04:44
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,655

Сообщение от Katy93
хочу добавить еще input'ы (name и email) и чтобы они тоже исчезали. Как это можно сделать?
Добавить их в форму.
Ответить с цитированием
  #3 (permalink)  
Старый 17.09.2020, 04:51
Аспирант
Отправить личное сообщение для Katy93 Посмотреть профиль Найти все сообщения от Katy93
 
Регистрация: 28.12.2018
Сообщений: 67

Цитата:
Добавить их в форму.
Это понятно я имею ввиду в javascript, чтобы они тоже исчезали и появлялась надпись. Как c примером textarea.
textarea.fadeOut(function(){
					var span = $('<span>',{
						className	: 'response',
						html		: text
					})
					.hide()
					.appendTo(feedback.find('.section'))
					.show();
				}).val('');
Ответить с цитированием
  #4 (permalink)  
Старый 17.09.2020, 05:01
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,655

А что эти элементы отображают, не ошибки в полях случано?
Ответить с цитированием
  #5 (permalink)  
Старый 17.09.2020, 05:08
Аспирант
Отправить личное сообщение для Katy93 Посмотреть профиль Найти все сообщения от Katy93
 
Регистрация: 28.12.2018
Сообщений: 67

Цитата:
А что эти элементы отображают, не ошибки в полях случано?
Я же написала в самом начале и даже код приложила, что форма медленно исчезает и появляется надпись "Спасибо". Ошибок нет.
Ответить с цитированием
  #6 (permalink)  
Старый 17.09.2020, 05:11
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,655

Сообщение от Katy93
Ошибок нет.
Да у вас коммунизм, быть уверенным в отсутствии ошибок, это как верить в светлое будущее.

Сообщение от Katy93
форма медленно исчезает и появляется надпись "Спасибо"
Ну а причем тут добавление других полей, добавляйте, код скрытия формы то есть у вас уже. В чем проблема?
Ответить с цитированием
  #7 (permalink)  
Старый 17.09.2020, 05:21
Аспирант
Отправить личное сообщение для Katy93 Посмотреть профиль Найти все сообщения от Katy93
 
Регистрация: 28.12.2018
Сообщений: 67

Короче понятно, что нужно искать в другом месте ответ, здесь походу дела никто не знает и причем тут коммунизм? Если кто не в курсе то ест такое волшебное меню, правой кнопкой мыши просмотреть код->Console и ошибок там нет. Значит делаем выводы, что ошибок нет.
Ответить с цитированием
  #8 (permalink)  
Старый 17.09.2020, 05:30
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,655

Сообщение от Katy93
Короче понятно, что нужно искать в другом месте ответ
Не обижайтесь, о коммунизме, это к слову, ведь не бывает такого, чтобы ошибки ввода исключались.

А по поводу скрытия - просто посмотрите в отладчике, что скрывается, если формы как таковой нет и скрываются в class="section", то вместо textarea нужно перечислить все элементы, включая и те что вы добавите. То есть:

$('селекторы всех элементов через запятую').fadeOut(function(){ ....
Ответить с цитированием
  #9 (permalink)  
Старый 17.09.2020, 05:43
Аспирант
Отправить личное сообщение для Katy93 Посмотреть профиль Найти все сообщения от Katy93
 
Регистрация: 28.12.2018
Сообщений: 67

Все спасибо за помощь, я сделала проще создала контейнер div и его скрываю.
<div class="feedback">
        <input type="text">
        <input type="text">
        <textarea></textarea>
      </div>


$('.feedback').fadeOut(function(){
					var span = $('<span>',{
						className	: 'response',
						html		: text
					})
					.hide()
					.appendTo(feedback.find('.section'))
					.show();
				}).val('');
Ответить с цитированием
  #10 (permalink)  
Старый 17.09.2020, 05:49
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,655

Сообщение от Katy93
я сделала проще создала контейнер div и его скрываю
В том то и было мое удивление в проблеме, ведь если есть форма, все что в нее добавили будет скрываться, если ее скрывать, а не одно поле.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать, чтобы при появлении всплывающего окна страница скролилась к якорю? Lefseq Общие вопросы Javascript 2 04.04.2020 08:58
Как сделать рабочую кнопку очистки полей? bogdanlantsuta Общие вопросы Javascript 1 14.06.2016 08:17
Как сделать как в JQ? faforty Общие вопросы Javascript 8 13.11.2011 23:35
Как сделать кнопку в заголовке jQuery ui dialog flytracer jQuery 2 15.10.2011 16:06
JQUERY - как сделать синхронный выбор/отмену выбора, в нескольких селектах формы sadzeburo jQuery 8 06.10.2011 14:24