Simples Formulário Com HTML, jQuery, Ajax e PHP

Investir em Você é Barra de Ouro a R$ 2,00. Cadastre-se e receba grátis conteúdos Android sem precedentes! Você receberá um email de confirmação. Somente depois de confirma-lo é que eu poderei lhe enviar os conteúdos semanais exclusivos. Os artigos em PDF são entregues somente para os inscritos na lista.

Email inválido.
Blog /Desenvolvimento Web /Simples Formulário Com HTML, jQuery, Ajax e PHP

Simples Formulário Com HTML, jQuery, Ajax e PHP

Vinícius Thiengo
(15048) (4)
Go-ahead
"O método consciente de tentativa e erro é mais bem-sucedido que o planejamento de um gênio isolado."
Peter Skillman
Prototipagem Android
Capa do curso Prototipagem Profissional de Aplicativos
TítuloAndroid: Prototipagem Profissional de Aplicativos
CategoriasAndroid, Design, Protótipo
AutorVinícius Thiengo
Vídeo aulas186
Tempo15 horas
ExercíciosSim
CertificadoSim
Acessar Curso
Quer aprender a programar para Android? Acesse abaixo o curso gratuito no Blog.
Lendo
TítuloManual de DevOps: como obter agilidade, confiabilidade e segurança em organizações tecnológicas
CategoriaEngenharia de Software
Autor(es)Gene Kim, Jez Humble, John Willis, Patrick Debois
EditoraAlta Books
Edição1ª
Ano2018
Páginas464
Conteúdo Exclusivo
Investir em Você é Barra de Ouro a R$ 2,00. Cadastre-se e receba gratuitamente conteúdos Android sem precedentes!
Email inválido

Então, nesse vídeo mostro como criar um formulário utilizando as tecnologia HTML, jQuery, Ajax e PHP. É bem simples, mas eu foquei no entendimento. É muito importante que você saiba o que acontece quando algum usuário envia um formulário via Ajax, por isso o vídeo ficou um pouco comprido.

Eu acabei me confundindo no final com um erro de script, mas foi corrigido no vídeo mesmo. Coisas que acontecem quando a filmagem é na vera (eu já tinha feito todo o percurso anteriormente para ter o script bem definido!).

O link de demonstração está ai abaixo do post.

O arquivo com o projetinho está disponível para download logo ai embaixo no post.

Para instalar o AppServ acesse o link a seguir: AppServ (eu utilizo a versão 2.5.10 do AppServ).

Se divirta, evolua.

Investir em Você é Barra de Ouro a R$ 2,00. Cadastre-se e receba grátis conteúdos Android sem precedentes!
Email inválido

Relacionado

Faça certo: Redirecionamento 301 em PHPFaça certo: Redirecionamento 301 em PHPDesenvolvimento Web
O que acho de SEO (Search Engine Optimization)O que acho de SEO (Search Engine Optimization)Desenvolvimento Web
Preço de Software: Estratégias Para Negociar Com Clientes PechincheirosPreço de Software: Estratégias Para Negociar Com Clientes PechincheirosEmpreendedorismo
Projeto ClientesCar: Conhecendo o Projeto e Instalando o AppServProjeto ClientesCar: Conhecendo o Projeto e Instalando o AppServDesenvolvimento Web

Compartilhar

Comentários Facebook

Comentários Blog (4)

Para código / script, coloque entre [code] e [/code] para receber marcação especifica.
Forneça seu nome válido.
Forneça seu email válido.
Forneça o comentário.
Enviando, aguarde...
12/11/2021
Valeu
Responder
fabio ruivo (1) (0)
27/11/2018
muito util seu codigo, mas preciso de uma ajuda...
nesse codigo inclui um campo <select id="opcao"> e coloquei um botão modal para incluir novo item desse <select> . a inclusão do banco de dados funcionou perfeitamente, porem, preciso de uma ajuda para esse campo select ter um reload e puxar os itens do banco de dados e com isso será atualizado o meu insert
Responder
Vinícius Thiengo (0) (0)
02/12/2018
Fabio, tudo bem?

Veja se você consegue seguir o roteiro abaixo em código front-end (JavaScript / jQuery - Ajax) e em código back-end:

-> 1 - Assim que houver a inserção do novo item em back-end, retorne um valor informando sobre o sucesso (1) ou o não sucesso (0) da inserção;

-> 2 - Em caso de sucesso (retorno 1), acesse o <select id="opcao"> pelo código jQuery e então trave ele com disabled="true";

-> 3 - Logo depois acione um novo código Ajax que se comunicará com um trecho do back-end para que este trecho acesse a parte do banco de dados que tem todas as opções que têm de estar no <select>, incluindo a nova opção adicionada no item um, via tela modal. Esse trecho back-end deverá retornar os itens do <select> já formatados, cada um dentro de tags <option>;

-> 4 - Com o retorno das opções via back-end, apenas acesse o <select id="opcao">, coloque como conteúdo dele as novas tags <option> e então mude o disabled para disabled="false".

Fabio, dessa forma você conseguirá a atualização do <select> assim que houver a adição (ou remoção) de algum item.

Abraço.
Responder
03/10/2017
muito bom, obrigado por compartilhar seu conhecimento
Responder