One of the most effective Ajax applications, is to populate a select html form, without having to reload the page. Especially when there are several options for each value in the first select, it is very handy this system, compared to typical systems with Javascript, which, without reloading the page, should have already included in the code of the page all the elements of each possible choice.
The other way is to send to the server select the value of choice, and remove the server side the corresponding values \u200b\u200bfrom the database and then reload the page and list them. Although this is sometimes inconvenient, especially in forms that have different fields with different values \u200b\u200bthat should be reported every time you recharge.
solution that provides Ajax, using any server side language, is certainly the most practical.
Basically the concept is: when I choose the first value in the select, send a request to the server for a list of values \u200b\u200bbelonging to the elite group, and insert the new content on the page.
In questo esempio vedremo come popolare le tipiche select Regione >> Provincia >> Comune, considerando di avere tutti i valori in relazione tra loro in un database:
Tabella regioni:
id_regione - regione
Tabella provincie:
id_provincia - provincia - id_regione
Tabella comuni:
id_comune - comune - id_provincia
Inizialmente avremo la nostra select(che potremmo creare dinamicamente con il nostro linguaggio lato server, oppure creando manualmente le 20 option che avranno come valore l'id della regione e come testo il nome della regione) che conterrà le 20 Regioni italiane. Al tag "select", che avrà come name "id_regione" javascript code that will match the event "onchange" of the select, it will send the id of the Region to my script that resides in a normal page. The page called in the zip pull-province.asp, will receive the id of the region and extract all the provinces belonging to that region. The content of this page, which will select the practice that contains all the provinces, will be pasted on my page in the appropriate position, with the JavaScript function called innerHTML. The
select which will be pasted, called id_provincia, will in turn JavaScript code that the event "onchange", send the id of the chosen province to the next page called rip-comuni.asp, which will filter the municipalities of the province sent, and generate the select list with all the municipalities, and its id.
At this point, with innerHTML, even this select paste in my form. I could go on indefinitely.
is the result:
But here are the zip, which contains the Access database updated with the new provinces of Sardinia, in Monza, Fermo and Barletta: Popular dynamically select ajax javascript
Remember move the database directory mdb-database (or if you put it in other directories, update the path ... and make sure that the directory has execute permissions)
0 comments:
Post a Comment