Задержка с перенаправлением формы

Question

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

При отображении сообщения об ошибке работает, сообщение об успехе не работает, так как я получаю перенаправление до того, как у него появится шанс появиться.Поэтому мне нужно как-то отложить это.

это мой код:

$(document).ready(function() {
  $('#emailError').removeClass('active');
  $('#contact-form').submit(function(e) {
    var email = $('#email').val();
    console.log(email);
    var message = $('#message').val();
    console.log(message);

    if (!email || !message) {
      alertify.error('Please enter an email and a message');
      e.preventDefault();
      return;
    }
    // REDIRECT IN THIS POINT- > HOW TO DELAY HERE?
    setTimeout(function() {
      alertify.success('SENT SUCCESSFULLY!');
    }, 3000);
  });
});

<form action="https://liveformhq.com/form/911331a2-0d5e-4fbf-abb0-******" method="POST"
              accept-charset="utf-8" id="contact-form">
              <input type="email" placeholder="Email..." id="email" name="email" />
              <textarea rows="4" cols="50" placeholder="Message..." id="message" name="message"></textarea>
              <div class="actions"><button type="submit">Send</button></div>
            </form>

Как заставить сервер подождать несколько секунд, пока не появится предупреждение?Как вы можете видеть, использование таймаута не помогло.

спасибо

Answer 1

Обратите внимание, что вы на самом деле не делаете отправку - вы просто замечаете, что форма была отправлена.Если вы хотите иметь истинный статус успеха / неудачи в этой отправке, вы можете перехватить процесс отправки форм и заменить свой собственный.

Это взято из соответствующего вопроса , но адаптированный для вашего использования.

$("#myform").submit(function(event) {
  // Hijack the form submit. We want to control this ourselves.
  event.preventDefault();

  // get the form field values
  var email = $('#email').val(),
      message = $('#message').val();

  // Do we have both an email and message? If not, alert and stop.
  if(!email.length>0 && !message.length>0){ 
    alertify.error("Please enter an email and message.");
    return false;
  }

  // I like to use defers :)
  // submit our post data, and include the form values as the POST body
  deferred = $.post("http://somewhere.com", { email: email, message: message });

  // Having hijacked the POST process, we have the success callbacks
  deferred.success(function () {
    alertify.success('SENT SUCCESSFULLY!');
  });

  // also, if the POST failed, we can notify the user of that.
  deferred.error(function () {
    // Handle any errors here.
  });
});

Подробнее о jQuery.post () здесь.Кроме того, немного больше об отсрочке или об обещаниях.Javascript извлек некоторые уроки из того, как обстоят дела с jQuery, и добавил средство для настройки действия, которое может занимать некоторую неопределенную задержку - часто общаясь с сервером.

Javascript дает нам Обещание, которое очень похоже на размещение заказа в закусочной.Вы кладете в свою квитанцию, затем ждете, чтобы услышать «Order UP !!».В этот момент, когда ваша еда готова, ваша официантка принесет вам еду.Если заказ идет ужасно неправильно (скажем, массовый запуск на беконе), заказ все равно будет выполнен, но с ошибкой, и в этот момент придет ваша официантка и сообщит вам об этом.

$. Post (...) использует обещания.Таким образом, мы можем добавить обработчик .success (...) для завершенного Promise и обработчик .error (...) для сбоя Promise.

Я действительно рекомендую прочитать документы MDN по Promises,и, в частности, fetch (...).