Piccole lotte quotidiane

Checkbox in serie con javascript

30 May 2006

In questo post vedremo come implementare nella nostra applicazione web un sistema di checkbox per selezionare più elementi di una tabella (un pò come accade nelle webmail in cui possiamo spuntare i messaggio da eliminare oppure “selezionare tutti” / “deselezionare tutti”).
Il procedimento è molto semplice:
Innanzitutto occorre fare in modo che tutte le checkbox siano richiamabili come se fossero una sola unità (chiamata collection) attribuendo uguale ID e NAME,mentre il VALUE cambierà per ogni elemento.
L’esempio scaricabile riporta un utilizzo tipico di tale tecnica, che rientra perfettamente nelle nostre esigenze.
La tabella ha 10 checkboxes “chkelimina” con VALUE differenti e tre pulsanti per compiere differenti operazioni.
Ogni funzione javascript utilizza la proprietà “all” dell’oggetto document per recuperare tutta la collection associandola ad una variabile denominata “caselle”:

var caselle=document.all.item("chkprova")

I pulsanti “Seleziona tutto” e “Deseleziona tutto” sono basati su un ciclo e scorrono tutti i “chkprova” impostandone la proprietà “checked” (selezionato) a true oppure false.
Il pulsante “Valori” è leggemente più complesso poichè recupera il VALUE dell’elemento dopo aver verificato che sia selezionato, costruendo una stringa con i VALUE e visualizzando un messaggio nel caso in cui non sia stato selezionato nulla.
Come abbiamo visto è stato molto semplice implementare la funzionalità che avevamo proposto ma siamo ancora lato Client…cosa accadrebbe se volessimo inviare i valori selezionati ad una pagina asp oppure php per un’ipotetica eliminazione delle relative righe da un database.
L’operazione è ancora una volta molto semplice e richiede un’intervento minimo a livello di codice.

Supponiamo di avere una rubrica telefonica con i nostri contatti e che, aprendo la nostra applicazione web vengano visualizzati in una tabella con i dati anagrafici ed i recapiti.
Al codice che costruisce la tabella (un ciclo ripetuto tante volte quante sono le righe del db) andremo ad aggiungere l’istruzione di creazione della checkbox “chkelimina” (il nome è a vostra discrezione,tuttavia cercate i utilizzare nomi che richiamino la funzione che esegue l’oggetto) facendo in modo che il VALUE sia attribuito in base all’identificativo del record nel db.
Una volta fatta questa operazione potremo inserire nella pagina i pulsanti “Seleziona tutto” e “Deseleziona tutto” che già funzionerebbero perfettamente (attenzione a cambiare il nome della checkbox nel caso vogliate copiare/incollare il codice dell’esempio).

Come ultimo passo dovremo aggiungere prima e dopo il tag “<table>” il tag FORM a cui passeremo come METHOD la pagina che eseguirà la DELETE nel db ed un pulsante che esegua il Submit se sono presenti elementi selezionati (il codice per il controllo è presente nel pulsante “Valori” dell’esempio). Magari possiamo aggiungere un messaggio di conferma tipo “Eliminare i contatti selezionati?” implementabile come segue:


var conferma=window.confirm('eliminare i contatti selezionati?');
if (conferma)
nomeform.submit();

La parte client è finita!!

La parte server, che ci crediate o no, è già completa al 99% perchè non dovremo fare altro che impostare l’istruzione delete nel modo che segue:

DELETE FROM nometabella WHERE idrecord IN (valori “chkelimina” passati dal form)

Le collection di checkbox,se inserite in un form, restituiscono una “catena” di VALUES separati da virgola in base agli elementi selezionati.
Tale “catena” si adatta perfettamente alla sintassi richiesta dalla clausola sql IN che ci permette di inserire tanti valori in OR nelle condizioni WHERE
Supponendo quindi di aver selezionato dalla tabella gli elementi con VALUE 5 e 7 la nostra istruzione delete sarebbe:

DELETE FROM nometabella WHERE idrecord IN (5,7)

Opzionalmente possiamo inserire il codice per ritornare alla lista dopo aver eseguito la select.

La nostra implementazione è ultimata…mi auguro ancora una volta che possiate trarre beneficio da quanto riportato e sono a vostra disposizione per chiarimenti, commenti e insulti
Ciauz
Vittorio B.

Partorito da Vittorio Blogghe alle 11:12
Tags: Programmazione