Come get in una variabile il valore della selezione di un Select / Drop Down Menu PHP o HTML

Sto cercando di colbind 2 menu a discesa, quindi nel primo visualizzo un elenco di paesi e in base alla selezione del paese, visualizzo un elenco delle città per il paese selezionato.

Ho il mio file index.php che carica correttamente tutti i paesi come visto in questa image:

inserisci la descrizione dell'immagine qui

Codice per caricare i miei paesi

<select name="country" id="country"> <?php $db = pg_connect("$db_host $db_name $db_username $db_password"); $query = "SELECT country FROM countries"; $result = pg_query($query); if (!$result) { echo "Problem with query " . $query . "<br/>"; echo pg_last_error(); exit(); } printf ("<option value=Select>Select a Country</option>"); while($myrow = pg_fetch_assoc($result)) { printf ("<option value=$myrow[country]>$myrow[country]</option>"); } ?> </select> 

Ora sto cercando di fare lo stesso in base alla selezione del precedente "Seleziona" ma non funziona. Il problema che sto riscontrando sta nel select il valore selezionato nel paese, perché se inserisco un valore di un paese come: $ query = "SELEZIONA città DA città where paese = Albania"; allora funziona. Inoltre ho provato a printingre il valore del paese selezionato: (echo $ selectedCountry;) e non printing nulla, quindi non indovino nè $ selectedCountry = $ _GET ['country']; o $ selectedCountry = $ _POST ['country']; stanno ottenendo il valore del paese selezionato.

 <select name="city" id="city"> <?php $db = pg_connect("$db_host $db_name $db_username $db_password"); $selectedCountry = $_GET['country']; $selectedCountry = $_POST['country']; echo $selectedCountry; $query = "SELECT city FROM cities where country = ' $selectedCountry '"; $result = pg_query($query); if (!$result) { echo "Problem with query " . $query . "<br/>"; echo pg_last_error(); exit(); } printf ("<option value=Select>Select a City</option>"); while($myrow = pg_fetch_assoc($result)) { printf ("<option value=$myrow[city]>$myrow[city]</option>"); } ?> </select> 

Grazie mille in anticipo

AGGIORNARE

Questo è ciò che vedo nel primo carico. Dove il Paese Seleziona è caricato con tutti i valori come nell'image sopra e la città Seleziona è vuota (solo il valore "Seleziona una città") in attesa di essere caricata con i valori in base alla selezione del paese.

inserisci la descrizione dell'immagine qui

ULTIMO AGGIORNAMENTO – Dal suggerimento Borna

Borna,

Ho provato il tuo suggerimento, sotto il codice esatto che sto usando. Usando due paesi come esempio. Tuttavia, le città sono vuote al primo carico e quando seleziono un paese nulla carica in città Seleziona e ottengo la seguente schermata. Sembra che in realtà non stia chiamando / eseguendo getCities.php:

inserisci la descrizione dell'immagine qui

index.html

 <!DOCTYPE html> <html> <head> <script> function populateCities(citiesSelectBoxOptions){ document.getElementById("city").innerHTML = citiesSelectBoxOptions; } function httpGetAsync(theUrl, callback) { alert(theUrl); var xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) callback(xmlHttp.responseText); } xmlHttp.open("GET", theUrl, true); // true for asynchronous xmlHttp.send(null); } </script> </head> <body> <select name="country" id="country" onchange="httpGetAsync('http://localhost/FillCity/getCities?country=' + this.value, populateCities)"> <option value="Angola">Angola</option> <option value="Spain">Spain</option> </select> <select name="city" id="city"> </select> </body> </html> 

getCities.php

 <?php include("config.php"); $db = pg_connect("$db_host $db_name $db_username $db_password"); $selectedCountry = $_GET['country']; echo "country: " .$country; $query = "SELECT city FROM cities where country = ' $selectedCountry '"; $result = pg_query($query); if (!$result) { echo "Problem with query " . $query . "<br/>"; echo pg_last_error(); exit(); } printf ("<option value='Select'>Select a City</option>"); while($myrow = pg_fetch_assoc($result)) { printf ("<option value='$myrow[city]'>$myrow[city]</option>"); } ?> 

AGGIORNARE

Se eseguo http: // localhost / FillCity / getCities? Country = Spain questo è ciò che ottengo

inserisci la descrizione dell'immagine qui

Se eseguo solo http: //localhost/FillCity/getCities.php, ottengo: (Ricevo la parola paese perché inserisco ed echo $ country nel codice per vedere il paese selezionato)

inserisci la descrizione dell'immagine qui

Questa è la mia cartella FillCity sotto il mio localhost (var / www / html)

inserisci la descrizione dell'immagine qui

Ed ecco cosa vedo quando eseguo Index.html per la prima volta con Angola come paese predefinito.

inserisci la descrizione dell'immagine qui

Se seleziono un paese, la Spagna, ad esempio questo è quello che ottengo

inserisci la descrizione dell'immagine qui

ULTIMO AGGIORNAMENTO

Quando apro il file .html e seleziono un paese, questo è ciò che ottengo (printing ancora quel messaggio sullo schermo):

inserisci la descrizione dell'immagine qui

Una volta che clicco su OK, functionrà e potrò vedere tutte le città per il paese (ma ovviamente non vorrei che il messaggio saltasse fuori)

inserisci la descrizione dell'immagine qui

Grazie ancora

Bene, quello di cui hai veramente bisogno è una chiamata AJAX che ti permetta di comunicare con il server senza ricaricare una pagina. Tutto quello che devi fare è submit una nuova richiesta HTTP con un parametro country per get l'elenco delle città in esso contenute. Il modo corretto sarebbe quello di submit (risposta HTTP) solo i dati (città) in JSON o in formato simile, e non la sua presentazione anche (html), ma per semplicità, puoi continuare a lavorare come hai iniziato (restituisci i dati con html) .

Inizia separando il codice che genera le opzioni selectBox HTML delle città in un altro script. Lo script verrà utilizzato per get l'elenco delle città in un determinato paese utilizzando AJAX (libreria XMLHttpRequest).

Dai un'occhiata a questo, è una soluzione funzionante del tuo problema. La richiesta HTTP viene inviata each volta che l'utente cambia l'opzione countrySelectBox, in questo modo la casella di selezione delle città viene aggiornata each volta che è necessario. Tutto quello che devi fare è cambiare l'url nell'attributo onchange che punta al tuo script (in precedenza ho detto che dovresti spostare il secondo block di codice in uno script separato).

 <!DOCTYPE html> <html> <head> <script> function populateCities(citiesSelectBoxOptions){ document.getElementById("city").innerHTML = citiesSelectBoxOptions; } function httpGetAsync(theUrl, callback) { alert(theUrl); var xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) callback(xmlHttp.responseText); } xmlHttp.open("GET", theUrl, true); // true for asynchronous xmlHttp.send(null); } </script> </head> <body> <select name="country" id="country" onchange="httpGetAsync('www.yourdomain.com/getCities.php?country=' + this.options[this.selectedIndex].value, populateCities)"> <option value="Country1">Country 1</option> <option value="Country2">Country 2</option> </select> <select name="city" id="city"> </select> </body> </html> 

getCities.php

 <?php $db = pg_connect("$db_host $db_name $db_username $db_password"); $selectedCountry = $_GET['country']; $query = "SELECT city FROM cities where country = ' $selectedCountry '"; $result = pg_query($query); if (!$result) { echo "Problem with query " . $query . "<br/>"; echo pg_last_error(); exit(); } printf ("<option value='Select'>Select a City</option>"); while($myrow = pg_fetch_assoc($result)) { printf ("<option value='$myrow[city]'>$myrow[city]</option>"); } ?> 

MODIFICARE:

httpGetAsync è nativo (viene utilizzato solo javascript puro / vaniglia. Non vengono utilizzate altre librerie) Funzione javascript che consente di submit una richiesta HTTP senza ricaricare una pagina. Vedo che stai usando jQuery, che nasconde la complessità di questa function, come form-> submit, ma ti consiglio di sapere come funziona httpGetAsync, perché usare un jQuery per un task così semplice è eccessivo.

Non hai bisogno di questa function javascript

 function getCity(countryId) 

Invece, dovresti inserire il tuo codice che comunica con il database in un file .php, non in javascript (ricorda, javascript è un client, viene eseguito sul computer client, ad esempio il browser, mentre php viene eseguito sul server). Il tuo SQL non dovrebbe mai essere scritto in javascript. Il codice lato client non può comunicare direttamente con un database, solo attraverso la codifica lato server. Per get ciò, è necessario restituire un valore dello script PHP getCities.php al client (javascript) come risposta HTTP.

Quando si invia una richiesta HTTP a un file .php, tali script vengono eseguiti su un server e tutto ciò che si dice "echo" o "print", alla fine dello script, viene inviato automaticamente come risposta HTTP. Non è necessario scrivere alcun codice per submit una risposta HTTP. È fatto automaticamente. Devi solo echo / printingre tutto ciò che ti serve sul lato client. Nel tuo caso, devi printingre le opzioni per un determinato paese.

Come lo script sa per quale paese ha bisogno di select città dal database? Bene, si invia la richiesta HTTP con un parametro "paese". Questo è ciò che la tua Form sta facendo automaticamente quando lo invii. Tutti i tag HTML che si trovano all'interno di Form e con un attributo di nome impostato, verranno inviati come richiesta nella richiesta HTTP. Ma, dato che non puoi usare submit, devi fare questo manuale.

Per submit un parametro all'interno della richiesta HTTP GET è molto semplice. Dai un'occhiata al seguente URL:

 localhost/getCities?country=countryX&someOtherParam=something&myThirdParam=something3 

Sul lato server, verranno popolate le seguenti variables:

 $_GET["country"] // value is 'countryX' $_GET["someOtherParam"] // value is 'something' $_GET["myThirdParam"] // value is 'something3' 

Per saperne di più su come funzionano GET e POST, e qual è la differenza, controlla questo

Inizia creando un file getCities.php e copia il codice incollato che comunica con il database e genera le opzioni della città. In pratica è ciò che hai già fatto, devi solo inserire quel codice in un file .php separato. Quindi, quando un client (browser) richiede un elenco di città in un determinato paese, invierai una richiesta HTTP (utilizzando la function httpGetAsync ()) per get quell'elenco dal server.

Nel tuo index.php copia incolla questo script

 <script> function populateCities(citiesSelectBoxOptions){ document.getElementById("city").innerHTML = citiesSelectBoxOptions; } function httpGetAsync(theUrl, callback) { alert(theUrl); var xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) callback(xmlHttp.responseText); } xmlHttp.open("GET", theUrl, true); // true for asynchronous xmlHttp.send(null); } </script> 

Successivamente, metti l'attributo onchange nella casella di selezione, ricorda, è tutto in minuscolo, non in Change.

 <select name="country" id="country" onchange="httpGetAsync('localhost/getCities?country=' + this.value, populateCities)"> 

Per qualsiasi domanda basta chiedere … 🙂

Bene, suppongo che un modo per farlo sarebbe con jQuery.

Ci sono probabilmente diversi modi per farlo, ma quello che potresti fare è caricare tutte le città nel menu a discesa della città, indipendentemente dal Paese, ma modificare la printf per le opzioni di città come questa.

 $query = "SELECT city, country FROM cities"; .... while($myrow = pg_fetch_assoc($result)) { printf ("<option class="$myrow[country] city_select" value=$myrow[city]>$myrow[city]</option>"); } 

E poi nella javascript per la pagina, avere qualcosa di simile

 $('#country').bind('change', function(){ var country = $(this).val(); $('#city option.city_select').hide(); $('#city option.'+country+'').show(); }); 

Non è necessariamente la soluzione più elegante, però.

Ti mancano le virgolette all'interno della tua opzione, dovrebbe essere qualcosa di simile

 <option value=$myrow['city']>$myrow['city']</option> 

prova questo