Перейти к содержимому



Форма обратной связи в модальном окне

#1 Гость_Дмитрий_*

Гость_Дмитрий_*
  • Гости
0

Отправлено 04 Март 2014 - 18:46

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

Видел такие варианты ответа - 1) не прописывай в action=" " ничего и форма будет отправлять данные сюда же, при этом всем форма и обработчик должны быть в одном файле, как это сделать и чтоб это работало я не понял.

  2)Способо по умолчанию - когда обработчик создает еще 1 страницу и на нее выкидывает фразы, да можно задать точ такой же внешний вид, но вот фон уже не будет полупрозрачным. Сейчас пока так сделал.

  3)Где-то читал, что можно через exit или как-то еще выйти на нужную страницу, а над ней уже запустить код с формой. Но сколько я не пытался, все время либо исчезала вся форма, или форма была на непрозрачном фоне.

Если кто может подсказать или посоветовать что-то, буду рад. Если понадобится могу код кинуть)


 

 

  • 0

#2 Symphony

Symphony
  • Пользователь
  • 636 сообщений
  • Репутация: 54

Отправлено 05 Март 2014 - 10:42

Аякс в помощь http://jsfiddle.net/Symphony/qS9vy/18/


Сообщение отредактировал Symphony: 05 Март 2014 - 11:54

  • 0


#3 Drevko

Drevko
  • Пользователь
  • 8 сообщений
  • Репутация: 0

Отправлено 06 Март 2014 - 05:08

А если как нить без всяких аяксов и т.д., а простыми методами? Вот все такие простые - иди возись с движками, еще чем нить, неужели нет способа сделать это с помощью простого кода, хотя бы РНР. Давайте попробую более конкретна описать проблему. На данном этапе моя форма связи имеет следующий синтаксис:

   Собственно сделана обычная форма,  которая запускается через нажатие на картинку

       <a href="#" class="images" title="Связь с администратором" onclick="document.getElementById('fonvneshni').style.display='block';"></a>

по такому коду, сразу создается полупрозрачный фон и на нем сама форма, которая тоже полупрозрачная. Мне нравится вообще все что связано с прозрачными фонами. В открывшемся окошке если нажать крестик то он закроет окошко вот этой командой

  <div id="close" style="cursor: pointer;" onclick="document.getElementById('fonvneshni').style.display='none';"></div>

Вот скажем вводим все данные они уходят в обработчик сделанный в РНР, начальная часть не важна , покажу конечную часть проверки и вывода сообщения:

if(!preg_match("/[A-Za-zА-Яа-яЁё]/i", $name)){{
 {
     echo "<!DOCTYPE html>
<html>

<head>
<title>Обратная связь</title>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251'>
<link rel='stylesheet' type='text/css' href='style2.css'>
</head>
     <center>
         <div id='fonvneshni'>
         <div id='fonsviazi'>
         <div id='close'><a href='главная страница'><img src='images/krestik_zakrivaushiy.jpg' alt=''></a></div>
         <p style='text-align: center;' class='contact-title'>СВЯЗЬ c АДМИНИСТРАТОРОМ</p>
     <form action='send.php' method='post'>
       <table align='center' border='0'>
       <tbody>
       <tr>
       <td class='lable'><b>*Ваше имя:</b><br>
       <input name='name' style='width:320px; height:15px; margin-top:5px;' class='input' type='text'></td></tr>
       <tr>
       <td></td></tr>
       <tr>
       <td class='lable'><b>*Ваш e-mail:</b><br>
       <input name='email' style='width:320px; height:15px; margin-top:5px;' class='input' type='text'></td></tr>
       <tr>
       <td></td></tr>
       <tr><td class='lable'><b>*Сообщение:</b><br>
       <textarea name='text_message' style='width:320px; height:180px; margin-top:5px;' cols='40' rows='10' class='input'></textarea></td></tr>
       <tr>
       
       <td class='error'>Имя должно состоять только из букв!</td>
       
       </tr>
       <tr>
       <td align='center' style='padding-top:10px;'>
       <input name='mail_submit' type='submit' value='Отправить сообщение'>
       </td></tr>
       </tbody>
       </table>
       </form></div></div>
       <a href='#' onclick='document.getElementById('fonvneshni').style.display='block' ;'></a></center></html>" ;} return false;} return true; }

Вот тут, если введено скажем имя правильно или нет то создается страничка, а на ней сама форма, точно такая же как начальная и это сразу убивает мою полу прозрачность, а крестик почему-то перестает закрывать страницу выводя на ту с которой пришел, пришлось прописать при его нажатии путь через ссылку. Из-за этого путь ставится всегда один на всех страницах, и выводит на главную. Это все как-то не правильно, хочется найти способ, чтоб после

   if(!preg_match("/[A-Za-zА-Яа-яЁё]/i", $name)){{
 {
     echo " Поздравляю!!!  "

не создавал страницу, а как-то перекидывал эту фразу в форму начальную, при этом сохранится прозрачность и крестик будет закрывать как полагается. Можете посмотреть исходный код на самом сайте http://cnoco6-3apa6omamb.ru (значок запуска обр.связи на панели меню справа) . И при этом всем нет совершенно времени изучать сейчас Аякс и другие приложения, потому ищу решения более простым методом. Недавно вычитал то, что поддерживает мою надежду в решении данной проблемы  - если action=" " не прописывать то сообщения с формы не пойдут в обработчик, а останутся на странице, при этом сам обработчик тоже должен быть на этой странице. Вот я и ищу способ как это сделать...и тогда все будет в шоколаде.

 

П.С. Товарищи администрация, если моя ссылка на сайт претит вашим правилам, в которые я не вчитывался, удалите ее, а тему прошу не удалять.


  • 0

#4 Symphony

Symphony
  • Пользователь
  • 636 сообщений
  • Репутация: 54

Отправлено 06 Март 2014 - 10:30

Отправить информацию на сервер вы можете двумя способами ПОСТ и ГЕТ, без аяксовой реализации эти 2 метода перезагрузят страницу.

Можно сделать так: после отправки формы изенить хтмл

<div id="fonvneshni" style="display:block">
         <div id='fonsviazi'>
                   <p>Поздравляю!!!</p>
         </div> 
</div>
 

пс: используйте форматирование текста


  • 0


#5 Drevko

Drevko
  • Пользователь
  • 8 сообщений
  • Репутация: 0

Отправлено 06 Март 2014 - 11:46

не понял, в каком месте изменить хтмл , я попробовал вставлять вот в этом месте
 

<td align="center" style="padding-top:10px;">
       <input name="mail_submit" type="submit" value="Отправить сообщение">
       </td>тут - перекрывает саму форму</tr>
        
       </tbody>тут- вылазиет на экран
       </table>тут- вылазиет на экран
       </form></div></div>тут- вылазиет на экран

 
Или внутри обработчика это вставить?


  • 0

#6 Symphony

Symphony
  • Пользователь
  • 636 сообщений
  • Репутация: 54

Отправлено 06 Март 2014 - 12:33

На левой коленке накатал. Это извращение должно работать

Файл: index.php

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			margin: 0; padding: 0
		}
		.wr {
			width: 760px;
			margin: 40px auto;
			line-height: 24px;
		}
		.wr p, input {
			margin: 6px 0;
		}
		#ov {
			display: none;
			width: 100%;
			height: 100%;
			position: absolute;
			top:0; left:0;
			background: rgba(0,0,0,.7);
		}
		a {
			float: right;
			margin-top: -35px;
		}

		#mw {
			width: 400px;
			background: #eee;
			margin: 100px auto;
			padding: 18px;
		}

	</style>
</head>
<body>
	<div id="ov" <?php if($_POST){print 'style="display:block"';} ?>>
		<div id="mw">
			<h3>Modal window</h3><a href="#" onclick="document.getElementById('ov').style.display='none';">close</a>
			<div>
			<?php
				if($_POST){
					print "<p>Success!</p>";
				}else{ ?>

				<form action="" method="post">
					<input type="text" name="s"><br>
					<input type="text" name="f"><br>
					<textarea name="v" id="" cols="30" rows="10"></textarea>
					<input type="submit">
				</form>
			<?php
				}
			?>
		</div>
		</div>
	</div>
	<div class ="wr">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, soluta sequi commodi rerum temporibus voluptate maiores deleniti ipsam quia odit doloremque libero totam doloribus ab amet ex qui autem consequatur.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, soluta sequi commodi rerum temporibus voluptate maiores deleniti ipsam quia odit doloremque libero totam doloribus ab amet ex qui autem consequatur.</p>
	<p><button onclick="document.getElementById('ov').style.display='block';">CLICK - MODAL WINDOW</button></p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, soluta sequi commodi rerum temporibus voluptate maiores deleniti ipsam quia odit doloremque libero totam doloribus ab amet ex qui autem consequatur.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, soluta sequi commodi rerum temporibus voluptate maiores deleniti ipsam quia odit doloremque libero totam doloribus ab amet ex qui autem consequatur.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, soluta sequi commodi rerum temporibus voluptate maiores deleniti ipsam quia odit doloremque libero totam doloribus ab amet ex qui autem consequatur.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, soluta sequi commodi rerum temporibus voluptate maiores deleniti ipsam quia odit doloremque libero totam doloribus ab amet ex qui autem consequatur.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, soluta sequi commodi rerum temporibus voluptate maiores deleniti ipsam quia odit doloremque libero totam doloribus ab amet ex qui autem consequatur.</p>
	</div>
</body>
</html>

Сообщение отредактировал Symphony: 06 Март 2014 - 12:35

  • 1


#7 Drevko

Drevko
  • Пользователь
  • 8 сообщений
  • Репутация: 0

Отправлено 06 Март 2014 - 14:37

Спасибо за проделанную работу, чуть попозже разберусь, просмотрю все.


  • 0

#8 Drevko

Drevko
  • Пользователь
  • 8 сообщений
  • Репутация: 0

Отправлено 07 Март 2014 - 11:50

Вот смотри что выходит. Объясни почему else со всеми скобочками виден? Я уже по всякому пробовал -  но всегда вот эти внутренности все портят, не исчезают. У меня файлы все .html, на РНР перехожу за счет .htaccess, внутри которого стоит только это - AddHandler application/x-httpd-php .html, может у меня в РНР не переходит нормально и поэтому видны куски? Но я пробовал различные проверялки везде все работало, да и тот код который у меня сейчас в сенд.рнр тоже работает нормально, все обрабатывается. Тогда где проблема не пойму...

 

 

na vremya.jpg na vremya1.jpg


Сообщение отредактировал Drevko: 07 Март 2014 - 12:00

  • 0

#9 Symphony

Symphony
  • Пользователь
  • 636 сообщений
  • Репутация: 54

Отправлено 07 Март 2014 - 12:02

Кто вам мешает ставить расширение .php? http://druk.bl.ee/


  • 0


#10 Drevko

Drevko
  • Пользователь
  • 8 сообщений
  • Репутация: 0

Отправлено 07 Март 2014 - 14:29

Хех, а тут вот у вас смотрю ссылку, все норм показывает, значит где-то проблема в .htaccess файлике. Почему не ставлю .php? Ну просто голопом по европам настрочил 18 страниц, а переделывать везде не хотелось, нашел выход называется=))) Видимо надо пока не поздно переделать и не париться


  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru