I'm learning how to send email via POST in Ajax. What I have is right, the only thing is that after sending the email, it does not load the form (returnHTML), getting a hole in the screen:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"type="text/javascript"></script>
<!-- Sweetalert -->
<script type="text/javascript" src="js/sweetalert-master/dist/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/sweetalert-master/dist/sweetalert.css">
<title>Enviando e-mail com AJAX e PHP via protocolo SMTP - Vinteum Desenvolvimento</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
$(document).ready( function(){ //Quando documento estiver pronto
$('#btn').click( function(){ /* Quando clicar em #btn */
/* Coletando dados */
var nome = $('#nome').val();
var email = $('#email').val();
var msg = $('#msg').val();
/* Validando */
// if(nome.length <= 3){
// alert('Informe seu nome');
// return false;
// }
// if(email.length <= 5){
// alert('Informe seu email');
// return false;
// }
// if(msg.length <= 5){
// alert('Escreva uma mensagem');
// return false;
// }
/* construindo url */
var urlData = "&nome=" + nome + "&email=" + email + "&msg=" + msg ;
/* Ajax */
$.ajax({
type: "POST",
url: "sendmail.php", /* endereço do phpmailer */
async: true,
data: urlData, /* informa Url */
success: function(data) { /* sucesso */
$('#retornoHTML').html(data);
},
beforeSend: function() { /* antes de enviar */
$('.loading').fadeIn('fast');
},
complete: function(){ /* completo */
$('.loading').fadeOut('fast');
}
});
});
});
</script>
<style>
.loading { display: none; }
</style>
</head>
<body>
<h1><a href="http://vinteum.com/enviando-email-com-ajax-php-smtp">Enviando e-mail com AJAX e PHP via protocolo SMTP</a></h1>
<em>Vinteum Desenvolvimento</em>
<p> </p>
<div id="retornoHTML">
<form>
Nome<br>
<input id="nome" maxlength="10" type="text"><br>
E-mail<br>
<input id="email" maxlength="15" value="[email protected]" type="text"><br>
Mensagem:<br>
<textarea cols="50" rows="7" id="msg" maxlength="50"></textarea><br>
<input type="button" id="btn" value="ENVIAR">
<img src="loading.gif" class="loading">
</form>
</div>
</body>
</html>