Making delay with form-submit-redirecting

Question

I'm using Liveform service for emailing in my web. right now every time you submit It should alert with a message of fail or success.

While showing fail message works, showing the success message doesn't- since I get redirect before it has the chance to show up. So I need to somehow delay it.

this is my code:

$(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>

How can I make the server wait for some seconds until the alert shows up? As you can see using the timeout as I did didn't work.

thanks

Answer 1

Note that you are not actually doing the submit -- rather, you are simply catching that the form has been submitted. If you want to have a true success/failure status on that submit, then you may want to hijack the forms submission process, and substitute your own.

This is taken from a related question, but adapted to your use.

$("#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.
  });
});

Read more about jQuery.post() here. Also, a little more about deferred or about Promises. Javascript took some lessons from the way things were going with jQuery, and added a means of setting up an action that could take a delay of some indeterminate length -- often talking to a server.

Javascript gives us a Promise, which is much like placing an order at a diner. You put in your slip, then you wait to hear "Order UP!!". At that point, when your meal is ready, your waitress will bring you your food. If the order goes horribly wrong (massive run on bacon, say), the order will still complete, but with an error, at which point your waitress would come and tell you that.

$.post(...) uses Promises. So we can add a .success(...) handler for a completed Promise, and an .error(...) handler for when the Promise fails.

I truly recommend reading the MDN docs on Promises, and in particular, fetch(...).