Auto completamento form

Gli argomenti di questa pagina

  • Autocompletamento di un form
  • Richiamo del JS nella pagina
  • La funzione JS
  • Il form

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).

Richiamo del js nella pagina
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
Il file interroga_db.js
1
2
3
4
5
6
7
8
9
10
11
12
 		function carica_pagina (){
    var mytext=document.anagrafica.cognome.value;
    if (mytext != "") {
        window.document.location.href='pop_autocompletamento.php?cognome='+mytext;
    }    
}
function verify_cognome () {
    var mytext=document.anagrafica.cognome.value;
    if (mytext == "") {
        document.anagrafica.cognome.focus();
    }
}

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 codice per creare il FORM
Il file si chiama interroga_db.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 		<?php
include ('res/db_login_inc.php');
$cognome = $_REQUEST['cognome'];
if ($cognome == "") {
    echo "Occorre inserire il cognome prima degli altri dati<br />\n";
} else {
    $Query = "SELECT * FROM sql_rubrica WHERE cognome = '" . $cognome . "'";
    if (!$link = mysql_connect($Host, $User, $Password)) {
        echo mysql_error() . "<br />\n"; 
    } else {
        if (!mysql_select_db($DBName, $link)) {
            echo mysql_error() . "<br />\n"; 
        } else {
            $result = mysql_query($Query);
            $righe=mysql_num_rows($result);
            if ($righe == 1) {
                $row = mysql_fetch_array($result);
                $nome = $row['nome'];
                $indirizzo = $row['indirizzo'];
                $citta = $row['citta'];
                $cap = $row['cap'];
                $prov = $row['prov'];
            }
        }
    }
    mysql_close ($link);
}
?>
<form name="anagrafica" method="post" action="">
<label><input name="cognome" type="text" size="50" value="<?php echo $cognome; ?>" onblur="carica_pagina ()" />Cognome</label><br />
<label><input name="nome" type="text" size="50" value="<?php echo $nome; ?>" onfocus="verify_cognome ()" />Nome</label><br />
<label><input name="indirizzo" type="text" size="50" value="<?php echo $indirizzo; ?>" onfocus="verify_cognome ()" />Indirizzo</label><br />
<label><input name="citta" type="text" size="50" value="<?php echo $citta; ?>" onfocus="verify_cognome ()" />Citt&agrave;</label><br />
<label><input name="cap" type="text" size="50" value="<?php echo $cap; ?>" onfocus="verify_cognome ()" />CAP</label><br />
<label><input name="prov" type="text" size="50" value="<?php echo $prov; ?>" onfocus="verify_cognome ()" />Provincia</label><br />
<input type="submit" value="INVIA" />
</form>
<a href="pop_autocompletamento.php">Pulisci la pagina</a>
Apri Form

 

 



settore tecnico il sito di lorettabweb il Forum di sostegno
il forum il forum il forum