Помощь с всплывающим окном -закрытие после отправки данных

Всем привет. Помогите пожалуйста с формой. Есть форма на сайте

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

Код 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
  });
	
});
Vladislav
07 мая 2020, 22:22
modx.pro
58
0

Комментарии: 12

R2m0x94 (Vasily)
08 мая 2020, 00:28
+1
Перед формой в консоле у вас ошибка связанная с капчей, на сайте капчу не вижу. Саму форму надо привязывать к идентификатору и дополнить скрипт на привязку идентификатора в этом месте
if (response.success) {
Далее после устранения ошибки с капчей и привязки идентификатора вам нужно произвести тест и посмотреть консоль, возможно JS код не в том месте вызываете. console.log(); в помощь
    Vladislav
    08 мая 2020, 00:35
    0
    Спасибо за ответ.
    Сейчас капчу не видно потому что настраиваю еще два всплывающих окно.
    И проблема появилась новая токен присваивается к первой форме
    Та кнопка которая сверху в шапке позвонить мне.

    Теперь надо как то присваиваться разные.
      R2m0x94 (Vasily)
      08 мая 2020, 00:38
      0
      Верно, у вас один и тот же идентификатор 2 раза, а это не верно. Попробуйте этим формам назначить другой
      id="token_2"
        Vladislav
        08 мая 2020, 00:41
        0
        Сейчас попробую. Спасибо. В этом направление и тыкал сейчас.
      Vladislav
      08 мая 2020, 00:40
      0
      Пытался сделать так, работало но вдруг перестало сейчас. Это вело после закрытия формы на главную страницу
      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 {
          // прописываем действие, если пользователь оказался ботом
      }
        R2m0x94 (Vasily)
        08 мая 2020, 00:43
        0
        Сталкивался с подобным, если на сайте больше 1 формы на одной стр., то присваивайте разные идентификаторы этим формам и проблем не будет (Плюс результаты кэшируются, не стоит об этом забывать — с первого раза может прокатить, но второй раз токен уже будет в кэшэ — Вызывайте ваш сниппет некэшируемым!)
          Vladislav
          08 мая 2020, 00:57
          0
          Вроде везде поменял на 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>
            R2m0x94 (Vasily)
            08 мая 2020, 01:09
            +1
            Задайте формам идентификаторы и в 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">
              Vladislav
              08 мая 2020, 01:19
              0
              Задайте формам идентификаторы и в JS на отправку перепишите
              Это к скрыванию окна или токена относится. Я самоучка. Пока только пытаюсь разбираться
                Vladislav
                08 мая 2020, 01:23
                0
                Нашел вот такое в инете, для нескольких форм, но не помогает
                <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>
        Vladislav
        08 мая 2020, 01:58
        0
        Ура я добился. У меня токкены меняются. Но теперь с первого обработчика там где двойки добавил, на почту письмо не уходит, страница просто перезагружается
          Vladislav
          08 мая 2020, 02:15
          0
          Ура я добился. У меня токены меняются. Спасибо Василий
          Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
          12