script javascript e ajax per form dinamico.

megarospo

Utente Attivo
25 Set 2007
147
0
0
Buon giorno. Vi riporto uno script che permette, insieme ad altgri, di cgreare delle liste dinamiche per un form. In particolare regioni e relative province.
il mio problema è questo. quendo vado a cliccare su "invia" nel database viene memorizzato l'ID della regione e delle provincia. E' possibile secondo voi far memorizzare il nome reale? (es: Toscana, Firenze).

Ho provato ha modificare la funzione "addOption" in questo modo: option.value = text, ma non ha funzionato.


var xmlHttp = getXmlHttpObject();

function loadList(tb, id){
xmlHttp.open('GET', 'request.php?table='+tb+'&id='+id, true);
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.send(null);
}
function addOption(select, value, text) {
//Aggiunge un elemento <option> ad una lista <select>
var option = document.createElement("option");
option.value = value,
option.text = text;
try {
select.add(option, null);
} catch(e) {
//Per Internet Explorer
select.add(option);
}
}
function getSelected(select) {
//Ritorna il valore dell'elemento <option> selezionato in una lista
return select.options[select.selectedIndex].value;
}
function stateChanged() {
if(xmlHttp.readyState == 4) {
//Stato OK
if (xmlHttp.status == 200) {
var resp = xmlHttp.responseText;

if(resp) {
//Le coppie di valori nella striga di risposta sono separate da ;
var values = resp.split(';');
//Il primo elemento è l'ID della lista.
var listId = values.shift();
var select = document.getElementById(listId);
//Elimina i valori precedenti
while (select.options.length) {
select.remove(0);
}

if(listId == 'regioni') {
addOption (select, 0, '-- Selezionare regione --');
}
var limit = values.length;

for(i=0; i < limit; i++) {
var pair = values.split('|');
//aggiunge un elemento <option>
addOption(select, pair[0], pair[1]);
}
}
} else {
alert(xmlHttp.responseText);
}
}
}

function getXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}

per gli altri file utilissimi vedi: http://sviluppare.in.rete.googlepages.com/liste-ajax :book:
 
ok.. ma se volessi utilizzare 3 o 4 combo una concatenata all'altra?

Per esempio:
la prima aggiorna la seconda con le provincie di quella regione.
la seconda aggiorna la terza con i comuni di quella provincia.
la terza aggiorna la quarta con le vie di quei comuni.

Il tutto vorrei poterlo gestire con delle query sql.

Nella tabella delle regioni ho una regione con varie provincie.
Nella tabella delle provincie ho una provincia con dei comuni.
Nella tabella dei comuni ho dei comuni con delle vie.

Si può fare?? Sto diventando matto! :incazz2:
 
Scrip javascript e ajax per form dinamico

Buon giorno. Vi riporto uno script che permette, insieme ad altgri, di cgreare delle liste dinamiche per un form. In particolare regioni e relative province.
il mio problema è questo. quendo vado a cliccare su "invia" nel database viene memorizzato l'ID della regione e delle provincia. E' possibile secondo voi far memorizzare il nome reale? (es: Toscana, Firenze).

Scusa megarospo. Sto sbattendo la testa proprio su questo problema e non trovo soluzione..:crying:
Ho letto che hai risolto!!
Saresti cosi' gentile da dirmi come ?
Grazie mille
Eddie
 
Sono a tua disposizione.

Sul file che viene visualizzato metti questo script

<script type="text/javascript" src="Conn/listsreg.js"></script>


e poi nel body:

<tr>
<td><span class="Stile5"><span class="Stile6"><strong>Provincia e Comune </strong></span></span><span class="oggetto">
<label for="label"></label>
</span></td>
<td><span class="Stile5"><span class="Stile6">
<select name="provincia" id="provincereg" onChange="loadList('comuni', getSelected(this))" >
</select>
<label for="comuni"></label>
<select name="comune" id="comuni">
</select>
</span></span></td>
</tr>
<tr>

poi un file con nome: listsreg.js – che contiene:

var xmlHttp = getXmlHttpObject();

function loadList(tb, id){
xmlHttp.open('GET', 'Conn/requestreg.php?table='+tb+'&id='+id, true);
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.send(null);
}
function addOption(select, value, text) {
//Aggiunge un elemento <option> ad una lista <select>
var option = document.createElement("option");
option.value = value,
option.text = text;
try {
select.add(option, null);
} catch(e) {
//Per Internet Explorer
select.add(option);
}
}
function getSelected(select) {
//Ritorna il valore dell'elemento <option> selezionato in una lista
return select.options[select.selectedIndex].value;
}
function stateChanged() {
if(xmlHttp.readyState == 4) {
//Stato OK
if (xmlHttp.status == 200) {
var resp = xmlHttp.responseText;

if(resp) {
//Le coppie di valori nella striga di risposta sono separate da ;
var values = resp.split(';');
//Il primo elemento è l'ID della lista.
var listId = values.shift();
var select = document.getElementById(listId);
//Elimina i valori precedenti
while (select.options.length) {
select.remove(0);
}

if(listId == 'provincereg') {
addOption (select, 0, '-- Selezionare Provincia --');
}
var limit = values.length;

for(i=0; i < limit; i++) {
var pair = values.split('|');
//aggiunge un elemento <option>
addOption(select, pair[0], pair[1]);
}
}
} else {
alert(xmlHttp.responseText);
}
}
}

function getXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}


e un altro file, chiamato: requestreg.php, nella stessa cartella, che contiene:

<?php require 'dbconfig.php';
$conn = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD) or die;
mysql_select_db(DB_NAME) or die;
//I valori in input vanno verificati
//id deve essere un valore numerico
$pid = (int)$_REQUEST['id'];
//maschera eventuali caratteri speciali in table
$tb = mysql_real_escape_string($_REQUEST['table'], $conn);

switch($tb) {
case 'provincereg':
$sql="SELECT id, provincia FROM `$tb` ORDER BY provincia";
break;
case 'comuni':
$sql="SELECT id, comune FROM `$tb` WHERE id_provincia=$pid ORDER BY comune";
break;
}
//Il primo elemento della risposta è il nome della tabella (= attributo ID del tag select)
$out="$tb;";
if($result = mysql_query($sql, $conn)) {
while ($row = mysql_fetch_row($result)) {
$out .= $row[0] . '|' . $row[1] . ';';
}
}
//Rimuove il carattere ; in coda
echo rtrim($out, ';');
?>



Ciao!!
 
Sono a tua disposizione.

Sul file che viene visualizzato metti questo script

<script type="text/javascript" src="Conn/listsreg.js"></script>

etc....


Ciao!!

Ciao megarospo,
innanzitutto grazie della risposta e dell'interesse..è rara tanta cortesia.

Devo dirti che ancora nno ho testato il tutto , ma leggendolo ( e quindi cercando la differenza ) non sono riuscito a trovare nulla di diverso rispetto ai file precedenti , salvo un tuo modo di rinominare.

Ho anche fatto un "compare" dei file con Textwrangler degli originali ( list.js, Request.php) con il codice chemi hai mandato tu, mentre quello che potrebbe essere l ' Index l'ho controllato ad occhio ( sono delle select

Non riesco a trovare alcuna differenza...

Sei sicuro di avermi inviato l'esempio che permette di "postare" nella tabella il "valore" e non l'Id ??

Se si , sarà bene che mi faccia fare una visita oculistica!! :-)

Grazie in anticipo se riescirai a delucidarmi ..
Ciao
Ed
 
Scusa, ma sono passati un paio di anni da quel codice ed ero convinto che fosse tutto lì. invece no!! :crying:
mancava il codice che era su un altro file ancora. Quello che elabora i dati inviati dal file del form.

Questo è il codice:

////codice per trasformare il valore numerico di provincia e comune inviato dal form nel rispettivo valore testuale ////////////////////
mysql_select_db($database_oggetto, $oggetto);
if (isset($_POST['provincia']))
{
$trasfprovincia= $_POST['provincia'];
$provinciaselect = ("SELECT provincia FROM province WHERE province.id=$trasfprovincia");
$provinciaSQL = mysql_query($provinciaselect, $oggetto) or die(mysql_error());
$foundprovincia = mysql_num_rows($provinciaSQL);
if(mysql_num_rows($provinciaSQL))
{ //se la query ha restituito qualche riga (altrimenti il fetch darebbe errore)
$foundprovincia=mysql_fetch_assoc($provinciaSQL); // assegna la riga ad un array associativo
}
if (isset($foundprovincia))
{
$okprovincia=$foundprovincia['provincia'];
$okprovinciaescape = mysql_escape_string($okprovincia);
$controllo_provincia='ok';

}}
else
{
echo "<div align=\"center\"><h3><span class=\"Stile1\">Errore.</span></h3></div><br>";
}


If (isset($_POST['comune']))
{
$trasfcomune= $_POST['comune'];
$comuneselect = ("SELECT comune FROM comuni WHERE comuni.id=$trasfcomune");
$comuneSQL = mysql_query($comuneselect, $oggetto) or die(mysql_error());
$foundcomune = mysql_num_rows($comuneSQL);
if(mysql_num_rows($comuneSQL)) //se la query ha restituito qualche riga (altrimenti il fetch darebbe errore)
{
$foundcomune=mysql_fetch_assoc($comuneSQL); // assegna la riga ad un array associativo
}
if (isset($foundcomune))
{
$okcomune=$foundcomune['comune'];
$okcomuneescape = mysql_escape_string ($okcomune);
$controllo_comune='ok';
}}
else
{
echo "<div align=\"center\"><h3><span class=\"Stile1\">Errore! </span></h3></div><br>";
}

Ora dovrebbe essere tutto. :fonzie:
(P.S. preciso che non sono un programmatore, ma solo uno smanettone e che quindi ci sarà sicuramente tanto da migliorare nel codice :book:)
 
Problema con listId

Ho copiato il codice alla lettera modificando solo i files di config ma c'è qualcosa che non va.

Alla riga 39 del file lists.js la console mi da quest'errore
Codice:
select is null
[Break on this error] while (select.options.length) {

ho provato a risolverlo ma nulla. ho anche notato che se cambio alla riga 37 di lists.js
Codice:
var select = document.getElementById(listId);
con
Codice:
var select = document.getElementById('regioni');
o province, il campo funziona ma poi lo script sovrascrive, una volta selezionata la regione, la lista delle province a quella delle regioni nello stesso select.

Quindi, ecco qualche domanda (scusate se rompo) ;)

1) Come si può risolvere questo problema?

2) Nel mio form ho due campi per ogni provincia e regione (un indirizzo di spedizione e uno di fatturazione). C'è modo di far funzionare lo script con entrambi?

3) È possibile inserire anche il comune con il select a cascata? (ho letto i post precedenti ma ci ho capito poco. Ho comunque un database mysql con tutti i comuni d'Italia)

4) Possiamo implementare, magari tutti insieme, lo script con jQuery? Credo che lo renderebbe più leggero e di facile lettura.

Grazie per il tuo tempo megarospo e per quello di chiunque voglia aiutarmi.
Mike
 
Ho copiato il codice alla lettera modificando solo i files di config ma c'è qualcosa che non va.

Alla riga 39 del file lists.js la console mi da quest'errore
Codice:
select is null
[Break on this error] while (select.options.length) {

ho provato a risolverlo ma nulla. ho anche notato che se cambio alla riga 37 di lists.js
Codice:
var select = document.getElementById(listId);
con
Codice:
var select = document.getElementById('regioni');
o province, il campo funziona ma poi lo script sovrascrive, una volta selezionata la regione, la lista delle province a quella delle regioni nello stesso select.

Quindi, ecco qualche domanda (scusate se rompo) ;)

1) Come si può risolvere questo problema?

2) Nel mio form ho due campi per ogni provincia e regione (un indirizzo di spedizione e uno di fatturazione). C'è modo di far funzionare lo script con entrambi?

3) È possibile inserire anche il comune con il select a cascata? (ho letto i post precedenti ma ci ho capito poco. Ho comunque un database mysql con tutti i comuni d'Italia)

4) Possiamo implementare, magari tutti insieme, lo script con jQuery? Credo che lo renderebbe più leggero e di facile lettura.

Grazie per il tuo tempo megarospo e per quello di chiunque voglia aiutarmi.
Mike

wow...vedo che il problema è ancor atttuale!! :)

In realtà e in sè, non sarebbe un problema postare l'ID delle regioni/province/Comuni nella tbl che deve contenere questo tipo di dati. Anzi, volendo valutare la cosa da un punto di vista prestazionale, (e secondo le indicazioni di ottimizzazione dei db ) sarebbe più performante del postare la stringa della rispettiva voce.
Altrettanto vero è però che , nel momento in cui devi rendere accessibili (leggi "leggibili") i dati all'utente finale , non puoi certamente presentargli gli Id.
Questo si traduce in una serie di query " SELECT * FROM tbl LEFT JOIN (qualcosa) WHERE (qualcosa) che secondo me, ma mi piacerebbe approfondire e farò delle ricerche in merito, appesantiscono il caricamento delle pagine.
Preferisco a questo punto avere una piccola ridondanza nel db , ma rendere il caricamento delle pagine più fluido.
Ripeto , non sono un esperto al momento, ma " a naso" , e sentendo chi si occupa di web quotidianamente , le query in apertura di pagina sono comunque un grosso collo di bottiglia.

Per questo insisto nel voler postare i valori al posto dell'Id. Almeno per testare direttamente la diffrenza tra le due possibilità.
Domani provo anch'io il codice completo di megarospo...vi tengo aggiornati.

Grazie comunque; è piacevole trovare qualcuno che dedica del tempo per far crescere gli altri . Chiunque sia . Programmatore, appassionato, o qualsiasi altra cosa sia .

Buon giovedì
Ciao
Ed
 

Discussioni simili