Enviando Email Utilizando JQuery Ajax sem Refresh

[Felipe Evangelista 2]

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:

 

[gabrieldarezzo 255]

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:

/*
$nomeusuario = utf8_decode($_POST['nome']);
$emailusuario = utf8_decode($_POST['email']);
$mensagem = utf8_decode($_POST['mensagem']);
*/
$nomeusuario = 'Nome Test';
$emailusuario = 'User Test';
$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

 

 

 

[Felipe Evangelista 2]

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.

[gabrieldarezzo 255]

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:

https://developers.google.com/web/tools/chrome-devtools/network-performance/resource-loading#visao_geral_do_painel_network

[Felipe Evangelista 2]

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

[Pita 53]

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

[Felipe Evangelista 2]

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.

[gabrieldarezzo 255]

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('')
});

 

 

[jardimfelipe 0]

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 kk 

[jardimfelipe 0]

O 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

[gabrieldarezzo 255]

E se colocar como dei no exemplo:

https://forum.imasters.com.br/topic/557246-enviando-email-utilizando-jquery-ajax-sem-refresh/?do=findComment&comment=2223142

 

 

Recomendo assistir:

https://www.eventials.com/pinceladasdaweb/javascript-boas-praticas-e-otimizacoes/

[Felipe Evangelista 2]

Citar

 

E se colocar como dei no exemplo:

https://forum.imasters.com.br/topic/557246-enviando-email-utilizando-jquery-ajax-sem-refresh/?do=findComment&comment=2223142

 

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!