• Formulário de Envio com Ajax

Objetivo
Envio mais rápido, validações em tempo real e usabilidade.

Descrição
Deve ocorrer uma alteração no arquivo de disparo de e-mails, acrescentando a informação de retorno de Sucesso ou Erro. Como será utilizado validação antes do envio, não é necessário inserir mensagem de erro, a validação irá ocorrer antes.

Observação: Para utilização dessa nova funcionalidade, foi criado um arquivo chamado envio.php, mantendo o arquivo tradicional para evitar erros aos sites antigos.

Estrutura
1- CSS
1.1 - É responsável para exibir a mensagem de envio com sucesso.

Código: Selecionar todos

<style type="text/css">

Código: Selecionar todos

/* Mensagens de Envio - Formulário */
.sucesso{
    border: 2px solid #009400;
    background: #B3FFB3;
    color: #555;
    font-weight: bold;
    padding-left: 3px;
}
</style>

2- Ajax
2.1- Responsável para disparo do e-mail. Pode ser chamado no próprio arquivo HTML onde está o formulário. Deve-se atentar ao nome do formulário (id), deve ser o mesmo nome das variáveis do código abaixo.

Código: Selecionar todos

<script type="text/javascript">
var $x = jQuery.noConflict();
$x(document).ready(function(){
 
$x("#faleConosco").submit(function(){
 
$x.ajax({
type: "POST",

url: https://sites.gedaim.com/envio.php",

Código: Selecionar todos

data: $x("#faleConosco").serialize(),
dataType: "json",
 
sucesso: function(msg){
$x("#formResposta").removeClass('error');
$x("#formResposta").addClass(msg.status);
$x("#formResposta").html(msg.message);
 
},
});
 
return false;
 
});
 
});
 
</script>
 
[b]3- HTML[/b]
3.1- Deve ser inserido no formulário, após o envio ele irá recuperar a reposta, exibir a mensagem de acordo com a formatação do CSS (Item 1).
 
[code]<div id="formResposta"></div>