Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá meus Jovens, trazendo um tópico aqui pra quem quer criar um formulário para contato quando para cadastro de usuário ou outra coisa sem atualizar a página!
Primeiramente Vamos criar nosso formulário
<form id="envia_msg" action="" method="POST">
<input type="text" name="nome" placeholder="Nome..." required>
<br />
<input type="text" name="email" placeholder="E-mail..." required>
<br>
<textarea name="msg" placeholder="Sua Mensagem..." required></textarea>
<br />
<button type="submit" >Enviar</button>
</form>
<p id="resultado"></p>
Dei o id para o form e deixei a ação em branco usando o method POST .. Muito importante essas configurações.
Vocês devem ter reparado o paragrafo em baixo do Form, este paragrafo é aonde ira aparecer a mensagem para o usuário caso ocorra tudo certo, e ele também recebeu um id.
Agora vamos incluir o Jquery em nossa página, sem ele não funciona, vai por mim!!!
<script type="text/javascript" href="https://code.jquery.com/jquery-3.2.1.min.js" ></script>
Agora vamos pro Javascript, o javascript vai ter a função de enviar os dados e mostrar a mensagem!
$(function(){
$('#envia_msg').submit(function(event){
event.preventDefault();
var formDados = new FormData($(this)[0]);
$.ajax({
url:'envia_msg.php',
type:'POST',
data:formDados,
cache:false,
contentType:false,
processData:false,
success:function (data)
{document.getElementById('resultado').innerHTML = 'Enviado! Em breve Entraremos em contato.';
$('#envia_msg').each (function(){
this.reset();
});
},
dataType:'html'
});
return false;
});
});
Então apos o formulario que tem o id envia_msg for submetido ele cria uma função event que pega os dados do formulario, e passa para o $.ajax enviar os dados para a página envia_msg.php que ainda vamos criar, apos enviado o success entra em ação criando uma niva function, que mostra a mensagem "Enviado! Em breve entraremos em contato."... e Pronto dados enviado sem atualizar a página!
--- A Parte "dificil foi feita" --
Agora vamos tratar com carinho os dados enviado para a página envia_msg.php
vamos recebe-los e inserir no banco de dados.
isso com , a linguagem mais top de todas!! PHP kkk
<?php
$host = "localhost";
$user = "root";
$senha = "";
$db = "tabela";
$conn = mysqli_connect($host, $user, $senha, $db);
$nome = $_POST['nome'];
$email = $_POST['email'];
$msg = $_POST['msg'];
$sql = "INSERT INTO `contato` (`nome`,`email`,`msg`) VALUES ('{$nome}','{$email}','{$msg}')";
$conn->query($sql);
?>
E PRONTO CABOUUU!! VAALLEEUUUCarregando comentários...