Cachina’s Programming Blog


Envio de E-mail com Jquery e PHP

Posted in Dicas,JAVASCRIPT,PHP por Mayron Cachina em junho 1, 2009
Tags: , ,

Esse é um pequeno exemplo de como você pode integrar Ajax e PHP para enviar um e-mail.

Vamos comentar um pouco o código:

Contato.php

<div id="resposta"></div>
<div id="formulario">
<p><label for="nome" id="lbnome"><strong>Nome:</strong></label></p>
<p><input type="text" id="nome" name="nome" /></p>
<p><label for="email" id="lbemail"><strong>E-mail:</strong></label></p>
<p><input type="text" id="email" name="email" /></p>
<p><label for="mensagem" id="lbmensagem"><strong>Mensagem:</strong></label></p>
<p><textarea id="mensagem"></textarea></p>
<p><input type="button" alt="Enviar" id="submit" value="Enviar" /></p>
</div>


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#resposta").ajaxStart(function(){ jQuery(this).html("Mensagem sendo enviada, por favor aguarde..."); });
jQuery('#submit').click(function() {
var nome     = jQuery('#nome').val();
var email    = jQuery('#email').val();
var mensagem = jQuery('#mensagem').val();
jQuery.post('mail.php',
{ nome: nome, email: email, mensagem: mensagem, contato: true },
function(data, textStatus) {
jQuery('#resposta').html(data);
});
return false;
});
});
</script>

Explicação do código a cima:

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🙂

Para tudo funcionar deve-se primeiramente ter adicionado a biblioteca jquery.
<script type="text/javascript" src="jquery.js"></script>

A <div id=”resposta”> é muito importante. É nela que vai ser mostradas as informações que vão ser processadas do php.

A função:

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 mensagem = jQuery('#mensagem').val();

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

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

Envia o post ao arquivo mail.php

jQuery('#resposta').html(data);

retorna os dados em formato html para a div resposta. Por isso eu disse que ela é importante.

No arquivo mail.php nada mais é do que um script php com um tratamento de erros e uma validação com expressão regular de e-mail com envio.

Baixe o exemplo aqui ou veja uma demonstração.

8 Respostas to 'Envio de E-mail com Jquery e PHP'

Subscribe to comments with RSS ou TrackBack to 'Envio de E-mail com Jquery e PHP'.

  1. Triplo X said,

    Olá. Muito obrigado por este exemplo. Mas venho dizer que não apaga os dados após enviar o form. Eu faço o teste com “if(data==’resposta de sucesso’) { $(‘.editform’).remove(); }” mas não vai.

    Alguma sugestão?

    Obrigado.

    Att.


    • da uma olhada no que o ‘data’ ta retornando, se ele está so retornando sem html, pq se tiver html essa validação n vai da certo….

  2. tiago said,

    o que é contato: true


    • Caso você queira usar o código em uma mesma página por exemplo:
      no arquivo mail.php eu posso ter adicionar newsletter, envio de e-mail, cadastro de usuário…

      manipulando apenas o “contato: true”, pois ele será também uma variável do POST…
      com isso podemos fazer…

      ....
      jQuery.post('mail.php',
      { nome: nome, email: email, mensagem: mensagem, contato: true },....
      ...
      jQuery.post('mail.php',
      { nome: nome, email: email, mensagem: mensagem, cadastro: true },....

      e no mail, pode pegar assim:


      if($_POST['contato']){
      echo 'contato';
      }

      if($_POST['cadastro']){
      echo 'cadastro';
      }

      espero que não tenha sido confuso🙂

  3. Mauricio said,

    Eu consigo enviar imagens? Como que funcionaria?

  4. Fernando Guedes said,

    Sei que o tutorial é de 2009, mas foi útil em 2012, estou voltando aqui só para agradecer, muito obrigado por compartilhar!

    Abraços!


Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s


%d blogueiros gostam disto: