Помогите по форме заказа jQuery

19

Amoled

15 апреля 2014, 18:51

973

Приветствую :) Проблема следующая. Скрипт работает с главной страницы, т.е. при отправке сообщения всплывает окно со статусом отправки. Но при размещении формы во всплывающем окне (форма вызывается на кнопку

<button id="button">Click</button>

)она не работает и я не могу понять почему :confused: Т.е. форма отображается, но сообщение не уходит, скрипт почему то не хочет работать. Только всплывает окно где должен показываться отклик. Помогите плиз, буду крайне признателен.

index.html такой:


<!DOCTYPE html>

<html>

<head>

 <title>Title</title>

 <link rel="stylesheet" type="text/css" href="css/style.css" />

 <script src="js/jquery-1.11.0.js" type="text/javascript"></script>

 <script src="js/script.js" type="text/javascript"></script>

</head>

<body>



<p>Имя <input type=text id="name" maxlength=25 size=20  name="name"></p>

<p>Телефон <input type=text id="phone" maxlength=25 size=20  name="phone"></p>

<p>E-mail<input type=text id="email" maxlength=25 size=20  name="email"></p>

<button id="submit" value="Отправить">Ok</button>







<div id="popup"><a href="" id="hover1">Закрыть</a>

<p id='alert'></p>

</div>

<div id="hover"></div>



<div id="popup2"><a href="" id="hover1">Закрыть</a>

<p>Имя <input type=text id="name" maxlength=25 size=20  name="name"></p>

<p>Телефон <input type=text id="phone" maxlength=25 size=20  name="phone"></p>

<p>E-mail<input type=text id="email" maxlength=25 size=20  name="email"></p>

<button id="submit2" value="Отправить">Ok</button>

</div>

<div id="hover"></div>



<div id="popup3"><a href="" id="hover1">Закрыть Popup3</a>

<p id='alert'></p>

</div>

<div id="hover"></div>







<button id="button">Click</button>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum dui sed leo tristique dictum. Phasellus id feugiat lectus. 



</html>

сам скрипт:


$(document).ready(function(){

$('#submit').click(function() {

   var name = $('#name').val();

   var phone = $('#phone').val();

   var email = $('#email').val();

   

   $.post('http://jquery/send.php',

   {

   name: name,

   phone: phone,

   email: email

   },

   function(data){

      $('#alert').html(data);

   

    });

   

   })

   

   $('#button').click(function (){

    $('#popup2').show(500);

	$('#hover').show();

   });

   

   $('#submit').click(function (){

    $('#popup').show(500);

	$('#hover').show();

   });

   

   $('#submit2').click(function (){

    $('#popup3').show(500);

	$('#popup2').hide(500);

	$('#hover').show();

   });

   

   $('#hover').click(function () {

    $('#popup').hide(500);

	$('#popup3').hide(500);

    $('#hover').hide();

   });

   

});

CSS файл:


#popup {

display:none;

width:500px;

height:250px;

background: #ffffff;

position:absolute;

z-index: 997;

top: 50%;

left:50%;

margin-left:-250px;

margin-top:-125px;

}



#popup2 {

display:none;

width:500px;

height:250px;

background: #ffffff;

position:absolute;

z-index: 998;

top: 50%;

left:50%;

margin-left:-250px;

margin-top:-125px;

}



#popup3 {

display:none;

width:500px;

height:250px;

background: #ffffff;

position:absolute;

z-index: 999;

top: 50%;

left:50%;

margin-left:-250px;

margin-top:-125px;

}



#hover {

display:none;

width: 100%;

height: 100%;

background: rgba(0,0,0,0.5);

position: absolute;

top: 0;

left: 0;

z-index: 996;

}

Ну и до кучи PHP обработчик:

<?php

  $to = "test@mail.ru";

  $subject = "Запрос с сайта";

  $message = "Имя: $_POST[name] Телефон: $_POST[phone] E-mail: $_POST";

  $headers = "Content-type: text/html; charset=windows-1251";

  mail ($to, $subject, $message, $headers);

  

  if (mail) {

 echo "Отправлено!";

 }

 else {

 echo "Ошибка";

 }

?>

427

siv1987

15 апреля 2014, 19:13

#1

Что значит не работает? Что значит сообщение не уходит? На мыло сообщение не приходит, или сообщение не отправляется на обработчик? Включите дебагер и смотрите если аджакс запрос проходит.

Amoled:
**if*(mail)*{

Это что?

A

19

Amoled

15 апреля 2014, 19:29

#2

Сообщение не отправляется на обработчик. Со страницы отправляется, а с всплывающего окна не отправляется. Там 2 формы, одна прямо на странице, другая во всплывающем окне появляется (типа кнопка "заказать звонок").

33

speed-core

15 апреля 2014, 20:24

#3

$('#ID_ELEMENT').on('click', function () {
           if($('#id_hover_element').css('display') == 'none') {
			$('#id_hover_element').fadeIn('slow') ;
		} else {
			$('#id_hover_element').fadeOut('slow') ;
		}
	return false;
	} ) ;

как вариант.

а для отправки есть такой вариант:

$.ajax({ type: "POST",

HOST-PROTECTION (/ru/forum/848747), профессиональный web хостинг, гарантия стабильности, защита от DDoS.

204

дани мапов

15 апреля 2014, 20:25

#4

У Вас куча ошибок, для кнопки id="submit" есть отправка формы, а для id="submit2" - нет. Потом id должен быть уникальный, а на странице для input они повторяются (name, phone, email).

Написание и доработка скриптов (PHP, MySQL, JavaScript, jQuery) (/ru/forum/811046)

33

speed-core

15 апреля 2014, 20:31

#5

дани мапов верно говорит, если уж не хотите уникальный, то вариант есть такой:

$(this).next или find, или по первому совпавшему offsetParent

да и вообще, в jquery старайтесь использовать все уникальное.

A

19

Amoled

15 апреля 2014, 21:33

#6

Да знаю я что у меня ошибок много, я 3-й день только изучаю jQuery/JS ) Потому просьба по возможности ткнуть носом и разжевать.

I

37

imtod

16 апреля 2014, 05:12

#7

ТС, вам надо ваш js код перенести в html-файл с формой.

Помогаю не только словом.. (/ru/forum/830720)

A

19

Amoled

16 апреля 2014, 13:07

#8

дани мапов:
У Вас куча ошибок, для кнопки id="submit" есть отправка формы, а для id="submit2" - нет. Потом id должен быть уникальный, а на странице для input они повторяются (name, phone, email).

Да действительно, исправил указанные ошибки и всё заработало. Спасибо :)

Что делать, чтобы попасть в ответы Google Bard

Дзен реализовал для авторов возможность вывода денег через СПБ