Ajax форма обратной связи ломает поиск по сайту

[frost68]

Здравствуйте, вот код js формы:

$(document).ready(function () {
    $("form").submit(function () {
       
        var formID = $(this).attr('id');

        
        var formNm = $('#' + formID);
        $.ajax({
            type: "POST",
            url: 'modalform/mail.php',
            data: formNm.serialize(),
            success: function (data) {
              
              $('.msgs').html(data);
              $('.formTitle').css("display","none");
              $(formNm).css("display","none");
              setTimeout(function(){
                $(formNm).css("display","block");
                $('.formTitle').css("display","block");
                $('.msgs').html('');
                $('input').not(':input[type=submit], :input[type=hidden]').val('');
              }, 3000);
            },
            error: function (jqXHR, text, error) {
               
                $('.msgs').html(error);
                $('.formTitle').css("display","none");
                $(formNm).css("display","none");
                setTimeout(function(){
                  $(formNm).css("display","block");
                  $('.formTitle').css("display","block");
                  $('.msgs').html('');
                  $('input').not(':input[type=submit], :input[type=hidden]').val('');
                }, 3000);
            }
        });
        return false;
    });
    
      var $input = $('.form-fieldset > input');
      $input.blur(function (e) {
        $(this).toggleClass('filled', !!$(this).val());
      });
});

Вот сама форма:

<div class="remodal" data-remodal-id="firstModal" data-remodal-options="hashTracking: false,closeOnConfirm: false">
     
  <button data-remodal-action="close" class="remodal-close"></button>
  <div class="formArea">
    <p class="formTitle">Запись через сайт является предварительной. Наш сотрудник свяжется с Вами для подтверждения записи к специалисту.<br/>Поля помеченные <span style="color:red;">*</span> обязательны для заполнения.</p>
    <p class="msgs"></p>
    <form id="firstForm" class="form" autocomplete="off">
      <fieldset class="form-fieldset ui-input __first">
    <label for="username">
          <span data-text="Введите ваше Ф.И.О.:">Введите ваше Ф.И.О.<span style="color:red;">*</span>:</span>
        </label>        
<input name="uname" type="text" id="username" required="required" placeholder="Введите ваше Ф.И.О." tabindex="0" />
    
      </fieldset>
 <fieldset class="form-fieldset ui-input __first">
<label for="userphone">
          <span data-text="Введите ваш телефон*:">Введите ваш телефон<span style="color:red;">*</span>:</span>
        </label>        
<input name="uphone" type="tel" class="plugin__input plugin__input_jmp" required="required" placeholder="+7" maxlength="16" id="userphone" tabindex="0" />
      </fieldset>
 <fieldset class="form-fieldset ui-input __first">
<label for="staff">
          <span data-text="Специалист:">Специалист:</span>
        </label>        
<input name="ustaff" type="text" class="staff" id="userstaff" tabindex="0" value="" readonly="readonly"/>
      </fieldset>
     <fieldset class="form-fieldset ui-input __first">
<label for="email">
          <span data-text="Комментарии:">Комментарии:</span>
        </label>
<textarea name="uemail" id="email" tabindex="0" placeholder="Комментарии">
</textarea>
      </fieldset>
      <input name="formInfo" class="formInfo" type="hidden" value="Новая запись к врачу"/>
      <!-- DIV - в котором выводится блок с recaptcha -->
      <div class="g-recaptcha" data-sitekey="6Lem2bgUAAAAAOX74cFg_9nCwhQIGmaVe3kySNPY" data-theme="light"></div>
      <div class="form-footer">
        <input type="submit" class="formBtn" value="Отправить заявку" />
<label class="custom-control-label" for="customCheck">Нажимая кнопку, я принимаю условия <a href="/page/politika_konfidencialnosti.html">Пользовательского соглашения</a> и даю своё согласие на обработку моих персональных данных, в соответствии с Федеральным законом от 27.07.2006 года 152-ФЗ «О персональных данных».</label>
      </div>
     
    </form>
  </div>
</div>

а вот поиск:

<div class="form-group">
                            <form id="search_form" action="/search/" role="search" method="post" class="footer-search-form">
                                <input class="form-search-footer form-control input-lg" name="words" maxlength="50"  placeholder="{Поиск}..." required="" type="search" data-trigger="manual" data-container="body" data-toggle="popover" data-placement="bottom" data-html="true"  data-content="">
                                <button class="footer-search-button" type="submit">
                                    <i class="fa fa-search" aria-hidden="true"></i>
                                </button>
                            </form>
                        </div>

При попытке запустить поиск по сайту, поле поиска пропадает на 3 секунды и ничего не происходит, при этом форма работает корректно, Помогите пожалуйста разобраться.

[laimas]

$("form").submit(function... - это объявление обработчика для всех форм, включая и форму поиска, а это modalform/mail.php обработчик чего?

А это

var formID = $(this).attr('id');
var formNm = $('#' + formID);

как понять?

[frost68]

$("form").submit(function... - это объявление обработчика для всех форм, включая и форму поиска, а это modalform/mail.php обработчик чего?

Это обработчик почты, вот код

<?php
error_reporting(0);
require_once __DIR__ . '/recaptchalib.php';
// Введите свой секретный ключ
$secret = "";
// пустой ответ каптчи
$response = null;
// Проверка вашего секретного ключа
$reCaptcha = new ReCaptcha($secret);
if ($_POST["g-recaptcha-response"]) {
$response = $reCaptcha->verifyResponse(
        $_SERVER["REMOTE_ADDR"],
        $_POST["g-recaptcha-response"]
    );
}

if ($_SERVER["REQUEST_METHOD"] == "POST") {
  if (empty($_POST['uname']) && (empty($_POST['uphone']))){
    echo '<p class="fail">Ошибка. Вы заполнили не все обязательные поля!</p>';
  } else {
    if ($response != null && $response->success) {
    if (isset($_POST['uname'])) {
      $uname = strip_tags($_POST['uname']);
      $unameFieldset = "<b>Ф.И.О.:</b>";
    }
    if (isset($_POST['uemail'])) {
      $uemail = strip_tags($_POST['uemail']);
      $uemailFieldset = "<b>Комментарий:</b>";
    }
    if (isset($_POST['uphone'])) {
      $uphone = strip_tags($_POST['uphone']);
      $uphoneFieldset = "<b>Телефон:</b>";
    }
     if (isset($_POST['formInfo'])) {
      $formInfo = strip_tags($_POST['formInfo']);
      $formInfoFieldset = "<b>Запись к специалисту:</b>";
    }
    if (isset($_POST['ustaff'])) {
      $ustaff = strip_tags($_POST['ustaff']);
      $ustaffFieldset = "<b>Специалист:</b>";
    }

    $to = ""; /*Укажите адрес, на который должно приходить письмо*/
    $sendfrom = ""; /*Укажите адрес, с которого будет приходить письмо, можно не настоящий, нужно для формирования заголовка письма*/
    $headers  = "From: " . strip_tags($sendfrom) . "\r\n";
    $headers .= "Reply-To: ". strip_tags($sendfrom) . "\r\n";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html;charset=utf-8 \r\n";
    $headers .= "Content-Transfer-Encoding: 8bit \r\n";
    $subject = "$formInfo: $ustaff";
    $message = "$unameFieldset $uname<br>
                $uphoneFieldset $uphone<br>
                $ustaffFieldset $ustaff<br>
                $uemailFieldset $uemail";

    $send = mail ($to, $subject, $message, $headers);
        if ($send == 'true') {
            echo '<p class="success">Спасибо за отправку вашего сообщения!</p>';
        } else {
          echo '<p class="fail"><b>Ошибка. Сообщение не отправлено!</b></p>';
        }
    } else {
      echo '<p class="success">Не пройдена каптча! Попробуйте еще раз!</p>';
    }
  }
} else {
  header ("Location: http:///"); // главная страница вашего лендинга
}

[laimas]

Это обработчик почты

А каким боком к почте имеет отношение поиск?

[frost68]

Значит мне нужно как то заставить его не трогать поиск? Или обрабатывать только форму?

[frost68]

я так думаю это из-за того что в форме связи и поиск работают через form

[laimas]

Значит мне нужно как то заставить его не трогать поиск?

Вам надо исключить бардак к вашем коде. К примеру, есть две формы, которые вы хотите отправить на сервер одним обработчиком, при этом серверные обработчики имеют разные адреса. Сделать это не сложно, так как и у вас, повесив обработчик на селектор "form". Если формы в action будут хранить эти адреса, то их передать в $.ajax не сложно, вот так: url: this.action.

Но ведь и ответ будет принимать тот же обработчик, а на каждый запрос (отправление формы) будет свой ответ сервера. А значит функция success должна знать либо какая форма стала источником запроса, либо по признаку в ответе севера понять что за ответ пришел и что с ним делать.

А у вас какой-то бардак с ID, и валится все по одному адресу.

[frost68]

id у форм разные, type тоже, подскажите пожалуйста как сделать чтобы обработчик из темы работал только с формой у которой id="firstform".Я неопытный в этом вопросе

[laimas]

id у форм разные

А нафига они вообще нужны? Вы логику того что у вас с ними написано понимаете или нет?

var formID = $(this).attr('id'); - this, это форма источник, то есть так которая отправляется и проще так this.id. А значит $('#' + formID) это тоже самое что и $(this). К чему это бесполезная писанина?

А далее вы отсылаете запросы от всех своих форм на один адрес. И о каком типе разном речь, методе, так он у вас жестко указан type: "POST".

У вас много ошибок как на клиенте, так и на сервере. К примеру, вот это пустяк if(empty($_POST['uname']) ..., но баг весьма неприятный, так как достаточно передать на сервер просто один пробел, и поле будет считаться не пустым.

Если вам сложно разобраться, то сделайте два разных обработчика, то есть не $("form").submit(function ..., а $("ID формы связи").submit(function () ... и $("ID формы поиска").submit(function () ... где и действуйте согласно задачам. Вот только нужно отменять действие по умолчанию (отправление формы естественным образом) таким образом в обработчиках:

....submit(function (e) {
e.prevetDefault();
....

PS. Пропустил return false;, это тоже самое что e.prevetDefault();, так что тут все норм.

[laimas]

Если же форма поиска отправляется не AJAX, то у вас будет всего один обработчик для формы связи как $("ID формы связи").submit(function (e) ... и мешать форме поиска он не будет. В обработчике форма как JQ объект это $(this), а "магию" с ID из кода выбросить.