Índice
A combinação de PHP e Jquery é uma das técnicas mais utilizadas para o desenvolvimento de aplicativos da Web dinâmicos.A biblioteca JQuery fornece muitos plug-ins Jquery que os desenvolvedores usam para dar a seus aplicativos muito dinamismo para melhorar a experiência do visitante no navegador da Internet ou em um dispositivo móvel. Continuaremos desenvolvendo a aplicação tutorial Gerar Listas Dinâmicas Com Jquery, Php E Mysql, adicionaremos formulários dinâmicos para cadastrar e modificar informações, aplicando a combinação de php e jquery podemos realizar esta tarefa sem redirecionar a página.
Também adicionaremos o plugin jquery.validator que nos permitirá validar os campos do formulário.
AtençãoPara este tutorial precisaremos do plugin que podemos baixar em http://jqueryvalidation.org/, ao baixá-lo descompactamos e teremos todos os arquivos dos quais estamos interessados apenas em dois por enquanto, que são:
jquery.validate.js qual é o próprio plugin messages_es.js que é o arquivo onde colocaremos as mensagens para o visitante e podemos traduzi-lo por idioma.
Adicionamos os arquivos ao diretório do projeto:
PROLONGAR
Se não quisermos baixar o plugin, podemos usá-lo de um servidor externo
Agora vamos criar os arquivos com o formulário que será utilizado para registrar um veículo e que invocaremos a partir do novo botão. Para fazer isso, devemos garantir que o novo botão tenha um id (identificador) para que possamos reconhecer quando ocorre um evento no qual, por exemplo, ocorre um clique. Então, o código do botão será o seguinte:
O nome do componente e o identificador podem ser iguais, mas exclusivos para cada componente html. No arquivo functions.js, escrevemos o seguinte código que detectará o clique do mouse no botão newvehiculo e invocará o arquivo hivehiculos com o formulário de inscrição.
// Invoque o formulário de registro do veículo $ (function () {$ ("# newvehiculo"). Click (function () {$ .get ("http: //localhost/proyectos/agenciaautos/altavehiculos.php", function (data) {$ ("# forms"). html (data); // Eu pego o resultado da página e insiro os dados nos formulários div});});}); Em seguida, criamos o formulário de registro que se chamará altavehiculos.php
Nós incorporamos as bibliotecas necessárias no cabeçalho para poder trabalhar com jquery e validar os campos
Criamos alguns estilos para dar um design e ordem à forma. Para o exemplo, ele pode ser usado no mesmo arquivo ou em um arquivo de folha de estilo separado e, a seguir, adicionado ao cabeçalho.
Em seguida, escrevemos o código para salvar os dados e o código do formulário para capturar os dados
$ value) {$ _POST [$ key] = mysql_real_escape_string ($ value); } $ sql = "INSERT INTO` vehicles` (` vehicle_idtype`, `features`,` brandid`, `modelid`,` photo1`) VALUES ('{$ _POST [' vehicle_idtype ']}', '{$ _POST [ 'características']} ',' {$ _POST ['brand id']} ',' {$ _POST ['model id']} ',' {$ _POST ['photo1']} ') "; mysql_query ($ sql) ou die (mysql_error ()); echo "Registro concluído."; }?> var13 -> // Eu consulto os veículos para preencher a seleção do tipo de veículo.
Seleção de veículos
Eu também crio as funções Jquery para relacionar as instruções no formulário de registro
// selecione o registro de veículos e marcas relacionadas $ (function () {$ ("# registro de veículos"). change (function () {vehicle = $ (this) .val (); // Valor selecionado $ .get ("http : //localhost/proyectos/agenciaautos/marcas.php?idvehiculo="+vehiculo, function (data) {$ ("# altamarca"). html (data); // Pego o resultado da página e insiro os dados no combo});});}); // selecionar marcas e modelos relacionados $ (function () {$ ("# highbrand"). change (function () {brand = $ (this) .val (); // Valor selecionado $ .get ("http: / /localhost/proyectos/agenciaautos/modelos.php?idmarca="+marca, function (data) {$ ("# altamodelo"). html (data); // Pego o resultado da página e insiro os dados no select} );});}); Depois de concluído, se executarmos e pressionarmos o novo botão, o formulário de registro deverá aparecer da seguinte forma:
// validação do formulário $ (document) .ready (function () {$ ("# frmalta"). validate ({lang: 'es' // ou qualquer opção de idioma que você tenha.});}); Então no componente que queremos validar adicionamos a classe necessária, ou seja, o elemento não pode ficar vazio ou sem dados.
As classes de validação podem ser encontradas no arquivo de mensagem. Exemplo de validação
Validar um e-mail:
Valide uma data:
Valide um número:
Portanto, se adicionarmos a classe necessária ao nosso formulário para o elemento textarea, por exemplo, e no caso de instruções select, devemos deixar a primeira opção em branco, então se nada for selecionado, o erro ocorrerá e o formulário não será enviado.
Caracteristicas
Seleção de modelo
Por fim, se preenchermos o formulário e clicarmos no botão Salvar, o formulário será enviado a si mesmo fazendo uma chamada jquery para a mesma página altavehiculos.php, que envia o flag enviado com o valor 1 e então ativa a inserção na tabela MySQL.
Um detalhe que falta fazer seja com jquery ou redirecionando da forma tradicional, é que quando os dados são salvos a lista do topo é atualizada, pois o formulário de registro desaparece, mas não temos nenhum evento para irrigar a lista de veículos, portanto devemos adicionar a chamada para que a lista seja exibida dentro da camada da lista que usamos anteriormente no outro tutorial, desta forma podemos registrar informações se redirecionando a página ou fazendo tarefas em segundo plano sem que o usuário tenha que redirecionar a página ou para dar mais interatividade ou transparência à aplicação web, também permite o reaproveitamento do código-fonte por ser compatível com qualquer navegador e dispositivo compatível com javascript.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo
