Приветствую всех знатоков.
На сайте есть форма для заказа обратного звонка. Для её создания потребовался файл CSS , два JS скрипта и Jquery. Как-то многовато для такой ерундовины.
Сегодня обнаружил, что последние версии браузеров на движке Chromium и даже Firefox сделали так, что в поле номера теперь нет автоматически выставленного +7 и скобок, которые, так сказать, подсказки пользователю для ввода номера телефона. Ах, да, форма отсылает имя и номер телефона человека в Telegram. В интернете полно слизанного плагиата, как сделать такую форму. Но все эти плагиатчики не упоминают, что поле ввода номера будет без +7 и скобок. Я сто лет искал код, чтобы самому сделать этот +7, а теперь последние версии браузеров это аннулировали к чёрту.
К тому же, при правке старой страницы я решил сегодня разместить кнопки. И офигел. Для каждой пришлось прописывать class в CSS. Но это полбеды. Ещё пришлось прописывать в JS. Однако функционирует JS скрипт странно. Несмотря на пропись в документе, некоторые кнопки не открываются вообще. При замене их местами, то есть последнюю кнопку, к примеру, выставить в документе третьей по счёту, тогда кнопка, что была последней и встала на третье место, начинает работать, но перестаёт работать какая-то другая кнопка.
Привязка кнопок по ID, соответственно. И этих ID, как я убедился, тоже лимит, потому что переименовывание ни к чему хорошему не приводит. Более того, как я понял, есть кнопки в header и footer, которые работают всегда. А вот другие кнопки, допустим, кнопка "ЗВОНИ", если размещена на странице "овощи", то на странице "фрукты" она уже не работает. получается ID будто привязывается к определённому документу, где ты его прописал. Это неимоверно бесит.
Отсюда вопрос. Как возможно избавиться от этой привязки к ID, чтобы кнопки работали и не надо было прописывать четыреста ID-шников для десятков страниц? Вплоть до того, что готов полностью перейти на какую-то другую форму, если она проста, как кусочек хозяйственного мыла и легка в подключении на десятках страниц, с переименованием самого текста в кнопке, лишь бы не было таких тупых заморочек с ерундовой какой-то формой.
А вот код php (да, по-моему, именно php правил, чтобы добиться +7 и скобок ) , благодаря которому удалось сделать в форме +7. И, да, проверил на телефоне - работает. Очищал кэш, удалял историю, куки и проч. - всё равно работает. Ибо на телефоне отключено автообновление браузера. То есть, в старых версиях браузеров работает исправно. А в новых - штанга. Траблу этому с +7 менее месяца точно. Заметил сегодня.
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (!empty($_POST['name']) && !empty($_POST['phone'])){
if (isset($_POST['name'])) {
if (!empty($_POST['name'])){
$name = strip_tags($_POST['name']);
$nameFieldset = "Имя пославшего: ";
}
}
if (isset($_POST['phone'])) {
if (!empty($_POST['phone'])){
$phone = strip_tags($_POST['phone']);
$phoneFieldset = "Телефон: ";
}
}
if (isset($_POST['theme'])) {
if (!empty($_POST['theme'])){
$theme = strip_tags($_POST['theme']);
$themeFieldset = "Тема: ";
}
}
$ip=$_SERVER["REMOTE_ADDR"]; // Вычисляем ip пользователя
$brose=$_SERVER["HTTP_USER_AGENT"]; // Вычисляем браузер пользователя
$txtname = trim($_POST['name']);
$txtNameValue = trim($_POST['name_class_value']);
$txtphone = trim($_POST['phone']);
$txttheme = trim($_POST['theme']);
// от кого
$fromMail = 'info@foryou.com';
$fromName = 'заявка с сайта';
// Сюда введите Ваш email
$emailTo = 'suka-ti-djo@bk.ru';
$subject = 'Форма обратной связи';
$subject = '=?utf-8?b?'. base64_encode($subject) .'?=';
$headers = "Content-type: text/plain; charset=\"utf-8\"\r\n";
$headers .= "From: ". $fromName ." <". $fromMail ."> \r\n";
// тело письма
$body = "Получена заявка с сайта https://preaniki.com\n\nИмя: $txtname\nТелефон: $txtphone\nТема: $txttheme\n\nIP отправителя: $ip\nБраузер отправителя: $brose";
$mail = mail($emailTo, $subject, $body, $headers, '-f'. $fromMail );
//echo 'ok';
$token = ":AAGAzjUOwxUfJ0342c";
$chat_id = "-1941";
$arr = array(
$nameFieldset => $name,
$phoneFieldset => $phone,
$themeFieldset => $theme
);
foreach($arr as $key => $value) {
$txt .= "<b>".$key."</b> ".$value."%0A";
};
$txt = str_replace('+','%2B',$txt);
$sendToTelegram = fopen("https://api.telegram.org/bot{$token}/sendMessage?chat_id={$chat_id}&parse_mode=html&text={$txt}","r");
if ($sendToTelegram) {
echo '<p class="form-title success">Наши поздравления!<br />Вы сделали правильный выбор!</p>';
return true;
} else {
echo '<p class="form-title fail"><b>Ошибка. Сообщение не отправлено!</b></p>';
}
} else {
echo '<p class="form-title fail">Ошибка. Вы заполнили не все обязательные поля!</p>';
}
} else {
header ("Location: /");
}
?>
А вот он JS для формы Telegram :
$(document).ready(function () {
$(".form-element").submit(function () {
var formID = $(this).attr('id');
var formNm = $('#' + formID);
var message = $(formNm).find(".form-message");
var formTitle = $(formNm).find(".form-title");
$.ajax({
type: "POST",
url: 'https://preanik.com/callback-form/telegramform/php/send-message-to-telegram.php',
data: formNm.serialize(),
success: function (data) {
// Вывод сообщения об успешной отправке
message.html(data);
formTitle.css("display","none");
$('input','.form-element').not(':input[type=submit], :input[type=hidden], :reset').val('');
$(".form-element input[type=submit]").attr('disabled','disabled');
/* setTimeout(function(){
formTitle.css("display","block");
message.html('');
$(".form-element input[type=submit]").attr('enabled','enabled');
}, 30000); */
},
error: function (jqXHR, text, error) {
// Вывод сообщения об ошибке отправки
message.html(error);
formTitle.css("display","none");
setTimeout(function(){
formTitle.css("display","block");
message.html('');
$('input').not(':input[type=submit], :input[type=hidden]').val('');
}, 3000);
}
});
return false;
});
});
var modal = document.querySelector("#modal"),
modalOverlay = document.querySelector("#modal-overlay"),
closeButton = document.querySelector("#close-button"),
openButton = document.querySelector("#call-computer-master");
openButton2 = document.querySelector("#call-pc-master");
openButton3 = document.querySelector("#call-computer-wizard");
openButton4 = document.querySelector("#phone-computer-wizard");
openButton5 = document.querySelector("#computer-wizard-call");
openButton6 = document.querySelector("#call-pc-wizard");
closeButton.addEventListener("click", function() {
modal.classList.toggle("closed");
modalOverlay.classList.toggle("closed");
});
modalOverlay.addEventListener("click", function() {
modal.classList.toggle("closed");
modalOverlay.classList.toggle("closed");
});
openButton.addEventListener("click", function() {
modal.classList.toggle("closed");
modalOverlay.classList.toggle("closed");
});
openButton2.addEventListener("click", function() {
modal.classList.toggle("closed");
modalOverlay.classList.toggle("closed");
});
openButton3.addEventListener("click", function() {
modal.classList.toggle("closed");
modalOverlay.classList.toggle("closed");
});
openButton4.addEventListener("click", function() {
modal.classList.toggle("closed");
modalOverlay.classList.toggle("closed");
});
openButton5.addEventListener("click", function() {
modal.classList.toggle("closed");
modalOverlay.classList.toggle("closed");
});
openButton6.addEventListener("click", function() {
modal.classList.toggle("closed");
modalOverlay.classList.toggle("closed");
});
$(function(){
$("#phone").mask("+7 (999) 999-99-99");
});
И вот этот "openbutton" если используется в одном документе, то в другом документе - НЕ работает уже. А после "openbutton5" создание новых кнопок бесполезно - они тупо не работают вообще нигде и никак.
