Element update with Jquery with return from another script

Question

I have a formulário de e-mail simples, and when you click "Send" the "status" appears next to the button, for example:

Enquanto envia, appears "Sending..." (this is already working)

The problema is as follows: My form is in the "index", and the action do form is in another file "email.php".

How do I make for the JQuery receive the retorno of "email.php" and know if the email was sent or not, in order to update the "status"

On the index:

<script type="text/javascript">
        $(document).ready(function(){
            $('#email').submit(function() {
                $('#emlst').text('Enviando...');
                //if do retorno
            });
        });
    </script>

Answer 1

I don’t know if I understand you very well, but if I did, your email code is in another file, right? (That’s what I understood with the action do form).

If it’s really that, it’s simple, let’s pretend you’re using PHP for sending the email.

$.ajax({
   type: 'POST',
   url: 'SEU ARQUIVO',
   data: $('#form').serialize(),
   dataType: 'json',
   beforeSend: function(){
       $('.msg').text('Enviando...')
   },
   success: function(data){
      $('.msg').text(data.msg)
   }
})

With this, we would already be sent the data to the form, besides changing the message, now let’s see how the file would look PHP

<?php
   $retorno = array();

   // aqui vai todo o seu codigo de envio de email
   if($mail){
       $retorno['msg'] = 'Email enviado com sucesso';
   }else{
       $retorno['msg'] = 'Erro ao enviar email';
   }

   die(json_encode($retorno));

Answer 2

This is an email sending by ajax/jquery, see if you can understand, it is very simple, this commented in the important lines:

$(function() {
   $('#email').submit(function(ev) {
      ev.preventDefault(); //cancela a troca de página

      var formData = $('#email').serialize(); //Serializa o form em um post

      $('.btn-enviar').attr('disabled','disabled').css('cursor', 'wait'); //desativa o botão para não ficarem clicando
      $('#emlst').text('Enviando...'); //Altera a msg de envio

      $.ajax({
         type: 'POST',
         url: $('#email').attr('action'), //pega o link de action
         data: formData
      })
      .done(function(response) {
         var result = JSON.parse(response);

         $('#email')[0].reset(); //reseta o formulario
         $('.btn-enviar').removeAttr('disabled','disabled').css('cursor', 'pointer'); //retorna o botão para clicar

         $('#emlst').text('E-mail Enviado'); //Altera a msg caso enviado
      })
      .fail(function(data) {
         $('#emlst').text('Erro');
         $('.btn-enviar').removeAttr('disabled','disabled').css('cursor', 'pointer');
      });
   });
});