Programação WEB é à Quinta-feira!

Transcrição

1 Programação WEB é à Quinta-feira! Date : 7 de Julho de 2011 Por Pedro Peixoto para o PPLWARE Aprenda a preencher um elemento É muito frequente a necessidade de, em formulários HTML, questionar o utilizador acerca da sua morada. Quando se pretende uma base de dados organizada, isenta de erros e fácil de usar, é usual separar essa informação em localidade, concelho, distrito, código postal para além de restringir a introdução de dados através de elementos Até há algum tempo atrás era muito frequente ver páginas a serem actualizadas aquando da escolha do distrito, de forma a carregar os concelhos correspondentes. Era igualmente possível implementar essa funcionalidade carregando logo todos os concelhos possíveis e usar javascript para depois actualizar o Para começar vamos criar o mini-formulário onde o utilizador fará a selecção do distrito. Criamos inicialmente um elemento Pplware 1 / 5

2 Adicionamos ainda um elemento com o id concelhos que irá apresentar no final a lista dos concelhos relativas ao distrito escolhido. Para testar vamos guardar a página com o nome index.php. Eis o resultado: Esquecemos por momentos esta página e vamos agora criar uma outra página PHP que dado um distrito por parâmetro escreva um elemento Obtemos o distrito escolhido através do método GET: $distrito=$_get['distrito']; De seguida necessitamos de um array que faça a associação entre os distritos e os concelhos que lhe pertencem (exemplifico com Aveiro, Lisboa e Viseu mas no ficheiro fonte tem o array completo): $concelhos['aveiro'] =array('águeda','albergaria-a-velha','anadia','ar ouca','aveiro','castelo de Paiva','Espinho','Estarreja','Santa Maria d a Feira','Ílhavo','Mealhad','Murtosa','Oliveira de Azeméis','Oliveira do Bairro','Ovar','São João da Madeira','Sever do Vouga','Vagos','Vale de Cambra'); $concelhos['lisboa']=array('arruda dos Vinhos','Azambuja','Cadaval','C ascais','lisboa','loures','lourinhã','mafra','oeiras','sintra','sobral de Monte Agraço','Torres Vedras','Vila Franca de Xira','Amadora','Odi velas'); Pplware 2 / 5

3 $concelhos['viseu'] =array('armamar','carregal do Sal','Castro Daire', 'Cinfães','Lamego','Mangualde','Moimenta da Beira','Mortágua','Nelas', 'Oliveira de Frades','Penalva do Castelo','Penedono','Resende','Santa Comba Dão','São João da Pesqueira','São Pedro do Sul','Sátão','Sernanc elhe','tabuaço','tarouca','tondela','vila Nova de Paiva','Viseu','Vouz ela'); E fazemos então a construção de um echo ' '; Guardamos esta página com o nome concelhos.php. Testando o script com Aveiro o resultado é o esperado. (Atenção que há diferenciação entre maiúsculas e minúsculas no nome dos distritos). Temos então os ficheiros PHP prontos, vamos agora juntar um pouco de jquery para completar. Incluímos então no head do ficheiro índex.php o jquery: Pplware 3 / 5

4 Para programar o evento JS que actualizará a lista de concelhos vamos usar apenas jquery. Como vimos nos artigos anteriores é necessário fazê-lo entre as tags. O evento a usar será o.change() que será disparado quando o distrito for alterado. $('#distritos').change(function(){ his.val()); }); alert('mudei para ' + t Vamos agora modificar o conteúdo do evento changede modo a conseguir o nosso objectivo. Como nós pretendemos que o concelhos passe a ter o conteúdo da página PHP concelhos.php vamos usar a função.load(), ela permite colocar num determinado elemento o conteúdo do URL passado por parâmetro, usando AJAX. Não podemos esquecer que temos de indicar à pagina concelhos.php qual o distrito a consultar. $('#distritos').change(function(){ $('#concelhos').load('conc elhos.php?distrito='+escape($(this).val())); }); De notar que usámos a função JS escape para evitar erros, uma vez que existem nomes de cidades com espaços, esta função coloca a string no formato url. E temos finalmente o formulário feito. Vamos experimentar Pplware 4 / 5

5 Powered by TCPDF ( : Tudo está como o desejado e com uma velocidade fantástica. Gostaram? Aguardo o vosso feedback. Download: scripts Pplware 5 / 5