Enviar formulário para o php sem refresh – jQuery.ajax

Eu havia postado, como enviar um formulário com ajax, aproveitando o callback submitHandler do jQuery.validate.

Porém, se vc não estiver usando esse plugin, e quiser apenas usar o ajax do jQuery, o seguinte basta:

<html>
<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript">
	jQuery(document).ready(function(){
		jQuery('#ajax_form').submit(function(){
			var dados = jQuery( this ).serialize();

			jQuery.ajax({
				type: "POST",
				url: "processa.php",
				data: dados,
				success: function( data )
				{
					alert( data );
				}
			});
			
			return false;
		});
	});
	</script>
</head>
<body>
	<form method="post" action="" id="ajax_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>
</body>
</html>

Primeiro eu importo a lib jQuery:

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Nada de novo até aqui.

Faço corretamente, e disparo a minha função no evento onsubmit do formulário:

		jQuery('#ajax_form').submit(function(){

Vi alguns tutoriais( de blogs, fóruns e video aulas ), usando o evento onclick do botão submit(ou button), “fingem”, que isso funciona, e depois várias pessoas vão aos fóruns, por causa dos problemas gerados por esses códigos mal escritos e incorretos.

O correto é usar no onsubmit do form, e “desativar” ele, com aquele return false; que envio na linha 19

			return false;

Daí em diante, não tem segredo, é o mesmo miolo que usei para enviar com o jQuery.validate.
De graça, o método .serialize(), cria a query string com os dados do formulário, e usamos essa variavel para enviar a função ajax.

Ali no success: function( data ) (linha 13), é o callback que será disparado, assim que a requisição retornar(status 200 e tal).

Bom, é isso =)
Comentem, compartilhem. Sei que é um assunto já bastante “batido”, porém não me custava deixar um código bem escrito, até para tentar minimizar os efeitos dos maus tutoriais.

87 Comments

  1. Evandro Oliveira

    janeiro 20, 2012 at 11:09

    Sugiro informar “type” nas propriedades do AJAX como sendo o mesmo valor do atributo METHOD do formulário. Fica mais genérico 😉

  2. Pra quem tiver interesse no assunto, eu fiz um plugin pro jQuery chamado Auto-Ajax que serve pra isso, enviar um form por ajax sem refresh na página. E ele funciona sem você precisar escrever uma linha de javascript.

    Quem quiser aprender mais a fundo, pode olhar o código fonte do meu plugin. Ele é open source e está disponível no github: https://github.com/bighi/Auto-Ajax

    • Victor Moraes

      junho 23, 2016 at 12:02

      Fala Leonardo,
      estou dando uma olhada no plugin. Tens um tutorial para utilizar em form?

      Qual a versão compatível do jquery?

  3. Olá, estou com uma dúvida.
    Fiz um formulário de upload de arquivos, com envio para o -emil do cliente. No entando, o envio é usando o class.phpmailer.
    Eu estava tentando incluir esse script para pode incluir a mensagem de “Carregando…”, enquando é feito o upload. Porém, depois que inclui esse script postado “jQuery.ajax” ele enviada apenas o conteúdo de texto. O arquivo não foi enviado. Sabe responder qual o problema?

  4. E aí tudo bem? Se puder da uma dica. Tenho uma pesquisa que tem vários filtros (esses já estão funcionando com AJAX, de acordo com uma seleção da combo. Porém tudo está contido no msm form. Então qnd uso .submit ele vai pegar todos os dados do form inclusive os filtros q estão ocultos.

    Estou tentando fazer o serialize pegar só os dados do filtro visível. Tem como?

  5. Rafael souza

    maio 22, 2012 at 22:56

    Boa noite. Supondo que na página “processa.php” eu realizarei algumas operações matemáticas e precisarei retornar esse resultado para a página do meu form. Como eu faria?
    Obrigado.
    Muito bom o Post! Parabéns!

    • basta dar um echo do resultado, e pegar na função success através da variavel data.

      • Precisando de um help brow.
        Olha ai o código se possível por favor e me fala o que tem errado… só cai o retorno nesse error (nulo).

        				function Salvar() {
                          $(document).ready(function(){
                               var resultado_validacao = $("#validar").valid();
                               var campos = $('#validar').find('input, select, textarea, button').serialize();
                               if(resultado_validacao == true){
        
                                    jQuery.ajax({
        				            type: "POST",
        				            url: ".php",
        				            dataType: "json",
        				            data: campos+"&acao=alterar",
                                    success: function(html){
                                      var resultado = html.resultado;
                                      if(resultado == "ok"){
                                          $.msgAlert ({ type: 'sucesso', title: '', text: 'teste com acerto', callback: function () { location.href='.php'; } });
                                      }
                                      if(resultado == "erro"){
                                          $.msgAlert ({ type: 'erro', title: '', text: 'teste com erro 01' });
                                      }
                                    },
        							error: function(){
                                        $.msgAlert ({ type: 'nulo', title: '', text: '<?=utf8("No momento não foi possível completar sua solicitação.Tente novamente.Caso o erro persista entre em contato pelo suporte!")?>' });
        							}
        			                });
                               }
                          });
        				}
        				
        

        ….
        Salvar

        Na função que altera (acao=alterar) tem o echo jogando o resultado:

        echo json_encode(array('resultado' => 'ok'));
  6. “return false”, ao meu ver também é gambiarra. Costumo utilizar:

    jQuery(‘#ajax_form’).submit(function(event){
    event.preventDefault();

    Bacana o blog!

    • Cara, vc salvou a minha pele hehe. Estava enviando um form para o wordpress e resgatando dentro de uma modal bootstrap, não funcionava de jeito nenhum, até eu seguir a sua dica e trocar return null pelo event.preventDefault();. Quem sabe sabe, é isso ai brother, valeu!

  7. Felipe Menezes

    julho 13, 2012 at 13:40

    Olá! você poderia me dizer se é possível enviar um $.post para o mesmo documento tipo, deixar o url em branco ou colocar um $(document) na frent de url, assim:

    url: $(documente).ready(); ou
    url: url em branco;

    espero resposta, ah, parebéns pelo post, muito legal…

    • é possível enviar para o mesmo documento, mas vc deve informar a URL.

      nem que seja usando um
      url: document.location.href,

  8. valeu Bruno você me ajudou muito Obrigado, Sucesso com seu site!

  9. Si conter um campo do tipo file para upload como ficaria o script???

  10. Bruno, boa tarde!

    Poderia me auxiliar?
    Como faço um ajaxSubmit do jquery.form funcionar no IE 7 ???

    Obrigada desde já!

  11. E se o formulário estivar dentro de um echo em php, no meu caso não está funcionando. O que eu faço?

  12. E ai Willian,
    vc sabe como eu posso faze para pegar os campos que estão desabilitado utilizando o método serialize() jqueyr?

    • Não pega. Essa é a definição do atributo disabled.
      Se vc quer só impedir que o usuario altere, use readonly, e não disabled

  13. Só que eu estou com um problema, esse campo desabilitado é importante pq eu preciso pega-ló para inserir no banco de dados. Eu consigo pegar o valor utilizando essa função que eu fiz:

      $('[disabled]').each( function() { 
    		dados = dados + '&' + $(this).attr('name') + '=' + $(this).val(); 
    	});

    , porém eu queria pega-ló direto do metódo serialize(). Não tem possibilidade de pegar os valores direto do método.

  14. jefferson David

    outubro 24, 2012 at 09:54

    Só para complementar o ultimo post. Se eu usar o readonly eu vou ter problema com IE. Não sei o que acontece, mas quando eu uso o readonly para fazer esse tipo de processo, o IE permite que o campo seja alterado.

  15. rodrigo tenorio

    outubro 24, 2012 at 17:53

    Como faço para fazer um onfoco em um jquery?

  16. Cara, primeira vez no site e já sou seu fã, desde janeiro respondendo as duvidas dos leitores \o/

    Eu queria saber como faço para abrir um overlay quando enviar o formulário com o resultado. Da para fazer?

  17. Olá Bruno, é possível fazeres um exemplo de como usar ajax para actualizar onchange na base de dados de um select option?
    Não consigo fazer isso de forma nenhuma sem ter que primeiro ir ao botão actualizar.
    Agradeço desde já imenso pelo esforço.

  18. Olá a todos!

    Dúvida: fiz um formulário de contato utilizando o método acima, tudo vai bem até eu instanciar a classe do Phpmailer, depois disso o script parece travar, ‘clico’ e nada acontece.
    Podem me ajudar?

    Parabéns pelo post!

  19. E como eu faço quando dentre os dados tem um campo input=”file”?

    Valeu, obrigado!

  20. como disparo a função no evento onSubmit? não sei bem javascript.

  21. Bruno declaro a variavel dados porém antes de fazer o post queria colocar um if de validação se der erro aparece uma span e se der certo envia as informações eu não utilizava o serialize usava concatenação estou errando ai aguardo informação

  22. Charles Rodrigues

    julho 29, 2013 at 14:41

    Olá, muito bom, mas tive um problema, tenho em uma pagina dois formulários, a função funciona perfeitamente no 1° formulário, mas a mesma não funciona no 2° formulário da mesma pagina, saberia me dizer o motivo, e qual a melhor maneira para que eu possa resolver esse problema. Obs: preciso de ambos os formulários na pagina.

  23. Olá Bruno tudo bem! tem como dar uma dica?
    Como faço para soma dois campos imput, sem perder os dados que foram digitados nos outros campos, usando o php.

  24. Fala Bruno… me ajuda por favor… é muito urgente!!!!!

    eu estou usando seu codigo para enviar o formulario.. ate ai tudo bem. O meu problema é q eu preciso exibir o conteudo do echo q é gerado na pagina processa.php sem ser em alert. Ex: mostrar_status( data ); O conteudo do data tem q ser assim: ‘aviso’, ‘menagem.’ se eu fizer com o alert aparece direitinho o conteudo ‘aviso’, ‘menagem.’ q esta no echo…. mas se eu tirar o alert do seu codigo e colocar o meu mostrar_status( data ); da uma mensagem assim no local da div q exibe as mensagens: undefined undefined

    Aguardo sua ajuda Bruno… desde já obrigado pela atenção

  25. esqueci de dizer q se eu substituir o alert( data ); e por mostrar_status( ‘aviso’, ‘mensagem.’ );

    funciona perfeito la na div q exibe as mensagens.

  26. Mais um probleminha rsrsrs…. Eu uso um js para verificar os campus do formulario… ex. campus obrigatorios, email etc… usando seu codigo, quando eu clico em enviar ele passa direto sem fazer a verificacão. Existe alguma forma de resolver isso? ou so colocando a verificacão dos campus no arquivo processa.php?

  27. Bom dia, como faço para pegar o id de cada formulário diferente pois minha página contém vários.
    obrigado

  28. Nossa muito obrigada, serviu direitinho para o que eu precisava.
    Estou com um problema: meu formulário cria campos dinamicamente, envia pra um arquivo php via jquery post, porém não estou sabendo como tratar a resposta, caso haja erro e o dado não for inserido, eu gostaria de dar um focus, ou por uma cor naquele elemento.
    Mas não estou sabendo como fazer.

  29. Bom dia, bruno. Estou com um problema. Testei teu código, tá massa, mas eu precisava enviar o formulário sem o botão, quando o sujeito terminasse de digitar o telefone, por exemplo (algo tipo no mouseout.

    Valews

  30. Bom dia, como faço para colocar dois botões um para enviar e outro para limpar o form?

  31. Marcelo Aymone

    outubro 31, 2013 at 15:24

    Cara, passei horas procurando como parar o submit do form para ele não dar redirect.
    Aquele “return false” do evento onsubmit solucionou meu problema.
    ^^
    Obrigadão, abraços!

  32. Boa tarde Bruno,

    muito bom seu post, e o site como um todo.

    Estou utilizando seu exemplo em meu código e acontece o seguinte, ao clica no botão submit a página processa.php é mostrada no navegador, o certo é isso não acontecer mas acqui está acontecendo.
    Sabe me dizer qual o problema?

    Abraço!

  33. Bom tarde, como faço para eu receber esses “dados” em uma funcao php ???

  34. Como faço para inserir uma classe em uma div?
    Por exemplo:

    Se o form for “submetido” adicione a classe “enviada”.

    Senão adicione a classe “nao-enviada”

  35. Olá Willian, show este código, mas é o seguinte eu consegui até implementar nos meus testes, só que eu queria acrescentar o RECAPTCHA do google, eu ainda uso o antigo com caracteres distorcidos e não o novo, só que não consigo dar o resultado quando digito o caracteres no campo do captcha e percebi que ele pede o ip na hora do reflesh da página, usando a função ADDR, segue o trecho do código:


    require_once('recaptchalib.php');
    $privatekey = "chavekey"; // coloque aqui a Private key
    $resp = recaptcha_check_answer ($privatekey,
    $_SERVER["REMOTE_ADDR"],
    $_POST["recaptcha_challenge_field"],
    $_POST["recaptcha_response_field"]);
    if (!$resp->is_valid) {

    // O que acontece quando o CAPTCHA for digitado incorretamente
    echo "alert('** Código Captcha incorreto, insira novamente **');";
    echo "history.back()";
    } else {
    echo "alert('** Mensagem enviada com Sucesso:**');";
    echo "history.back()";

    Este código fica no enviar.php, desculpa poluir com o código aí , era só para você entender meu exemplo

  36. Olã Bruno então eu consegui resolver meu problema acima de usar o Recaptcha do google e agora esta funcionando legal, mas eu queria fazer uma adpatação no seu código tipo assim , na hora que os dados realmente for enviado, ele limpar o formulário tente desta maneira usando essa função $(“#contactform_2”).each(function(){ this.reset(); e não deu certo como seria a regra para atiruir este valor tentei desta maneira e não resetou o form.

  37. Olá BRuno,

    tenho um carrinho de compras e tentei adaptar esse ajax, mas n retorna em array tipo assim no html e php:

    HTML:

    <input type"text" size="2" name="qtdealtera[]" value="" />  
         <input type="hidden" name="cod" id="cod" value = ""/>
    

    =========================

    PHP:

    	$quant = $_POST['qtdealtera'];
    	echo 'QUANT: '.$quant.'';
    		// Se for diferente de vazio verificamos se é numérico
    		if (is_array($quant))
    		{	
    		    // Aqui percorremos o nosso array
    			foreach($quant as $cod => $qtd)
    			{
    				// Verificamos se os valores são do tipo numeric
    				if(is_numeric($qtd))
    				{
    					//VERIFICAR SE N ESTAR COM VALORES NULLOS A QTDE
    					if(($qtd!='')and($qtd!='0')and($qtd!='0.00')and($qtd!='0,00')){						
    					// Fazemos nosso update nas quantidades dos produtos
    					$sql_modifica = $bancodados->query("UPDATE vendas_itens SET qtde = 	'$qtd' WHERE  ramdom = '$cod' AND sessao = '$idramdom'");
    					if(!sql_modifica) {echo("Descricao do erro: " . mysqli_error($bancodados));}
    					}
    				}
    			}
    		}

    =================
    O array n retorna e o cod vem sempre o 1º do laço
    Vlw desde já…

  38. Cara, eu estou usando seu Script, mas estou com um problema.

    No meu Processa.php, tem um header(location: site);
    E eu queria que fosse executado também pelo jQuery, mas com uma condição, se o Echo do processar.php tiver um (‘exemplo’), ai ele faz o carregamento do site.
    Eu tentei:

    jQuery(document).ready(function(){
    		jQuery('#ajax_form').submit(function(){
    			var dados = jQuery(this).serialize();
    
    			jQuery.ajax({
    				type: "POST",
    				url: "Usuarios.php",
    				data: dados,
    				success: function( data )
    				if (data == 'exemplo')
    {
    				
    				alert (data);
    window.location.href(data);
     				}
    	
    else
    {
    alert(data);
    }					});
    					
    			return false;
    		});
    	});

    Mas não dá certo, e o alert nem mostra mais valores que tem no Echo do processar.php.

    Se puder ajudar, fico grato!

    • Você não pode ter o header location no php. Isso “atrapalha” o ajax.
      Lá só pode ter o echo.

      • Valeu por responder!

        Eu entendi, mas tem como criar alguma condição direto no ajax, isso é, sem o header no php?
        Exemplo, algo como:

        if (data == 'Palavra do echo')
        {
            alert(data);
            document.location.href='site';
        } else {
            alert(data);
        }
        

        Mais uma vez, obrigado por responder!

      • Exatamente. Cria a condição direto no retorno do ajax.
        Só corrija o código que você postou aqui e deve funcionar, desde que o teu php faça o echo corretamente.

  39. Consegui, William!
    Valeu mesmo!

    Se alguém precisar, segue como ficou, e como resolvi!

    	
    	jQuery(document).ready(function(){
    		jQuery('#ajax_form').submit(function(){
    			var dados = jQuery(this).serialize();
    
    			jQuery.ajax({
    				type: "POST",
    				url: "Processa.php",
    				data: dados,
    				success: function( data )
    				{
    //Verifica se palavra/frase é igual a data dentro de Echo no Processa.php
    				if (data == "Palavra_que_você_quer_achar_igual_no_processa.php")
    				{
    //Se for, aparece o que tem no echo e redireciona a página
    				alert(data);
    				window.location.href='http//coloque.algum.site.para.redirecionar';
    				}
    				else 
    //Senão
    				{
    //Mostra o que tiver em outro Echo
    				alert(data);
    				}
    						}
    						});
    					
    			return false;
    		});
    	});
    	
    

    Obs.: Não consegui responder na sua última resposta, se conseguir colocar (como resposta), Ok!

  40. Parabens! Excelente explicação!

    Funcionou pra mim. Muito OBrigado

  41. Olá Bruno,

    Possuo um formulário, onde carrego alguns campos a mais por javascript.
    o serialize() não carrega esses campos, somente os que estão fixos.

    • Veja se eles estão sendo inseridos dentro da tag

      , e se o momento que você chama o serialize() está aguardando que todos estejam disponíveis.
  42. Ola eu coloquei o seu codigo em um index.php e logo abaixo coloquei uma valiavel que pegava os dados inseridos no input nome ( $nome = isset( $_POST[‘nome’]) ?$_POST[‘nome’]:—; ) mais quando clino no botao submit ele nao responde… Espero que possa me ajudar, quero adaptar esse codigo para meu site. VLW

  43. Muito bom, Willian!
    Uma dúvida que tenho
    como faço para que em um alert ele mostre só o valor do campo no serialize ele retorna nome=Nome e quero que ele me retorne só o valor que foi inserido no campo,pode me ajudar?

  44. Olá. Será que existe um jeito de enviar varias fotos (serão sempre as mesmas) anexadas em um email, sem ter que a pessoa ficar carregando uma a uma para enviar o email? Valeu.

  45. Obrigado pelo tutorial.

  46. Bom eu tentei o código que o Victor posto a cima mais eu to com o seguinte problema , Assim que eu envio meu formulário a pagina não atualiza e abre uma div oculta (que e oque eu queria ) mais ela não envia os dados para banco de dados e outra duvida no ” if (data == “Palavra_que_você_quer_achar_igual_no_processa.php”) ” Qual palavra seria essa ?

  47. Depois de tanto procurar achei uma explicação boa! Obrigado!

  48. Parabens pelo poste, me ajudou muito, sou iniciante e ainda apanho em algumas coisas.

  49. Marcio A. Pinheiro

    junho 17, 2016 at 16:59

    Parabéns pelo conteúdo!
    Cara, gostaria de uma ajudinha sua. É o seguinte:
    Estou fazendo carregamento dinâmico de conteúdo dentro de uma div usando jquery e ajax. Ou seja:
    Criei 4 paginas (index, pg1, pg2, p3) na index eu criei uma div que carrega o conteúdo das outras páginas ao clicar em uma opção do menu.

    Gostaria de usar esse seu script para enviar dados de um form sem o refresh, porem não funciona quando envio os dados do form ele retorna para a index sem nada acontecer.

    Não sei se consegui explicar o que acontece.

    meu e-mail é marciop07@hotmail.com
    help!

  50. José Allison

    agosto 15, 2016 at 10:29

    Obrigado por responder William, não sei pq, mais minha pergunta anterior sumiu, enfim, Vc disse que era só eu atualizar a div que eu quisesse no ajax, o problema é que eu to começando a ver Ajax agora, devido a necessidade desse projeto que peguei. Teria como tu me mandar um exemplo?
    Desde já agradeço! 🙂

  51. E ai, beleza?
    Interessante esse método, sou novato em linguagens web e gostaria de saber como proceder com a inserção no banco! Pode me dar alguma referência de estudo?

  52. Olá! Estou colocando a action para a própria página, exemplo, na URL do Ajax estou colocando a página atual do documento, e na hora que retorna os dados ele retorna o html inteiro. Até aí tudo bem, gostaria de saber se tem como retorna apenas os dados passados em html.

  53. Olá tou fazendo um HTML ei eu vi uma forma de salva dados de um formulário muito compacto mais ele só funciona em páginas javas tipo 3 linha dava pra salva o arquivo ainda criar uma pasta mais ei quero ajuda tou fazendo um HTML ainda sou novo nessas coisas mais quero sabe se alguém pode me ajuda já entrei em bem 5 grupos de desenvolvedores mais ninguém me ajuda se alguem me ajuda chama no GMAIL danielsouza123945@gmail.com pfv

  54. olá eu sou novo com essa coisa de programar e desenvolver Html tenho poucos meses estudando e eu peguei um template de web site para editar e nele tem um código html do formulário, oque eu quero é enviar para o meu e-mail de alguma forma tudo o que a pessoa inserir nos campos sem que na hora que o mesmo clicar no botão enviar ele saia da pagina ou dê refresh nela: o código é este:

    Contate-nos

    Enviar

    lembrando que eu só tenho o código acima nada de PHP ou outro para enviar os dados para meu e-mail pessoal, alguém me ajuda ai. estou editando pelo PHP STORM da JetBrains.
    link da imagem da pagina de contato: https://dl.dropboxusercontent.com/u/22914108/fomulario%20contato.jpg

Deixe uma resposta

Your email address will not be published.

*