За последние 24 часа нас посетили 17103 программиста и 1437 роботов. Сейчас ищут 1522 программиста ...

Форма "Обратная связь"

Тема в разделе "JavaScript и AJAX", создана пользователем zulfukar, 5 ноя 2020.

  1. zulfukar

    zulfukar Новичок

    С нами с:
    5 ноя 2020
    Сообщения:
    1
    Симпатии:
    0
    Установил на сайт скрипт Обратной связи (использую как Задать вопрос), все работает, но при отправке не проверяет 2 поля <select> (выбрано в них что-то или нет).
    И еще нужно прикрутить какую-нибудь капчу, чтобы спамеры не доставали.
    Сам не смог справиться с этим, знаний не хватает. Помогите пожалуйста.
    Заранее благодарю.

    P.S в скрипте есть код для возможности отправления файла. Оно мне не нужно, но я не разобрался как его удалить, поэтому я просто вырезал хтмл код из формы, чтобы его не было видно на сайте. Было бы неплохо удалить этот, лишний для меня код.

    Код (Text):
    1. <div class="sub-title comadd"><h3>Задать вопрос!</h3></div>
    2.         <div style="color: #f00;" id="result"></div>
    3.         <img src="/feedback/ajax-loader.gif" id="load-indicator" alt="loading" style="position:absolute; z-index:1000; display:none;" />
    4. <form method="post" action="/feedback/mails_sender.php" id="feedback" name="feedback" enctype="multipart/form-data">
    5.     <div class="comment">
    6.                 <fieldset>
    7.                         <select name="sex">
    8.                             <option>Выберите Ваш пол *</option>
    9.                             <option value="Мужчина">Мужчина</option>
    10.                             <option value="Женщина">Женщина</option>
    11.                         </select>
    12.                 </fieldset>
    13.                 <fieldset>
    14.                         <input name="youremail" type="text" placeholder="Эл. @ почта *" size="20" />
    15.                 </fieldset>
    16.                 <fieldset>
    17.                         <select name="option">
    18.                             <option>Выберите сотрудника *</option>
    19.                             <option value="Сергей">Сергей</option>
    20.                             <option value="Иван">Иван</option>
    21.                             <option value="Николай">Николай</option>
    22.                             <option value="Антон">Антон</option>
    23.                             <option value="Виктор">Виктор</option>
    24.                         </select>
    25.                 </fieldset>
    26.                 <fieldset>
    27.                         <textarea name="message" id="sendtext" placeholder="Текст сообщения *" style="resize: vertical; width: 98%; height: 130px; display: block;" cols="40" rows="5"></textarea>
    28.                 </fieldset>
    29.     </div>
    30. <table><tr><td style="padding-right:20px;">            
    31.     <div class="send">
    32.         <input name="to" type="hidden" value="send" />
    33.         <button type="submit" class="sub">Отправить</button>
    34.     </div>
    35. </td><td>
    36.         <input name="to" type="hidden" value="Очистить" />
    37.         <button type="reset" class="sub">Очистить</button>
    38. </td></tr>
    39. </table>
    40. </form>
    41.         <script>
    42.             // этот участок кода нужен только для отображения гифки
    43.             // которая даёт пользователю понять, что что-то происходит
    44.             // и нужно подождать
    45.             $(document).ready(function () {
    46.                 $(document).ajaxStart(function () {
    47.                     // найдем элемент с изображением загрузки и уберем невидимость:
    48.                     var imgObj = $("#load-indicator");
    49.                     imgObj.show();
    50.                     // вычислим в какие координаты нужно поместить изображение загрузки,
    51.                     // чтобы оно оказалось в серидине страницы:
    52.                     var centerY = $(window).scrollTop() + ($(window).height() + imgObj.height()) / 2;
    53.                     var centerX = $(window).scrollLeft() + ($(window).width() + imgObj.width()) / 2;
    54.                     imgObj.offset({
    55.                         left: centerX,
    56.                         top: centerY
    57.                     });
    58.                 });
    59.                 //скрываем изображение после окончания AJAX-запроса
    60.                 $(document).ajaxStop(function () {
    61.                     $("#load-indicator").hide();
    62.                 });
    63.             });
    64.             // назначаем действие на такое событие как отправка формы
    65.             $("#feedback").submit(function (evtObj) {
    66.                 evtObj.preventDefault();
    67.                 // Если элемент формы fileforsending содержит значения (т.е. выбран файл для отправки),
    68.                 // то вместо AJAX-запроса используем FormData()
    69.                 // поскольку файлы через AJAX-запросы не передаются            
    70.                  {
    71.                     var form = $(this);
    72.                     $.ajax({
    73.                         // Здесь файл, который обрабатывает полученные от пользователя данные и отправляет почту
    74.                         url: "/feedback/mails_sender.php",
    75.                         type: "POST",
    76.                         data: form.serialize(),
    77.                         // Действия в случае успешной отправки AJAX-запроса (а не письма!)
    78.                         // Здесь data - полученное от mails_sender.php сообщение
    79.                         success: function (data) {
    80.                             if (data === "Отправлено письмо без вложений.") {
    81.                                 $("#result").html("Отправлено письмо без вложений.");
    82.                                 // Письмо отправлено, сбрасываем данные формы
    83.                                 document.getElementById("feedback").reset();
    84.                                 // Следующая строка после успешной отправки сообщения
    85.                                 // перенаправляет пользователь на любую страницу/сайт
    86.                                 // достаточно раскомментировать её и поменять адрес сайта webware.biz
    87.                                 // на ваш собственный
    88.                                 // document.location.href = "http://";
    89.                             } else {
    90.                                 $("#result").html(data);
    91.                             }
    92.                         },
    93.                         error: function (data) {
    94.                             $("#result").html("Результат выполнения: " + data);
    95.                         }
    96.                     });
    97.                 }
    98.             });
    99.         </script>
    файл mails_sender.php во вложении
     

    Вложения:

    #1 zulfukar, 5 ноя 2020
    Последнее редактирование: 5 ноя 2020