Neste artigo vou repassar como fazer o envio de formulários sem dar “Refresh” na página usando a biblioteca jQuery.
Antes de mais nada se não conhece a biblioteca acesse este link de de uma olhadinha tem um montão de coisas legais lá, então vamos primeiro baixar a biblioteca de lá; em seguida coloque o código abaixo no head de sua página:
<script type="text/javascript" src="js/jquery.js"></script>
Ele chama a biblioteca para sua página em seguida coloque este código abaixo:
jQuery(document).ready(function() { jQuery("#enviar").ajaxStart(function(){ jQuery(this).html("Enviando..."); }); jQuery('#submit').click(function() { var nome    = jQuery('#nome').val(); var email   = jQuery('#email').val(); var assunto   = jQuery('#assunto').val(); var mensagem = jQuery('#mensagem').val(); jQuery.post('envia.php', { nome: nome, email: email, assunto: assunto, mensagem: mensagem, contato: true }, function(data, textStatus) { jQuery('#enviar').html("Mensagem enviada com sucesso!"); }); return false; }); });
Bom sobre o código temos então:
Após isso criaremos o formulário para contato. Não é obrigatório colocar a tag <form> pois vamos pegar os valores pelo ID dos campos, por isso é importante sempre colocar os id´s no input
jQuery('#submit').click(function() {...
Nada mais é do que pegar o botão e executar um POST assincrono.
var nome = jQuery('#nome').val(); var email = jQuery('#email').val(); var assunto = jQuery('#assunto').val(); var mensagem = jQuery('#mensagem').val();
Pega os valores dos inputs (por isso tem que ter os ids)…
jQuery.post('mail.php', { nome: nome: nome, email: email, assunto: assunto, mensagem: mensagem, contato: true }, function(data, textStatus) {
Envia o post ao arquivo mail.php
jQuery('#enviar').html("Mensagem enviada com sucesso!");
retorna os dados em formato html no lugar dos dados do formulário
E então ao formulário:
<form action="" method="post" name="enviar" id="enviar" OnSubmit="return valida_envia()"> <h4>Contato on-line:</h4> <label>Nome: </label> <input name="nome" id="nome" type="text" size="60" /> <label>E-mail: </label> <input name="email" id="email" type="text" size="40" /> <label>Assunto: </label> <input name="assunto" id="assunto" type="text" size="30" /> <label>Mensagem: </label> <textarea name="mensagem" id="mensagem" rows="4"></textarea> <input type="submit" value="Enviar" id="submit" /> </form>
Volto a frisar que é importante que tenha os id nos campos principalmente no Botão de Enviar, pois é ele quem inicia a função do jQuery.
Tweet |
Vim especialmente para lhe agradecer a eficácia que seu código teve em meu projeto!
Embora este post tenha quase 3 anos, me auxiliou e muito!
Grande abraço!
link “clique aqui e baixe-a;” não funciona.
Estou tentando fazer um site com aquela entrada do clube do ricardo, sou novo e gostaria de aprender, tem alguma dica
Ao invés de usar o evento click no botão de submit você poderia usar o evento submit no formulário.
$('#enviar').submit(function(){...});
Como não há qualquer tipo de validação,você poderia pegar todos os dados do formulário de uma só vez, usando o método serialize
$('#enviar').serialize();