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
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');
http://www.pplware.com | Pplware 2 / 5
$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:
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(){ alert('mudei para ' + t his.val()); });
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
http://www.pplware.com | Pplware 4 / 5
:
Tudo está como o desejado e com uma velocidade fantástica. Gostaram?
Aguardo o vosso feedback.
Download: scripts
