templates/block/modal_callback.html.twig line 1

Open in your IDE?
  1. <script src="https://www.google.com/recaptcha/api.js?render={{ recaptcha_key }}"></script>
  2. <script>
  3. document.addEventListener('DOMContentLoaded', function () {
  4.     const form = document.getElementById('order-callback');
  5.     const formResult = document.getElementById('form-result');
  6.     // Проверяем, существует ли форма на странице, чтобы избежать ошибок
  7.     if (form) {
  8.         form.addEventListener('submit', function (e) {
  9.             alert('submit');
  10.             e.preventDefault();
  11.             
  12.             // 2. Получаем токен reCAPTCHA
  13.             grecaptcha.ready(function () {
  14.                 alert('g cap')
  15.                 grecaptcha.execute('{{ recaptcha_key }}', { action: 'callback_form' }).then(function (token) {
  16.                     
  17.                     // Добавляем токен в скрытое поле формы
  18.                     const recaptchaInput = form.querySelector('input[name="g-recaptcha-response"]');
  19.                     recaptchaInput.value = token;
  21.                     // 3. Отправляем данные формы с помощью AJAX (Fetch API)
  22.                     
  23.                     // Собираем все данные из формы
  24.                     const formData = new FormData(form);
  26.                     fetch(form.action, {
  27.                         method: form.method,
  28.                         body: formData
  29.                     })
  30.                     .then(response => response.json()) // Ожидаем от сервера ответ в формате JSON
  31.                     .then(data => {
  32.                         
  33.                     })
  34.                     .catch(error => {
  35.                         // Обработка сетевых ошибок
  36.                         console.error('Ошибка при отправке AJAX:', error);
  37.                         formResult.innerHTML = '<p style="color: red;">Произошла сетевая ошибка. Попробуйте позже.</p>';
  38.                     });
  39.                 });
  40.             });
  41.         });
  42.     }
  43. });
  44. </script>
  46. <div class="modal" id="modal_callback" tabindex="-1" role="dialog">
  47.     <div class="modal-dialog">
  48.         <div class="modal-content">
  49.             <div class="modal-header">
  50.                 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
  51.                             class="sr-only">Close</span></button>
  52.                 <div class="h4"><i class=" icon-mail-2"></i> {{ labels.get('modal-callback-1')|raw }} </div>
  53.             </div>
  54.             <div class="modal-body">
  55.                 <form id="order-callback" method="post" action="{{ path('callback') }}">
  56.                     <input type="hidden" name="code" value="" class="g-code" id="g-code">
  58.                     <div class="form-group" id="callback-form-name">
  59.                         <label for="recipient-name2" class="control-label">{{ labels.get('modal-callback-2')|raw }}</label>
  60.                         <input class="form-control" id="recipient-name2" placeholder="{{ labels.get('modal-callback-6')|raw }}"
  61.                                data-placement="top" data-trigger="manual"
  62.                                data-content="Must be at least 3 characters long, and must only contain letters."
  63.                                type="text" name="name">
  64.                     </div>
  65.                     <div class="form-group" id="callback-form-phone">
  66.                         <label for="recipient-Phone-Number2" class="control-label">{{ labels.get('modal-callback-3')|raw }}</label>
  67.                         <input type="text" maxlength="60" class="form-control" id="recipient-Phone-Number2" placeholder="{{ labels.get('modal-callback-7')|raw }}" name="phone">
  68.                     </div>
  69.                     <div class="form-group">
  70.                         <p class="pull-left text-danger hide" id="callback-form-error">&nbsp; {{ labels.get('modal-callback-4')|raw }} </p>
  71.                     </div>
  72.                 </form>                
  73.             </div>
  74.             <div class="modal-footer">
  75.                 <input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">
  76.                 <button type="button" class="btn btn-default" data-dismiss="modal" id="sendclose2">{{ labels.get('modal-callback-5')|raw }}</button>
  77.                 <input type="submit" class="btn btn-callback pull-right" id="sendcallback" value="{{ labels.get('modal-callback-8')|raw }}">
  78.             </div>
  79.         </div>
  80.     </div>
  81. </div>