Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Estou tendo problemas tentando utilizar esse método de envio de formulário por email, sem dar refresh na página. Ainda não tenho muitos conhecimentos com Ajax, então não sei bem se o código está correto, até tentei por outros métodos, copiando e colando o código e só mudando algumas coisas pra ver se ia, mas não consegui. O problema é que ao clicar no botão de enviar, não ocorre nenhuma ação. A função não é chamada.
Código em js:
$(function($) {
$("#form1").submit(function() {
var nome = $("#nome").val();
var email = $("#email").val();
var mensagem = $("#mensagem").val();
$("#status").html("<img src='loader.gif'/>");
$.post('email.php', {nome: nome, email: email, mensagem: mensagem }, function(envia) {
$("#status").slideDown();
if (envia != false) {
$("#status").html(envia);
}
else {
$("#status").html("Mensagem enviada com sucesso!");
$("#nome").val("");
$("#email").val("");
$("#mensagem").val("");
}
});
});
});
Código PHP:
<?php
require_once("class/class.phpmailer.php");
date_default_timezone_set('America/Sao_Paulo');
$ip = getenv("REMOTE_ADDR");
$mail = new PHPMailer(true);
$mail->SetLanguage("br");
// $mail->IsSMTP();
$mail->SMTPDebug = 0;
$mail->SMTPAuth = true;
$mail->SMTPSecure = 'ssl';
$nomeusuario = utf8_decode($_POST['nome']);
$emailusuario = utf8_decode($_POST['email']);
$mensagem = utf8_decode($_POST['mensagem']);
$mail->Host = 'email-ssl.com.br';
$mail->SMTPAuth = true;
$mail->Port = 465;
$mail->Username = '';
$mail->Password = '';
$mail->From = $emailusuario;
$mail->FromName = $nomeusuario;
$mail->AddAddress('', '');
$mail->Subject = "";
$mail->AddBcc($emailusuario);
$mail->Body = $mensagem;
if(!$mail->Send()) {
echo "Mensagem de erro: " . $mail->ErrorInfo;
} else {
echo "Mensagem enviada!";
}
?>
HTML:
<form id="form1" class="row" method="post" action="javascript:function()">
<input type="text" placeholder="Nome:" class="form-control" name="nome"/>
<input type="email" placeholder="E-mail:" class="form-control" name="email"/>
<textarea placeholder="Mensagem:" class="form-control" name="mensagem"></textarea>
<input type="submit" class="btn btn-default btn-link" name="submit">
</form>
Se, ao invés de usar o action, eu usar onsubmit, sou redirecionado ao seguinte erro anexado:
>
4 minutos atrás, gabrieldarezzo disse:
A primeira coisa qnd vou efetuar um ajax é confimar que o servidor está efetuando/funcionando.
Não sei se é exatamente o que você quis dizer, mas os e-mails eram disparados normalmente antes de eu tentar usar o Ajax, redirecionava à outra página e retornava a pagina inicial.
>
Citar
Recomendo a leitura:
https://github.com/gabrieldarezzo/desafiosInternos/tree/master/ajax#guia-definitivo-ajax
Pelo jeito minha dúvida é beeem recorrente por aqui, até um guia você acabou criando! haha De qualquer forma, vou ler e ver se consigo resolver, aí dou um retorno aqui.
haha é sim .
Mas tentai ai qlq dificuldade retorna.
Se tudo funcionava (e ainda funciona após o teste sugerido acima)
Só acompanhar o fluxo de parametros/URL que é enviado pela propria ferramenta de dev do Google Chrome
https://github.com/gabrieldarezzo/desafiosInternos/tree/master/ajax#5---acompanhar-oq-foi-enviado
Provavelmente não está enviando.
Leitura complementar:
>
Citar
Provavelmente não está enviando.
Exatamente haha Tentei usar o método mais ou menos como está no guia com serialize e tal, mas acontece o mesmo problema, sendo redirecionado para aquela página com erro de HTTP, "HTTP Error 405.0 - Method Not Allowed", que na verdade não sei o que é. Vou dar uma olhada sobre o que é esse erro, vai que me dá uma luz também
Provavelmente junto com o Ajax está realizando o submit do form.
Faz o seguinte, cria um action que só recebe um texto e retorna outro texto e faz o ajax chamar este action, quando esta parte estiver OK, aí você começa a alterar para o ajax enviar os dados do email e por ultimo altera o action para realizar o envio do email propriamente dito
Bom, consegui resolver, na verdade o jquery estava sendo chamado no fim da tag body, mas era pra estar na tag head, erro bem besta mesmo! O único problema agora, é que os inputs não estão sendo limpos após o envio.
>
5 horas atrás, Felipe Evangelista disse:
Bom, consegui resolver, na verdade o jquery estava sendo chamado no fim da tag body, mas era pra estar na tag head, erro bem besta mesmo!
Não faz sentido isso.
o jQuery deveria ser realmente o ultimo a ser carregado (antes do fechamento da tag body), inclusive melhora na performace por não ser auto blocante.
Ex: de um carregamento correto:
<!DOCTYPE HTML>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<p>Nome</p>
<input type="text" name="" id="" />
<p>Email</p>
<input type="text" name="" id="" />
<button id="btn-action">Disparar!</button>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="meuScritpQueUsajQuery.js" type="text/javascript"></script>
</body>
</html>
PS: ordem importa aqui, deve ser carregador primeiramente o jQuery e só após isso os demais.
E para garantir que o escopo não vai vazar/aquele bloco de jQuery só vai ser executado depois que o jQuery estiver pronto.
Um exexemplo do conteúdo da **meuScritpQueUsajQuery.js:**
$(document).ready(function() {
//Funções jQuery aqui... por exemplo o monitoramento
$( "#btn-action" ).bind( "click", function() {
//Chamar ajax, limpar campos, chamar API, chamar a mamãe, etc
});
});>
5 horas atrás, Felipe Evangelista disse:
O único problema agora, é que os inputs não estão sendo limpos após o envio.
Como está o seu código que 'limpa'?
Exemplo de como limpar campos com o jQuery:
$( "#btn-action" ).bind( "click", function() {
//ajax
//success
$( "#meuCampo" ).val('')
});>
Citar
Não faz sentido isso.
o jQuery deveria ser realmente o ultimo a ser carregado (antes do fechamento da tag body), inclusive melhora na performace por não ser auto blocante.
Então, eu nem tinha tentado colocar na head por causa disso, na verdade quem deu essa ideia foi um amigo da faculdade
>
Citar
Como está o seu código que 'limpa'?
else {
$("#status").html("Mensagem enviada com sucesso!");
$("#nome").val("");
$("#email").val("");
$("#mensagem").val("");
}
Está dessa forma. Não sei o que aconteceu, mas não consegui acessar minha conta pelo facebook e acabei criando outra, e não é só nesse forum que deu esse problema kkO problema de não limpar o formulário eu resolvi aqui, então parece que tudo está funcionando normalmente agora, apesar de o JQuery estar na tag head
E se colocar como dei no exemplo:
Recomendo assistir:
https://www.eventials.com/pinceladasdaweb/javascript-boas-praticas-e-otimizacoes/
>
Citar
E se colocar como dei no exemplo:
Agora está tudo resolvido, demorei pra vir responder, mas ontem o que eu fiz foi aí do jeito que você exemplificou, e com o jquery no lugarzinho dele lá perto do fim do body, já tinha tentado fazer mais ou menos dessa forma e não tinha dado certo, mas ontem deu, não sei porque, do jeito que eu fiz deveria ter algo errado que eu não vi, mas enfim, pelo menos deu tudo certo com a sua ajuda!
Valeu mesmo :D
>
Em 29/03/2017 at 11:38, gabrieldarezzo disse:
Recomendo assistir:
https://www.eventials.com/pinceladasdaweb/javascript-boas-praticas-e-otimizacoes/
Vou assistir hoje!
>
1 minuto atrás, Felipe Evangelista disse:
Ainda não tenho muitos conhecimentos com Ajax,
Recomendo a leitura:
https://github.com/gabrieldarezzo/desafiosInternos/tree/master/ajax#guia-definitivo-ajax
Sobre o seu problema....
A primeira coisa qnd vou efetuar um ajax é confimar que o servidor está efetuando/funcionando.
Tenta isolar o problema....
Ex:
Tenta criar um Mockzin para teste...
Substitui o conteudo do email.php:
/*
*/
$mensagem = 'teste@teste.com.br'; // Ou um E-mail valido...
chama a url, etc etc.
Confirmou que dispara?
Volta pro ajax...
é aquela velha historia dividir para conquistar