Formulário, como faço essa opção?

[Tudo Aqui Downloads]

Alô galera, queria saber o seguinte.

Como fazer um formulario da seguinte forma.

Por Exemplo:

Na parte do formulário que pedir o estado eu colocarei os estados em forma de opção.

E na parte de cidade logo abaixo de estado eu quero que só apareça as cidades referente aquele estado escolhido.

Como faço isso?

Obrigado, agradeço a ajuda desde de já.

Editado Fevereiro 10, 2008 por Tudo Aqui Downloads

[viejoyo]

você pode criar duas tabelas e cadastrar cidade por cidade ... usando claro uma chave estrangeira na tabela cidade, e quanto à esse lance de aparecerem dinamicamente as cidades no momento da escolha do Estado você terá que fazer com Ajax.

[heltonritter]

Se não quiser usar ajax que é meio difícil até para quem já sabe um tanto...

Quando a pessoa escolhe o estado, recarrega a página passando pela URL a sigla do estado selecionado, ex.: pagina.php?UF=RS

quando tiver valor de $_GET['UF'] na tabela de cidades faz um select para trazer só as siglas daquele estado.

Aí a pessoa escolhe a cidade e segue o cadastro.

Para saber quando a pessoa selecionou um estado, usa onchange="chama aqui o java script que pega a sigla do estado selecionado e recarrega a página"

[viejoyo]

E pra facilitar ainda mais ..você pode não chamar função nenhuma em js, além de facilitar pra você fazer fica mais acessível seu formulário Vide Dica do Maujor ;)

[ARD]

A melhor opção (ao menos eu prefiro) fazer da forma que o heltonritter citou, porém tu pode fazer com ajax também. Bom fiz um exemplo aqui usando prototype e array (php).

Vamos lá na página index.html:

O Javascript

<script language="javascript">
function remove()
{
    var elemento, lengOpt, i;
    elemento = document.getElementById('selectbox');
    lengOpt = elemento.options.length;
    for(i=lengOpt-1;i>=0;i--)
    {
        elemento.options[i] = null;
    } 
}
function popula_combo(novoValor)
{
    var elemento, lengOpt;
    elemento = document.getElementById('selectbox');
    lengOpt = elemento.options.length;
    elemento = elemento.options[lengOpt] = new Option(novoValor, novoValor);
}
function chamaUF()
{
    remove();
    var combo, valor
    combo = $('selectuf')
    valor = combo.options[combo.selectedIndex].value
    
    url = 'uf.php';
    pars = 'uf='+valor;
    new Ajax.Request(url,
    {
        method:'get',
        parameters: pars,
        onSuccess: function(transport){
        var resposta = transport.responseText || "no response text";
        var matriz = resposta.split(",");
        for(i=0; i <= matriz.length-1; i++)
        {
            popula_combo(matriz[i])
        }
    },
    onFailure: function(){ alert('Não foi possível encontrar as informações.') }
    });
}
</script>

O HTML

<select name="selectuf" id="selectuf" onchange="chamaUF();">
<option value="ES">ES</option>
<option value="SP">SP</option>
</select>
<select name="selectbox" id="selectbox">
<option>Selecione a cidade</option>
</select>

Página uf.php

<?php
$estados = array();
$estatos['ES'] = utf8_encode("são Mateus,são Roque do Canaa,Serra,Sooretama,Vargem Alta,Venda Nova do Imigrante,Viana,Vila Pavao,Vila Valerio,Vila Velha,Vitoria");
$estatos['SP'] = utf8_encode("Aguas de Lindoia,Aguas de Santa Barbara,Aguas de são Pedro,Agudos,Alambari,Alfredo Marcondes,Altair,Altinopolis,Alto Alegre,Aluminio,São Paulo");
echo $estatos[$_GET['uf']];
?>

T+

André

[Tudo Aqui Downloads]

Valeu galera.

É bom saber que sempre posso contar com vocês aqui do fórum.

Vou tentar fazer do jeito que vocês informaram qualquer duvida postarei novamente.

Obrigado pela ajuda de vocês.

Abraços.