1

Форма в модальном окне. После отправки формы форма закрывается и страница не реагирует, пока еще раз не произойдет событие щелчка мыши на кнопке вызова модального окна. Вот страница на сервере: http://craft.transkribator.ru/

<button class="btn btn-default btn-xl" data-toggle="modal" data-target="#myModal">Кнопка</button>


<div class="modal fade" id="myModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">                
            <h4 class="modal-title">Заполните форму</h4>
        </div>
        <div class="modal-body">
            <form role="form">
              <div class="form-group">
                  <label for="exampleInputEmail1">Ваша электронная почта</label>
                  <input type="email" class="form-control" name="email" placeholder="Введите email">
              </div>
              <div class="form-group">
                <label for="exampleInputPassword1">Имя</label>
                <input type="text" class="form-control" name="name" placeholder="Имя">
            </div>
            <div class="modal-footer">
              <button type="submit" class="btn btn-default">Записаться</button>
          </div>              
      </form>
  </div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->



$(function() {  
$("form").submit(function() { 
    var th = $(this);
    $.ajax({
        type: "POST",
        url: "mail.php", 
        data: th.serialize()
    }).done(function() {
            $("form").css('display','none');
            $(".modal-title").html("Ваши данные успешно отправлены");       
            $("#myModal").fadeOut(700);
    });
    return false;
});
});

2 ответа 2

1

Допишите в $('#myModal').modal('toggle') после $("#myModal").fadeOut(700), смотрите в документацию и используйте то, что вам нужно

1
  • Спасибо - все работает. Не нужно было путать мух с котлетами. $("form").submit(function(e) { console.log(e); e.preventDefault(); var th = $(this); $.ajax({ type: "POST", url: "mail.php", data: th.serialize() }).done(function() { $("form").css('display','none'); $(".modal-title").html("Ваши данные успешно отправлены").fadeOut(1000); setTimeout(function(){ $("#myModal").modal('hide'); }, 1000); });
    – Proshka
    19 мая 2017 в 8:00
1
return false;

Не проверял, но возможно ошибка в этом? Ты при обработке

$("form").submit(function() { ..........

Так понимаю этим действием пытаешься блокировать стандартное действие отправщика формы. Возможно, если ты поставишь перед

var th = $(this);

код

e.preventDefault(); 

а в функции .submit(function() передашь .submit(function(e) у тебя перестанет виснуть, ну и уберёшь если return false;

https://api.jquery.com/event.preventdefault/

8
  • если убрать return false, то срабатывает стандартное действие отправщика формы и JQuery не работает
    – Proshka
    19 мая 2017 в 6:01
  • e.preventDefault; должен убирать стандартное действие отправщика формы. каким браузером пользуешься? попробуй вывести в консоль переменную e. Она вообще у тебя выводится? Некоторые браузеры вместо неё поддерживают переменную event 19 мая 2017 в 6:03
  • common.js:4 m.Event {originalEvent: Event, type: "submit", timeStamp: 10947.965000000002, jQuery111102934004934217971: true, isDefaultPrevented: function…}
    – Proshka
    19 мая 2017 в 6:10
  • переменная выводится, браузер Chrome
    – Proshka
    19 мая 2017 в 6:25
  • попробуй обрабатывать не form.submit, а к примеру некий button.click, может поможет, всё тоже самое, только событие другое, точно также будешь форму сериализовать $('form').serialize() 19 мая 2017 в 6:37

Ваш ответ

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

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