Enviar formulário sem atualizar a página com jQuery Form

Aviso importante!

Eu sei que você não quer ver propagandas, porém o conteúdo gratuito só está aqui graças a publicidade. Considere desativar o AdBlock para esse site.

Todo sistema web precisa de um ou vários formulários para interagir com seus usuários, enviar informações de um lado para outro entre outras tantas utilidades. Mas um grande problema para todo desenvolvedor é o processamento destes formulários, pois a maioria usa o processamento padrão que direciona o usuário para outra página e então trata toda informação recebida do formulário.

Porém o trabalho para manipular tudo e enviar de volta em caso de erro é muito grande, por isso apresento-lhes hoje uma forma muito simples de processar formulários dentro da própria página sem atualizar a mesma, enviando e processando os dados sem tirar o usuário da página.

Acompanhe a aula e bom estudo. Aproveite e veja também uma aula sobre validação de formulários que deve ser feita antes de enviar o mesmo.

Se você tem dúvidas sobre jQuery ou não tem muito conhecimento sobre este assunto, aconselhamos nosso curso de jQuery para Iniciantes.

Sobre o autor

Ricardo Bernardi

Sou técnico em hardware e desenvolvedor web, e sobre estes dois assuntos comecei a compartilhar aulas e artigos, tornando-me blogueiro em 2008. Em 2010 esse hobby virou profissão, e desde então tenho buscado melhorar e profissionalizar cada vez mais os projetos que mantenho na web.

Comentários

Atualmente temos 23 comentários para este post. Participe você também, clique aqui e comente sobre o assunto.

  • wilson nogueira comentou em

    Preciso tirar uma duvida usei essa função funcionou beleza no formulário de autenticação sobrepondo com o modal, depois que passa da autenticação chamo outra tela de menu e a tela de autenticação anterior continua também como faco para a tela anterior não aparecer.

    Responder
  • Carlos Queiroz comentou em

    Ótimo tutorial Ricardo Bernardi, parabéns!

    Eu tenho uma dúvida, se por exemplo eu quiser retornar o valor $(".resultado").html(retorno); em uma variável em javascript?

    Responder
  • mmmcarvalho comentou em

    Caro Ricardo,

    Parabéns por mais uma aula!
    Eu estava adiando o uso do jQuery, mas depois de suas aulas eu vou usar direto.
    Inclusive tenho um Framework, no qual estava fazendo 10 anos de uso e vou incluir as jQuery!
    Você poderia refazer esta aula em HD e colocar mais exemplos?

    Um abraço

    Responder
  • Diego comentou em

    Nossa cara vlw estava precisando disso, me ajudou muito, porém não abusando da sua bondade poderia, me ajudar a limpar somente um campo específico após eu enviar o formulário, contudo sua vídeo aula foi muito boa continue assim fiquem com Deus vlw

    Responder
  • Luis enrique comentou em

    Não Conseguir Fazer...
    Quando eu Clico em Enviar ele redireciona para o php e não na pagina mesmo... Olha ai em baixo os Codigos...

    não são permitidos código fonte nos comentários, atente para as regras

    Resolve para Mim To Prescisando desse codigo...

    Responder
  • fabio oliveira comentou em

    Irado, muito obrigado pela dica, mas eu tenho uma pergunta. Como eu faria para ser com todos os formulários?

    Tenho mais de um formulário na tela e gostaria de fazer um código descartável para todos os form's, é possível?

    eu trabalho com querystring, pode interagir com?

    Obrigado.

    Responder
  • Otavio Nicolau comentou em

    Amigo os videos que são para assinates premiun pode ser baiaxo com realplay.

    Responder
  • Soares comentou em

    Antes de mais nada, muito obrigado por suas aulas, você realmente tem o dom de ensinar, sou muito grato e desejo que seja muito abençoado em seus projetos, você merece!
    Tenho conhecimentos de lógica de +ou- 12 anos atrás, ciência da comput.. Não continuie na carreira, sei alguma coisa de VB, e agora estava montando um programa em VB mas um antigo amigo meu me convenceu a montar em jquery,php,etc, este programa é para eu usar em meu serviço, sou representante e quero tirar pedidos, mostrar histórico de compras do cliente, etc tudo na frente do cliente, ai esse meu amigo me motivou a comprar um ipad e desenvolver este programa para o ipad, fiquei encantado com a propaganda dele, mas ele teve alguns problemas e me abandonou dizendo que não iria dar certo e pra eu vender o ipad e desistir do programa, ele stressou porque eu não estava acompanhando as suas explicações, bom isso foi a 2 semanas atrás, hoje é 18/02/12, e até aqui eu já fiz várias páginas do programa, cadastros de clientes, produtos, exclusões, até histórico de compras, até já coloquei foto dos produtos, mas agora travei ma tela do pedido, pois quero abrir a div na página sem atualizá-la. Uso mysql, dreanweaver, e estou no computador fazendo para depois passar para o ipad, aliás, isso também será um grande desafio que vou ter que vencer, pois não faço idéia de como fazer isso, pois bem, assisti várias vezes essa sua aula, mas não consigo, o ajaxForm não funciona, fiz seu simples exemplo e trava aí, coloquei alert para ir indicando, verifiquei a pasta jquery com o arquivo jquery.form.js, tudo certo, coloquei também jquery-form.js, tentei todo possível! O que deve fazer ?

    Responder
    • Deve planejar suas tarefas antes, provavelmente está errando em algum ponto que faltou em seu diagrama de desenvolvimento. O exemplo foi simples e serve apenas como base, cabe a você desenvolver modelos mais complexos e que sirvam para sua realidade. Tudo deve ser planejado e adaptado dentro de sua realidade, e como comentei na aula, dar uma boa estudada na documentação do plugin não faz mal à ninguém.

      Responder
  • marcello lima comentou em

    muito boa mesmo suas aulas parabéns estou aprendendo muito, sim so mais uma coisa e sobre essa enquente "Qual sistema web você gostaria de aprender a fazer?" aqui do lado vc vai desenvolver esse sistema web quando estou ancioso pra isso

    Responder
  • Andre Marcelino comentou em

    Quando apenas o email é preenchido o formulário não é enviado, porém o campo e-mail é limpo, ainda não achei a solucção par isso, rsrsrs!

    success: function(retorno){
    $(".resultado").html(retorno);
    beforeSend:$(".processando").hide();
    $(".resultado").fadeIn("slow")
    $("#form1").resetForm();
    }

    Responder

Deixe seu comentário