0

Tenho um formulário incluído dentro de uma modal window. A minha dúvida é como deve ser feito para aparecer uma mensagem de envio concluído dentro da modal window após o formulário ser enviado, todo este processo precisaria ser feito tudo dentro da mesma página, sem atualizar a página.

Todo o código: CSS, HTML e Jquery está no codepen: http://codepen.io/flashpremium/pen/KpzqoJ/

Código php do formulário

header('Content-Type: text/html; charset=utf-8');

           // from the form
           $name = trim(strip_tags($_POST['nome']));
           $email = trim(strip_tags($_POST['email']));
           $assunto = htmlentities($_POST['assunto']);
           $mensagem = htmlentities($_POST['mensagem']);


           // set here
           $subject = "Nova mensagem no formulário";
           $to = '[email protected]';
           $body = <<<HTML
    <table bgcolor="#EEEEEE" align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="font-family: arial; border: 1px solid #f4f4f4; border-radius: 5px;">
     <tr>
      <td bgcolor="#fff" style="text-align: left; padding: 10px; margin: 5px 5px 5px 5px; color: #222; font-weight: bold; border: 1px solid #f4f4f4; font-weight: 100; font-size: 14px;">
     Dados
      </td>
       <td bgcolor="#fff" style="text-align: left; padding: 10px; margin: 5px 5px 5px 5px; color: #222; font-weight: 100; border: 1px solid #f4f4f4; font-size: 14px;">
     Mensagem
      </td>
     </tr>
     <tr>
      <td bgcolor="#fff" style="padding: 10px;border: 1px solid #f4f4f4;color: #33b0f7; font-size: 14px;">
        Nome
        <td bgcolor="#fff" style="text-align: left; padding-left: 5px;border: 1px solid #f4f4f4; font-size: 14px;">$name</td>
     </tr>
        <tr>
         <td bgcolor="#fff" style="padding: 10px;border: 1px solid #f4f4f4;border: 1px solid #f4f4f4; color: #33b0f7; font-size: 14px;">
             E-mail
             <td bgcolor="#fff" style="text-align: left; padding-left: 5px;border: 1px solid #f4f4f4; font-size: 14px;">$email</td>
           </td> 
       </tr>
           <tr>
            </tr>
        <tr>
         <td bgcolor="#fff" style="padding: 10px;border: 1px solid #f4f4f4; font-size: 14px;">
        Mensagem:
        <td bgcolor="#fff" style="text-align: left; padding: 5px; height: 400px;border: 1px solid #f4f4f4; font-size: 14px;">$message</td>
      </td>
       </tr>
     </tr>
    </table>
    HTML;

           $headers = "From: $email\r\n";
           $headers .= "Content-type: text/html\r\n";
           // send the email
           mail($to, $subject, $body, $headers);

           // redirect afterwords, if needed
           header('Location: enviado');

2 Respostas 2

2

Ajax faz exatamente isso, ele vai enviar o formulário para o PHP sem nenhum refresh.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery('#ajax_form').submit(function(){
        var dados = jQuery( this ).serialize();

        jQuery.ajax({
            type: "POST",
            url: "processa.php",
            data: dados,
            success: function( data )
            {
                alert( data );
            }
        });

        return false;
    });
});
</script>
1
  • Obrigado pela resposta! Estou com dúvidas de como devera fazer para colocar a mensagem de sucesso no envio dentro de uma div que somente deve aparecer após o e-mail ser enviado.
    – the flash
    26/07/2015 às 16:37
0

Em cima do exemplo do lai0n, consegui algo que estava procurando, que provavelmente também está mais próximo do que você quer fazer. Modifiquei a function para inserir a mensagem de envio em uma div e retirei a função 'alert'.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery('#ajax_form').submit(function(){
        var dados = jQuery( this ).serialize();

        jQuery.ajax({
            type: "POST",
            url: "newsletter-form.php",
            data: dados,
            success: function envio()
            {
            var cont = "Email enviado com sucesso";
            document.getElementById("msg").innerHTML = cont;
            }
        });

        return false;
    });
});
</script>

e dentro do body:

    <div id="msg"></div>

O legal é que você pode estilizar a div no css e deixar com aquele fundo verde típico de mensagens de sucesso.

Obs.: Peço desculpas ao Ricardo pela gafe, acabei de me inscrever e ainda estou me adaptando às regras do site.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .