1. Главная
  2. Категории
  3. Веб программирование
  4. Ajax

Как сделать модуль бесплатной консультации на ajax


В этой статье речь пойдет о создании вот такого всплывающего блока с заявкой на консультацию по телефону. После ввода телефона и нажатия на кнопку «проконсультировать» на заранее указанный адрес будет отправлено письмо с просьбой перезвонить по данному номеру. Реализовывать блок мы будет с помощью Ajax и PHP.  

 

Блок имеет функцию проверки корректности введенных данных: как по длине введенного номера, так и по введенным символам, если они отличны от цифр. Если данные введены неверно, то пользователь увидит сообщение:

 

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

 

HTML-каркас блока выглядит следующим образом:

<div id="box" class="free-consultation-okno" style="display: block;">
    <span style="position: absolute; top:5px; right:10px; color:#fff;">
        <a href="#" style="text-decoration: none; color:#000;" onclick="openbox()">
         <span style="font-size:12px; color:#000; ">Закрыть Х</span>
      </a>
   </span>
    <br><br>
    <div style="text-align: center;">
      <span style="font-size:35px; font-family: 'Exo2Regular'; line-height: 1.2em; "><? echo $mas['title']?></span>
    </div>
    <br><br>
    <div id="start">
      <div style="text-align:center;">
         <span style="font-size:180%; line-height: 1.2em;  "><? echo $mas['top']?></span>
      </div>
      <a class="free-consultation-phone" style="text-align: center; font-size:25px; padding: 13px; line-height: 1.2em;">
         <? echo $mas['phone']; ?>
      </a>
      <br>
        <div style="text-align:center;">
            <span style="font-size:180%; line-height: 1.2em;"><? echo $mas['middle']?></span>
        </div>
        <input type="tel" name="tel" id="tel" value="+7" maxlength="12"  onkeyup="this.value = this.value.replace (/[^0-9+]/, '')" style="
      width: 235px; padding: 8px; background: #333;  color:#fff; border-radius: 5px; font-size:32px; border:0px solid #333; margin-top:10px;">
      <br>
        <div style="text-align:center;">
            <span style="font-size:81%; margin-left: -3px; "><? echo $mas['under']?></span>
        </div>
        <a onclick="get()" class="free-consultation-button" style="padding-top: 9px;">
            <span><? echo $mas['button']?></span>
        </a><br><br>
    </div>
    <div id="finish" style="display: none; text-align: center;"><br><br><br><br>
            <span style="font-size:180%; ">Ваша заявка принята ждите ответа<br>
            <a onclick="close1('finish')" class="free-consultation-button" style="text-align: center;"> Закрыть окно</a>
            </span>
    </div>
    <div id="error_l" style="display: none; text-align: center;"><br><br><br><br>
            <span style="font-size:180%; ">Ваша заявка принята, ждите ответа
            <a onclick="close1('error_l')" class="free-consultation-button" style="text-align: center;"> Закрыть окно</a>
            </span>
    </div>
    <div id="error" style="display: none; text-align: center;"><br><br><br><br>
            <span style="font-size:180%; ">Вы ввели неправильный номер телефона!<br>
            <a onclick="edit()" class="free-consultation-button" style="text-align: center;"> Исправить</a>
            </span>
    </div>
    <!--Ajax передать форму обработать и выслать сообщения в виде блока -->
        <span style="font-size:12px; width:250px; text-align:center; display:block; bottom:5px; position:absolute; "><? echo $mas['bottom']?></span><br>
</div>

 

Не забываем подключить библиотеку Jquery.

Заполнение полей происходит из массива $mas, который наполняется из базы данных:

<?
$db = mysql_connect ("localhost","ajax","14253647");
mysql_select_db ("ajax",$db);
mysql_set_charset('utf8');

$query = mysql_query("SELECT * FROM window WHERE id = 1");
$mas = mysql_fetch_array($query);
?>

 

Проверка корректности символов осуществляется этой строкой:

onkeyup="this.value = this.value.replace (/[^0-9+]/, '')

 

Функция onkeyup проверяет значение введенного символа в момент отпускания клавиши, и заменяет его на пустой символ, если введенный отличен от цифрового.

 

В вышеуказанном коде присутствуют следующие основные функции:

openbox() – вывод всего блока на экран при нажатии на кнопку:

function openbox(){
    var display = document.getElementById('box').style.display;
    var free = document.getElementById('free-consultation').style.display;
    if(display=='none'){
        document.getElementById('box').style.display = 'block';
    }else{
        document.getElementById('box').style.display='none';
    }
    if(free=='none'){
        document.getElementById('free-consultation').style.display = 'block';
    }else{
        document.getElementById('free-consultation').style.display='none';
    }
}

 

edit() - исправление неверно введенного номера. Возвращает к окну ввода номера:

function edit() {
    document.getElementById('error').style.display='none';
    document.getElementById('start').style.display='block';
}

 

close1(id) – закрытие элемента, название которого передано в функцию. Возвращение к первоначальному виду блока:

function close1(id) {
    document.getElementById(id).style.display='none';
    document.getElementById('start').style.display='block';
    document.getElementById('box').style.display='none';
    document.getElementById('free-consultation').style.display = 'block';
}

 

get() - отправка сообщения на почту, добавление номера в базу данных, вывод сообщения об удачной или неудачной отправке заявки. Основная часть функции расположена в файле check.php, содержимое которого разберем ниже.

function get() {
    var tel = document.getElementById('tel').value;
    var length =  document.getElementById('tel').value.length;
    if (length == 12) {
        $.ajax({
            type: "post",
            url: "ajax/check.php",
            data: {'tel':tel},//параметры запроса
            //тип возвращаемого ответа text либо xml
            success: function(msg) {
                if(msg == 1) {
                    document.getElementById('start').style.display='none';
                    document.getElementById('finish').style.display='block';
                }

                else {
                    document.getElementById('start').style.display='none';
                    document.getElementById('error_l').style.display='block';
                }
            }
        });

    } else {
        document.getElementById('start').style.display='none';
        document.getElementById('error').style.display='block';
    }
}

 

Файл check.php содержит следующие функции:

send_email($phone) – отправка письма с номером на заданный адрес. Перед отправкой считывается дата и время, затем они разбиваются на отдельные переменные при помощи функции explode(). Также существует переформатирование времени с 12 часов на 24. Данные передаются на предыдущую страницу при помощи массива сессии.

function send_email($phone) {
   $date_time_string = date('d.m.Y h:i:s');
// Разбиение строки в 3 части - date, time and AM/PM
   $dt_elements = explode(' ',$date_time_string);
// Разбиение даты
   $date_elements = explode('.',$dt_elements[0]);
// Разбиение времени
   $time_elements =  explode(':',$dt_elements[1]);
// Если у нас время в формате PM мы можем добавить 12 часов для получения  24 часового формата времени
      $time_elements[0] = $time_elements[0]+5;
// вывод результата
   $date = $time_elements[0].':'.$time_elements[1].':'.$time_elements[2].' '.$date_elements[0].'.'.$date_elements[1].'.'.$date_elements[2];
   // от кого
   $fromMail = 'admin@import-china.ru';
   $fromName = 'IMPORT-CHINA';
   // все из базы

   $db = mysql_connect ("localhost","ajax","111111111");
   mysql_select_db ("ajax",$db);
   mysql_set_charset('utf8');
   $query = mysql_query("SELECT * FROM window WHERE id = 1");
   $mas = mysql_fetch_array($query);
   $_SESSION['mas']=$mas;

   // Сюда введите Ваш email
   $emailTo = $mas['email'];

   $subject = 'IMPORT-CHINA.RU '.$phone.' '.$date;
   $subject = '=?utf-8?b?'. base64_encode($subject) .'?=';
   $headers = "Content-type: text/plain; charset=\"utf-8\"\r\n";
   $headers .= "From: ". $fromName ." <". $fromMail ."> \r\n";

   // тело письма
   $body = "Получено письмо с сайта www.import-china.ru\n
   Заявка на Бесплатную Консультацию\n
   Телефон: $phone\n
   Дата: $date\n";

   mail($emailTo, $subject, $body, $headers, '-f'. $fromMail );

}

 

add($phone) – добавление нового номера в базу данных стандартным запросом INSERT INTO. Как и в предыдущей функции производится разбиение даты и времени на конкретные переменные и переформатирование на 24-часовой формат.

function add($phone) {
   $date_time_string = date('d.m.Y h:i:s');
// Разбиение строки в 3 части - date, time and AM/PM
   $dt_elements = explode(' ',$date_time_string);
// Разбиение даты
   $date_elements = explode('.',$dt_elements[0]);
// Разбиение времени
   $time_elements =  explode(':',$dt_elements[1]);
// Если у нас время в формате PM мы можем добавить 12 часов для получения  24 часового формата времени
      $time_elements[0] = $time_elements[0]+5;

// вывод результата
   $date = $time_elements[0].':'.$time_elements[1].':'.$time_elements[2].' '.$date_elements[0].'.'.$date_elements[1].'.'.$date_elements[2];
   $db = mysql_connect ("localhost","phpshop","11111111");
   mysql_select_db ("phpshop",$db);
   mysql_set_charset('utf8');
   mysql_query ("INSERT INTO apps (date,phone) VALUES('$date','$phone')");
}

 

check_phone($phone) – проверка на наличие такого же номера в базе данных по запросу.

function checkPhone($phone)
{
   $db = mysql_connect ("localhost","irogex3","1111111111");
   mysql_select_db ("irogex3",$db);
   mysql_set_charset('utf8');

   $query = mysql_query("SELECT `phone` FROM `free` WHERE (`phone`='$phone')");
   if (!$result = mysql_fetch_array($query)){
      // если нету такого email в БД верни TRUE, значит можно регать новый
      return TRUE;
   }
   else
   {
      // если есть такой email, то верни FALSE
      return FALSE;
   }
}

 

Кроме того, в файле содержится дополнительная проверка на корректность номера, которая удаляет пробелы в начале и конце строки, сравнивает длину и введенные данные:

$phone=trim($_POST['tel']);
   if (($phone !== '+7') and (strlen($phone) == 12)) {
echo '1';
      add($phone);
      send_email($phone);
   } else {
      echo 'no';
        send_email($phone);
   }

 

Таким образом мы реализовали всплывающий блок, работа с которым производится без перезагрузки страницы. Пользователь сможет отправить письмо-заявку на звонок прямо во время знакомства с сайтом. Рабочий образец данного блока вы можете найти на сайте import-china.ru

exp1 Просмотров сегодня +1 19 июня 2017
Ещё пока нет комментариев, будь первым!
Оставить комментарий
→ Займы под залог недвижимости срочно за 1 день! ИП Блажевич Денис Викторович ИНН: 032602092643
Реклама Получите займ под залог без подтверждения доходов в день обращения. Самые выгодные условия. Любая кредитная история!
www.capitalinvestbv.ru
SEO продвижение ваших сайтов от 25 000 руб. в мес. Создание сайтов и мобильных приложений от 5 500 руб. Любой сложности!
Реклама Собственный фреймворк. Большие и сложные проекты. ТОП 100 разработчиков РФ.
irogex.ru
→ BULLET-SHOP - сварка аргоном, полуавтомат, тюнинг авто!
Реклама Ремонтируем радиаторы, интеркулеры, пайпинг и ВСЁ из алюминия, чугуна, стали с ГАРАНТИЕЙ КАЧЕСТВА. Диагностика и ремонт подвески, трансмиссии, всех узлов и агрегатов
www.bullet-shop.pro
Реклама помогает поддерживать
и развивать наш сервис.

Подробнее
(ссылка откроется в новой вкладке)