Помощь с всплывающим окном -закрытие после отправки данных
Всем привет. Помогите пожалуйста с формой. Есть форма на сайте
Пытаюсь сделать что бы окно закрывалось после отправки формы, либо страница перезагружалась. никак не выходит.
Код html
Пытаюсь сделать что бы окно закрывалось после отправки формы, либо страница перезагружалась. никак не выходит.
Код html
<div class="popup">
<!--div class="popup_close"></div-->
<!--div class="popup_title"></div-->
<div class="popup_content">
<div class="popup_text">Заполните простую форму ниже для того чтобы получить актуальную цену<h1></h1></div>
<form action="/_mzbi/popup_tovar.php" method="POST" name="form_popup">
<input type="tel" placeholder="+7(999)999-99-99" name="phone" required>
<input type="email" placeholder="Введите Вашу почту" name="email" required>
<input class="tovar2" name="tovar2" value="<?= $f_title ?>" hidden>
<input type="hidden" name="token" id="token">
<input type="hidden" name="action" id="action">
<input type="submit" class="popup_submit" value="Узнать актуальную цену">
</form>
<script>
let captcha_action = 'add_comment';
grecaptcha.ready(function() {
grecaptcha.execute('API', {action: captcha_action})
.then(function(token) {
if (token) {
document.getElementById('token').value = token;
document.getElementById('action').value = captcha_action;
}
});
});
</script>
<script>
$(document).on('af_complete', function(event, response) {
if (response.success) {
// 1. Просто закрыть
$('.popup').hide();
// 2. Или с анимацией
$('.popup').fadeOut();
}
});
</script>
<div class="popup_text2">Нажимая на кнопку, Вы даёте согласие на обработку персональных данных и соглашаетесь с политикой конфидециальности</div>
</div>
</div>
<div class="bg_popup"></div>
Код php<?php
if (isset($_POST['token']) && isset($_POST['action'])) {
$captcha_token = $_POST['token'];
$captcha_action = $_POST['action'];
} else {
die('Капча работает некорректно. Обратитесь к администратору!');
}
$url = 'https://www.google.com/recaptcha/api/siteverify';
$params = [
'secret' => 'API',
'response' => $captcha_token,
'remoteip' => $_SERVER['REMOTE_ADDR']
];
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $params);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$response = curl_exec($ch);
if(!empty($response)) $decoded_response = json_decode($response);
$success = false;
if ($decoded_response && $decoded_response->success && $decoded_response->action == $captcha_action && $decoded_response->score > 0) {
$success = $decoded_response->success;
$email = $_POST['email'];
$phone = $_POST['phone'];
$tovar2 = $_POST['tovar2'];
mail("ostrovskijj@ya.ru","Запрос цены","На сайте был сделан запрос цены. \nEmail клиента: $email \nТелефон клиента: $phone \nТовар: $tovar2"); // обрабатываем данные формы, которая защищена капчей
} else {
// прописываем действие, если пользователь оказался ботом
}
$result = $success ? 'Капча пройдена успешно!' : 'Неверная капча!';
echo json_encode($success);
Код js$(function() {
$('.open_popup').click(function(){
$('.popup .popup_text h1').text($(this).data('tovar'));
$('.popup').fadeIn();
$('.bg_popup').fadeIn();
$('.bg_popup, .popup_close').click(function(){
$('.popup').fadeOut();
$('.bg_popup').fadeOut();
});
return false
});
});
Комментарии: 12
Перед формой в консоле у вас ошибка связанная с капчей, на сайте капчу не вижу. Саму форму надо привязывать к идентификатору и дополнить скрипт на привязку идентификатора в этом месте
if (response.success) {
Далее после устранения ошибки с капчей и привязки идентификатора вам нужно произвести тест и посмотреть консоль, возможно JS код не в том месте вызываете. console.log(); в помощь
Спасибо за ответ.
Сейчас капчу не видно потому что настраиваю еще два всплывающих окно.
И проблема появилась новая токен присваивается к первой форме
Та кнопка которая сверху в шапке позвонить мне.
Теперь надо как то присваиваться разные.
Сейчас капчу не видно потому что настраиваю еще два всплывающих окно.
И проблема появилась новая токен присваивается к первой форме
Та кнопка которая сверху в шапке позвонить мне.
Теперь надо как то присваиваться разные.
Верно, у вас один и тот же идентификатор 2 раза, а это не верно. Попробуйте этим формам назначить другой
id="token_2"
Сейчас попробую. Спасибо. В этом направление и тыкал сейчас.
Пытался сделать так, работало но вдруг перестало сейчас. Это вело после закрытия формы на главную страницу
if ($decoded_response && $decoded_response->success && $decoded_response->action == $captcha_action && $decoded_response->score > 0) {
$success = $decoded_response->success;
$email = $_POST['email'];
$phone = $_POST['phone'];
$tovar2 = $_POST['tovar2'];
$page_url = $_POST['page_url'];
$sait_url = $_POST['sait_url'];
mail("ostrovskijj@ya.ru","Запрос цены c $sait_url","На сайте был сделан запрос цены. \nEmail клиента: $email \nТелефон клиента: $phone \nТовар: $tovar2 \nСсылка: https://parkovkastop.ru$page_url"); // обрабатываем данные формы, которая защищена капчей
header('Location: https://parkovkastop.ru/');
} else {
// прописываем действие, если пользователь оказался ботом
}
Сталкивался с подобным, если на сайте больше 1 формы на одной стр., то присваивайте разные идентификаторы этим формам и проблем не будет (Плюс результаты кэшируются, не стоит об этом забывать — с первого раза может прокатить, но второй раз токен уже будет в кэшэ — Вызывайте ваш сниппет некэшируемым!)
Вроде везде поменял на action2 и token2
Не работает=(
Там где без двойки срабатывает
Не работает=(
Там где без двойки срабатывает
<?php
if (isset($_POST['token2']) && isset($_POST['action2'])) {
$captcha_token2 = $_POST['token2'];
$captcha_action2 = $_POST['action2'];
} else {
die('Капча работает некорректно. Обратитесь к администратору!');
}
$url = 'https://www.google.com/recaptcha/api/siteverify';
$params = [
'secret' => '6Ld0_PMUAAAAAJx_0aAO-a6ejlMak9FK7fpK5zhT',
'response' => $captcha_token2,
'remoteip' => $_SERVER['REMOTE_ADDR']
];
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $params);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$response = curl_exec($ch);
if(!empty($response)) $decoded_response = json_decode($response);
$success = false;
if ($decoded_response && $decoded_response->success && $decoded_response->action2 == $captcha_action2 && $decoded_response->score > 0) {
$success = $decoded_response->success;
$email = $_POST['email'];
$phone = $_POST['phone'];
$sait_url = $_POST['sait_url'];
mail("ostrovskijj@ya.ru","Запрос звонка c $sait_url","На сайте был сделан запрос на обратный звонок. \nEmail клиента: $email \nТелефон клиента: $phone"); // обрабатываем данные формы, которая защищена капчей
header('Location: ../');
} else {
// прописываем действие, если пользователь оказался ботом
}
а вот html<div class="popup2" style="display: none;">
<div class="popup_content">
<div class="popup_text">Заполните простую форму ниже для того чтобы мы с Вами связались</div>
<form action2="/_mzbi/popup_tovar3.php" method="POST" name="form_popup">
<input type="tel" placeholder="+7(999)999-99-99" name="phone" required>
<input type="email" placeholder="Введите Вашу почту" name="email" required>
<input type="hidden" name="token2" id="token2">
<input type="hidden" name="action2" id="action2">
<input type="hidden" name="page_url" value="<?= $_SERVER['REQUEST_URI'] ?>" />
<input type="hidden" name="sait_url" value="<?= $_SERVER['SERVER_NAME'] ?>" />
<input type="submit" class="popup_submit" value="Отправить">
</form>
<script>
let captcha_action2 = 'add_comment';
grecaptcha.ready(function() {
grecaptcha.execute('6Ld0_PMUAAAAANAXxh8tbfN_C_gicy-lTcnvVcV1', {action2: captcha_action2})
.then(function(token2) {
if (token2) {
document.getElementById('token2').value = token2;
document.getElementById('action2').value = captcha_action2;
}
});
});
</script>
Задайте формам идентификаторы и в JS на отправку перепишите
<script>
$(document).on('af_complete', function(event, response) {
if (form.attr('id') == 'callback') {
$('.popup').hide();
}
if (form.attr('id') == 'real_price') {
$('.popup').fadeOut();
}
});
</script>
<form id="callback" action2="/_mzbi/popup_tovar3.php" method="POST" name="form_popup">
Задайте формам идентификаторы и в JS на отправку перепишитеЭто к скрыванию окна или токена относится. Я самоучка. Пока только пытаюсь разбираться
Нашел вот такое в инете, для нескольких форм, но не помогает
<script>
let captcha_action = 'add_comment';
document.querySelectorAll('.token').forEach((element, index) => {
let action_name = captcha_action + '_' + index;
grecaptcha.ready(function() {
grecaptcha.execute('your_key', {action: action_name})
.then(function(token) {
if (token) {
element.value = token;
document.querySelectorAll('.action')[index].value = action_name
}
});
});
});
</script>
Ура я добился. У меня токкены меняются. Но теперь с первого обработчика там где двойки добавил, на почту письмо не уходит, страница просто перезагружается
Ура я добился. У меня токены меняются. Спасибо Василий
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.