[AJAX]select dinamiche

[webfrancy]

in un form devo inserire due select.

la prima contiene un elenco di citta' che mi carico da un DB (e fin qui tutto ok).

la seconda deve contenere l'elenco di scuole presenti nella citta' selezionata nella precedente.
quindi: finche' nessuna citta' e' selezionata, la select e' vuota.

quando seleziono la citta' il frammento di pagina che contiene la select vuota deve aggiornarsi e caricare una pagina php che prende dal database le scuole.

se per quella citta' non sono presenti scuole, al posto della select deve essere messo un campo di testo, in modo che l'utente possa inserire la scuola.


sapete come fare?
grazie

[floyd]

ma non hai niente come codice di partenza?
dai un occhiata qui
guarda soprattutto il js, sul server c'è java con una taglib che non so se ti va bene

[webfrancy]

Originariamente inviato da floyd
ma non hai niente come codice di partenza?
dai un occhiata qui
guarda soprattutto il js, sul server c'è java con una taglib che non so se ti va bene

grazie, purtroppo ci capisco meno di niente, a javascript e ajax sto a meno di 0.
ci vuole jsp? perche' io sono in php.. :master:

[floyd]

lato server puoi avere quello che ti pare
il lavoro maggiore è lato client, dunque js
la richiesta ajax se vuoi te la risparmi usando prototype
dovresti solo scrivere il codice per riempire la select vuota o creare il campo di testo
tipo

new Ajax.Request(
       'pagina.php',
       {method:'get',
        asynchronous:true,
        parameters:'parametro=valore&param=val...',
        onComplete:vediTu
       }
);
function vediTu(req) {
  // req è di tipo XMLHttpRequest
}

dovresti analizzare la risposta e popolare la select
comincia a fare la pagina php, deve ritornare un xml come
<?xml version=\"1.0\"?>
<result>
<value name="un valore" val="v1"></value>
<value name="un altro valore" val="v2"></value>
<value name="..." val="v3"></value>
</result>
se tornasse questo poi fai

function vediTu(req) {
  var xml = req.responseXML;
  var root = xml.getElementsByTagName('result');
  for (var i=0; i<root.getElementsByTagName('value').length; i++) {
    var attrib = root.getElementsByTagName('value').item(i).attributes;
    var text = attrib.getNamedItem('name').nodeValue;
    var value = attrib.getNamedItem('val').nodeValue;
    document.nomeform.nomeselect.options[i] = new Option(text, value);
  }
}