Envio de E-mail com Jquery e PHP

Categoria jQuery | 19/10/2009 | Autor - Adriano Meira

Neste artigo vou repassar como fazer o envio de formulários sem dar “Refresh” na página usando a biblioteca jQuery.

Antes de mais nada se não conhece a biblioteca acesse este link de de uma olhadinha tem um montão  de coisas legais lá, então vamos primeiro baixar a biblioteca de lá se quiser use a minha ta na versão completa clique aqui e baixe-a; em seguida coloque o código abaixo no head de sua página:

<script type="text/javascript" src="js/jquery.js"></script>

Ele chama a  biblioteca para sua página em seguida coloque este código abaixo:

jQuery(document).ready(function() {
    jQuery("#enviar").ajaxStart(function(){ jQuery(this).html("Enviando..."); });
    jQuery('#submit').click(function() {
       var nome     = jQuery('#nome').val();
       var email    = jQuery('#email').val();
       var assunto    = jQuery('#assunto').val();
       var mensagem = jQuery('#mensagem').val();
       jQuery.post('envia.php', { nome: nome, email: email, assunto: assunto, mensagem: mensagem, contato: true },
       function(data, textStatus) {
       jQuery('#enviar').html("Mensagem enviada com sucesso!");
   });
   return false;
 });
});

Bom sobre o código temos então:

Após isso criaremos o formulário para contato. Não é obrigatório colocar a tag <form> pois vamos pegar os valores pelo ID dos campos, por isso é importante sempre colocar os id´s no input

jQuery('#submit').click(function() {...

Nada mais é do que pegar o botão e executar um POST assincrono.

var nome = jQuery('#nome').val();
var email = jQuery('#email').val();
var assunto = jQuery('#assunto').val();
var mensagem = jQuery('#mensagem').val();

Pega os valores dos inputs (por isso tem que ter os ids)…

jQuery.post('mail.php',
{ nome: nome: nome, email: email, assunto: assunto, mensagem: mensagem, contato: true },
function(data, textStatus) {

Envia o post ao arquivo mail.php

jQuery('#enviar').html("Mensagem enviada com sucesso!");

retorna os dados em formato html no lugar dos dados do formulário

E então ao formulário:

<form action="" method="post" name="enviar" id="enviar" OnSubmit="return valida_envia()">
    <h4>Contato on-line:</h4>
    <label>Nome: </label>
    <input name="nome" id="nome" type="text" size="60" />
    <label>E-mail: </label> <input name="email" id="email" type="text" size="40" />
    <label>Assunto: </label> <input name="assunto" id="assunto" type="text" size="30" />
    <label>Mensagem: </label>
    <textarea name="mensagem" id="mensagem" rows="4"></textarea>
    <input type="submit" value="Enviar" id="submit" />
</form>

Volto a frisar que é importante que tenha os id nos campos principalmente no Botão de Enviar, pois é ele quem inicia a função do jQuery.

Isso pode ser interresante para você:

Tweet