Enviar formulário php sem refresh com JQuery

Douglas Volkart quarta-feira, julho 16, 2014 Nenhum comentário
E aí pessoal! Estou bastante sumido, vários meses sem postar no blog, porém estou com várias novas ideias para o blog e em breve vocês vão acompanhar essas mudanças! (para melhor haha). Mas vamos ao que interessa! Andei procurando formas de enviar um formulário comum em HTML para o php sem sair da pagina e a forma mais fácil que encontrei foi usando a nossa querida biblioteca JQuery que vem facilitando a vida de todos os web designers! Bom então vamos ao tutorialsinho haha.





Vamos adicionar este código abaixo da tag <head>. Ela irá chamar a JQuery.

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>  
  <script type="text/javascript">  
  jQuery(document).ready(function(){  
  jQuery('#nosso_form').submit(function(){  
   var dados = jQuery( this ).serialize();  
   jQuery.ajax({  
   type: "POST",  
   url: "processa.php",  
   data: dados,  
   success: function( data )  
   {  
    alert( data ); //Aqui irá dar um alerta conforme o retorno do php  
   }  
   });  
    return false;  
  });  
  });  
  </script>


 Notem que destaquei dois trechos do código. Onde está "nosso_form" vamos substituir pelo ID da nossa form. Onde está "processa.php" vamos colocar o arquivo php que receberá as informações do form.
E o nosso formulário ficara assim:

 <form method="post" action="" id="nosso_form">  
           <label><input type="hidden" name="id" value="" /></label>  
           <label>Nome: <input type="text" name="nome" value="" /></label>  
           <label>Email: <input type="text" name="email" value="" /></label>  
           <label>Telefone: <input type="text" name="telefone" value="" /></label>  
           <label><input type="submit" name="enviar" value="Enviar" /></label>  
      </form>

Espero que seja util para todos! qualquer dúvida podem perguntar que eu tentaria ajudar!

Nenhum comentário :

Postar um comentário

Assinar: Postar comentários ( Atom )

Subscribe