Auto completamento form
Gli argomenti di questa pagina
|
Autocompletamento di un form
Quel che mi ripropongo con questo esercizio è leggermente complesso.
Inserendo un valore in un campo, verificare se il valore esiste nel DB e, se esiste, riempire i campi sottostanti coi valori correlati. Usando questo form, uscendo dalla casella del Cognome dopo aver inserito il cognome, sarebbe necessario refreshare la pagina senza farla scrollare per dare al PHP la possibilità di leggere il valore inserito ed interrogare il DB riempiendo eventualmente le caselle sottostanti.
Per far questo occorrerebbe usare Ajax che al momento non conosco affatto. Quindi ho usato una funzione JS alternativa.
Richiamo del JS nella pagina
Ma andiamo in ordine.
Siccome con lo script JS che ho adottato è inevitabile lo scoll della pagina, è consigliabile mettere il form in una popup per far sì che il fastidio dello scroll della pagina sia ridotto al minimo. Ma nulla vieta di usare una pagina standard del sito.
Ovunque risieda il form occorre richiamare il JS in questa maniera ponendo il richiamo al JS tra i tag <head> </head> (aggiustare eventualmente il percorso).
1
|
<script type="text/javascript" src="js/interroga_db.js"></script>
|
La funzione JS
Nel file JS ho messo due funzioni:
una dedicata al campo cognome ed una legata agli altri controlli posti sul form:
- function carica_pagina () legata al campo cognome del form
Questa funzione controlla il valore inserito nella casella di testo cognome: se il valore non è NULL viene inserito come Querystring al link della stessa pagina che contiene il form per ricaricarla. In questo modo si da la possibilità al codice PHP della pagina ospite di interrogare il DB. - function verify_cognome () legata agli atri campi del form: se nel campo cognome il valore è NULL non permette l'inserimento di altri dati negli altri campi perchè non ha senso inserire altri valori negli altri campi.
Le due funzioni vengono chiamate così:
- onblur="carica_pagina ()" per verificare il contenuto della casella di testo dedicata al "cognome"
- onfocus="verify_cognome ()" per impedire l'inserimento dati negli altri campi se il cognome non è stato inserito
1
|
function carica_pagina (){
|
Il form
Questo script può essere copiato nella pagina che deve ospitare il form o può essere incluso usando la funzione include().
Se viene incluso si può usare l'istruzione include("interroga_db.php");.
Attenzione ad aggiustare il percorso ed il nome del file se si decide di dargli un altro nome.
In questo frammento di codice c'è una parte in puro codice PHP ed una parte frammista tra codice codice HTML e codice PHP.
- Nel codice PHP viene letta la variabile inserita dal JS nell'url alla pagina.
Se la variabile contiene un valore viene attivato il collegamento al DB per controllare l'esistenza del cognome inserito.
Se viene trovato il cognome vengono valorizzate alcune variabili. - Nel sottostante codice HTML ad ogni controllo disegnato nel form ci sono due proprietà:
per ciascuna c'è la proprietà "value" a cui viene assegnato il valore contenuto nelle varie variabili: se queste non sono valorizzate viene assegnato un NULL ( "" ) altrimenti viene assegnato il relativo valore
per il campo "cognome" viene letto l'evento "onblur" tramite il quale viene invocata la funzione JS "carica_pagina ()"
per gli altri campi viene letto l'evento "onfocus" tramite il quale viene invocata la funzione JS "verify_cognome ()".
Il file si chiama interroga_db.php
1
|
<?php
|