-1

Что не так не могу понять. Форма работает через раз и не всегда до конца. Сообщения отправляются всё ок. Но бывает не появляется alert и редирект на страницу о завершении отправки. 1я форма

<form class="header__input-group" id="call-form">
                            <input name="name" class="form-control header__input" type="text" placeholder="Имя" required="required">
                            <input name="phone" class="form-control header__input" id="phone" type="text" placeholder="Телефон" required="required">
                            <input type="submit" class="btn btn-default form-btn" value="Записаться"></input>
</form>

2я форма

<form class="" id="call-form2">
                <input name="name" class="form-control input-popup" type="text" placeholder="Имя" required="required">
                <input name="phone" class="form-control input-popup" id="phone2" type="text" placeholder="Телефон" required="required">
                <input type="submit" class="btn btn-default" value="Записаться"></input>
</form>

Обработка AJAX

$(document).ready(function(){
    $("#call-form, #call-form2").submit(function() { //устанавливаем событие отправки для формы с id=form
    var form_data = $(this).serialize(); //собераем все данные из формы
        $.ajax({
        type: "POST", //Метод отправки
        url: "mail.php", //путь до php фаила отправителя
        data: form_data,
        success: function() {
            //код в этом блоке выполняется при успешной отправке сообщения
            alert("Ваше сообщение отправлено!");
            window.location = "success.php";
            }

        });
    });
});
1
  • Добрый вечер. А может причина не в html и js, а на сервере, в mail.php. Проверьте там ошибки.
    – user216615
    3 апр 2018 в 18:20

2 ответа 2

3

Вы не отменяете стандартную отправку формы. Из-за этого возникает race condition между запросом ajax и запросом формы. Какой из них вернется на клиент раньше - предсказать нельзя. Этим и объясняется наблюдаемое поведение "работает через раз и не всегда до конца".

$(document).ready(function(){
    $("#call-form, #call-form2").submit(function() { //устанавливаем событие отправки для формы с id=form
        var form_data = $(this).serialize(); //собираем все данные из формы
        $.ajax({
          type: "POST", //Метод отправки
          url: "mail.php", //путь до php фаила отправителя
          data: form_data,
          success: function() {
            //код в этом блоке выполняется при успешной отправке сообщения
            alert("Ваше сообщение отправлено!");
            window.location = "success.php";
          }
        });

        return false; // !!!
    });
});
0

Чтобы не срабатывал subimt

   $("#call-form, #call-form2").submit(function(e)
    --skip code--
    //вместо return false
     e.preventDefault();

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.