Выполнение скрипта ajax

205

07 августа 2018, 15:40

Есть скрипт, нужно при его выполнении выводилось сообщение "Заявка отправлена"и модальное окно закрывалось.Скрипт работает а вот сообщение не выводится.

Почему то у меня не все работает верно, подправьте код пожалуйста.

 <script>
$(function(){
  'use strict';
$('#form').on('submit', function(e){
    e.preventDefault();
    var fd = new FormData( this );
    $.ajax({
      url: 'send.php',
      type: 'POST',
      contentType: false, 
      processData: false, 
      data: fd,
      success: function(msg){
if(msg == 'ok') {
  $(".button").val("Отправлено"); 
} else {
        $(".button").val("Ошибка");
        setTimeout(function() {$(".button").val("Отправить");}, 3000);
}
      }
    });
  });
});
</script>

Модальное окно

<div id="openModal" class="modalDialog">
  <div>
    <a href="#close" title="Закрыть" class="close">x</a>
    <h2>Заявка онлайн</h2>
    <form enctype="multipart/form-data" method="post" id="form">
  <p>Имя</p>
  <input placeholder="Владимир Владимирович" name="name" type="text" >
  <p>Телефон</p>
  <input placeholder="+7 777 77 77 777" name="number" type="text" >
  <p>Email</p>
  <input placeholder="example@mail.com" name="email" type="text" >
  <p><input value="Отправить" type="submit"></p>
</form>
  </div>
</div>

Answer 1

success: function(msg){
  alert("SUCCESS! Look in browser console.");
  console.log("SUCCESS: ", msg);
  if (msg == 'ok') {
    $("#form input[type='submit']").val("Отправлено"); 
  } else {
    $("#form input[type='submit']").val("Ошибка");
    setTimeout(function() { $("#form input[type='submit']").val("Отправить"); }, 3000);
  }
},
error: function (rqst) {
  alert("ERROR! Look in browser console.");
  console.log("ERROR: ", rqst);
}

Answer 2

Во первых. Ваш обработчик на событие on submit следует вызывать при открытии самого модального окна, т.е. на событие after open или on open. После, ваш скрипт надо в функцию обернуть (ну, или можете не оборачивать, закиньте ваш скрипт в функцию после события after open или on open) и заменить этот кусок кода:

$('#form').on('submit', function(e){

на это:

$( document ).on( 'submit', '#form', function(e){

и тут

if(msg == 'ok') {
  $(".button").val("Отправлено"); 
} else {
        $(".button").val("Ошибка");
        setTimeout(function() {$(".button").val("Отправить");}, 3000);
}

замените на код о котором писали выше

if (msg == 'ok') {
    $("#form input[type='submit']").val("Отправлено"); 
  } else {
    $("#form input[type='submit']").val("Ошибка");
    setTimeout(function() { $("#form input[type='submit']").val("Отправить"); }, 3000);
  }