BitTrack » jQuery

Primi passi con jQuery – 3

Raspo — Mon, 05 Apr 2010 07:00:58 +0000

Oggi, dopo una lunga assenza, continua la guida a jQuery con la terza parte, dove vedremo in quanti modi è possibile interagire con i form HTML tipo input, bottoni, checkbox, etc…

Prima di cominciare

Ricordati di caricare la libreria jQuery nella sezione e di inserire i codici jQuery che vedremo tra poco, all’interno del canonico $(document).ready(function(){ … }); come visto nella prima lezione.

Ottenere il contenuto di un campo

Prendiamo un campo input con id esempio1, vogliamo far sì che, cliccando sul pulsante con id btn1, il contenuto del campo venga letto e mostrato all’utente in una finestra di alert.

Il codice jQuery è:

$("#btn1").click(function(){
    var testo = $("#esempio1").val();
    alert(testo);
});

Che tradotto a parole significa: quando fai click sull’elemento con id btn1, cerca l’elemento esempio1, estraine il valore e salvalo dentro una variabile testo creata sul momento; quindi, mostrami il contenuto della variabile in una finestra di alert.

Da notare l’utilizzo della funzione .val() che scritta così, senza valori tra parentesi, restituisce il valore dell’elemento, quindi il contenuto dell’input in quel momento.

Impostare il contenuto di un campo

Se invece di usare .val() come abbiamo appena fatto, mettiamo una stringa all’interno delle parentesi, la funzione non restituirà più un valore, ma imposterà quello che abbiamo indicato tra parentesi.

$("#btn2").click(function(){
   $("#esempio2").val("");
});

In questo caso, cliccando sul pulsante, il valore del campo viene azzerato, o meglio, viene impostato un valore nullo, che si scrive con due virgolette aperte e chiuse.

Conteggio dei caratteri

Per creare uno script per il conteggio dei caratteri abbiamo bisogno come al solito di un campo input di tipo text e di un area (per esempio uno span) dove inserire il numero dei caratteri.

Ed ecco il codice jQuery:

$("#esempio3").keyup(function(){
    var num = $(this).val().length;
    $("#contatore1").html(num);
});

La funzione .keyup() esegue la funzione tra parentesi ogni volta che viene premuto e rilasciato un tasto.
Tale funzione, crea al volo una variabile num dentro cui inserisce il numero dei caratteri fin’ora inseriti nel campo con id esempio3 a cui faccio riferimento con $(this) perché è l’oggetto del keyup().
In particolare, per prendere il numero di caratteri, prima uso .val(), senza valori tra parentesi, che restituisce una stringa contenente il valore dell’input, successivamente uso .length che restituisce il numero di caratteri della stringa.
Quindi, se fin’ora ho scritto nell’input “prova”, la funzione .val() mi da appunto la stringa “prova” e .lenght mi da 5.
Infine, scrivo il numero dei caratteri dentro lo span con id contatore1 usando il comando .html().

Il funzionamento di .html() è analogo a .val(), l’unica differenza sta nel fatto che la seconda viene usata per i campi input, le textarea, le select e i button, mentre la prima è valida per tutti gli altri tipi di tag html.

Conteggio dei caratteri rimanenti

Per ottenere invece l’effetto countdown dei caratteri rimanenti in un campo input, abbiamo bisogno della stessa struttura HTML dell’esempio precedente con l’aggiunta dell’attributo maxlength=”15″ all’input, dove 15 è il numero massimo di caratteri che vogliamo far inserire.

Codice jQuery:

var max = $("#esempio4").attr("maxlength");
$("#contatore2").html(max);

$("#esempio4").keyup(function(){
    var num = $(this).val().length;
    $("#contatore2").html(max-num);
});

Prima di tutto creo una variabile globale max che corrisponde al contenuto dell’attributo maxlength dell’elemento con id esempio4, che in questo caso sarà 15.
Adesso che so qual’è il numero massimo di caratteri desiderato, lo indico all’utente scrivendolo dentro allo span con id contatore2.

Adesso, sfruttando ancora una volta la funzione .keyup(), salvo dentro alla variabile num creata al volo il numero di caratteri fin’ora scritti nell’input, come visto nell’esempio precedente.

Quindi, scrivo dentro allo span con id contatore2 il numero di caratteri ancora disponibili, calcolato come sottrazione del numero massimo con quello corrente.

Ottenere il valore del radio button selezionato

Adesso vediamo il caso in cui abbiamo una serie di input di tipo radio e al click su un qualche pulsante (tipo quello per l’invio di un email) vogliamo sapere quale radio button è stato selezionato dall’utente.

Prima di tutto, come al solito, va definita la struttura HTML che stavolta dovrà contenere vari input di tipo radio e un altro elemento tipo un link (ma può essere qualsiasi cosa) da usare come pulsante per azionare lo script.


  jQuery
  spacca
  di
  brutto

Uno degli input dovrà avere l’attributo checked=”checked” che indica che è stato selezionato, perché è buona pratica indicare un valore predefinito quando si ha a che fare con i radio button.
Notare che ho aggiunto anche uno span con id result, utile ai soli fini dell’esempio.
Ecco il codice jQuery

$("#btn3").click(function(){
   var selezione = $("#esempio5 input:checked").val();
   $("#result").html(selezione);
});

Prima di tutto individuo l’elemento da cliccare per avviare la funzione, in questo caso si tratta di un button con id btn3.
Dopo che è stato cliccato, salvo dentro ad una variabile “selezione” il valore ( .val() ) dell’input selezionato ( input:checked ) contenuto dentro all’elemento che ha id esempio5 ( #esempio5 ).
Fatto ciò, ho il contenuto del radio button scelto dentro alla variabile e posso decidere cosa farne; in questo esempio lo mostro all’utente scrivendolo dentro allo span con id selezione.

Controllare se una checkbox è stata selezionata

Se nel nostro form abbiamo invece bisogno di controllare se una checkbox è stata selezionata o meno, possiamo fare come segue.
Codice HTML:


  Controllo sulla checkbox

Codice jQuery:

$("#btn4").click(function(){
  if( $("#esempio6 input").is(":checked") ){
    //Cosa fare se è stato selezionato
   $("#result2").html("Certo, non lo vedi?");
  }else{
    //Altrimenti fai questo
   $("#result2").html("No");
  }

Tradotto a parole: quando faccio click sull’elemento con id btn4, se l’input che si trova dentro all’elemento con id #esempio6 possiede la pseudo-classe :checked (cioè è stato selezionato), cerca l’elemento con id #result2 e scrivi al suo interno “Certo, non lo vedi?”; in caso contrario scrivi “No”.

Ovviamente quando andrai ad utilizzare questo metodo, avrai bisogno di ben altro rispetto che scrivere delle stringhe fini a se stesse dentro a uno span, io ti ho dato solo indicazione su come fare il controllo sulla checkbox.

Notare che per indicare la checkbox ho usato come selettore $("#esempio6 input") che però è un po’ troppo generico e andrà a cercare ogni input dentro a #esempio6.
Per essere sicuri che si tratti della checkbox potresti dare a questa un id o una classe specifica e selezionarla usando $(".nomeclasse") oppure $("#nomeID")
Altrimenti potresti anche usare uno dei codidetti “Attribute Selectors” del CSS. Scrivendo $("#esempio6 input[type=checkbox]") indicherai solo gli input di tipo checkbox dentro a #esempio6.

Fine

Anche per oggi la lezione su jQuery finisce qui. Spero di essere stato d’aiuto e se avrai qualche richiesta specifica, non esitare a lasciare un commento .

Primi passi con jQuery – 2

Raspo — Mon, 14 Dec 2009 20:25:01 +0000

Eccoci qua con una nuova lezione di Jquery.
L’altra volta abbiamo visto degli esempi molto semplici di funzioni jquery, che però ti dovrebbero aver già fatto intuire come sia la struttura di qualsiasi altro script.

Struttura di base

Ricapitolando, abbiamo visto che tutto il codice jquery deve stare all’interno di $(document).ready(function() { … }); per funzionare.

Fatto questo, avremo sempre bisogno di un oggetto da cui partire, come ad esempio: $(”#prova”). Nei casi analizzati, si trattava di un oggetto con un preciso ID o classe, ma non sempre sarà così e quindi ricorreremo a tutta una serie di selettori, che ho intensione di vedere più avanti.

Una volta individuato l’oggetto, abbiamo bisogno di un evento, per proseguire nell’esecuzione della funzione. Anche in questo caso, abbiamo visto solo l’evento .click(), che fa partire una certa funzione nel momento in cui clicchiamo sull’oggetto indicato, ma ce ne saranno altri da prendere in considerazione.

Indicato l’evento scatenante, possiamo passare alla descrizione della funzione vera e propria, quindi ci servirà nuovamente un oggetto su cui lavorare e far partire le animazioni e gli effetti vari che la libreria jQuery ci mette a disposizione. Fin’ora hai visto solo il .fadeIn().
Esempio:

  $("#prova").click(function() {
     $(".hide").fadeIn();
     return false;
  });

Questa che ho cercato di tracciare è la struttura che seguiremo nel 90% dei casi:

selettore + evento –> selettore + effetto

Ora non resta altro che vedere il maggior numero possibile di selettori, eventi ed effetti, per riuscire a padroneggiare al meglio questo potente strumento chiamato jQuery.

Animare gli elementi cambiandone dinamicamente lo stile

Per prima cosa dobbiamo definire la struttura HTML e CSS da manipolare.

Codice HTML:


    Segui
    i tutorial
    di jquery
    su
    BitTrack.it

Codice CSS:

#animazione {
    list-style: none;
}
#animazione li {
    width: 200px;
    padding: 5px;
    border: 1px solid #ccc;
    background: #eee;
}

Il risultato è questo:

Segui
i tutorial
di jquery
su
BitTrack.it

Una semplice lista con ID animazione, contenente elementi di larghezza 200px (210px per i più pignoli ). Vogliamo far sì che, cliccando su un qualsiasi elemento della lista, la sua larghezza raddoppi a 400px con un’animazione.

Analizziamo il codice passo passo.

Con $(“#animazione li”) indico qualsiasi elemento

appartenente alla lista con ID animazione, esattamente come avviene nel CSS. Usando l’evento .click(function){ … }); scrivo dentro alle graffe l’effetto che voglio ottenere.

Per eseguire un effetto però ho bisogno di un oggetto su cui lavorare e si da il caso che si tratti proprio dell’elemento che ho appena cliccato! Come fare per individuare esattamente quell’elemento della lista piuttosto che un altro? Usando $(this).
Si tratta di un selettore molto utile che, in questo caso, fa riferimento all’oggetto della funzione click().

Cosa sia esattamente this non è semplice da spiegare (almeno per me), è una cosa che si riesce a comprendere a pieno soltanto con l’esperienza.
Per ora ti basta sapere che, una volta fatto click su un elemento della lista, this indicherà esattamente quell’elemento; quindi non resta altro da fare che far partire l’effetto desiderato con animate().

Animate

Animate() è una funzione molto potente che ci permette di manipolare l’oggetto desiderato, cambiandone lo stile per mezzo di animazioni. Quando parlo di stile, intendo lo stesso che usiamo nei css. Per esempio, in questo caso dobbiamo aumentare la larghezza fino a 400px, scriverò:

$(this).animate({width: "400px"});

Come vedi, i parametri dell’animazione (quelli tra parentesi graffe) vengono indicati in modo molto simile alle dichiarazioni del css (fatta eccezione per le virgolette).
Altra cosa da notare, è il fatto che, come ti avevo preannunciato l’altra volta, i parametri di una funzione seguono una loro precisa formattazione.
Nel caso di animate() devi inserire i parametri dell’animazione vera e propria dentro parentesi graffe e se vorrai indicare la durata dell’effetto (come nel nostro caso), dovrai inserirla al di fuori delle parentesi preceduta da una virgola, in questo modo.

$(this).animate({width: "400px"}, 1000);

Questo è ciò che abbiamo ottenuto:

Segui
i tutorial
di jquery
su
BitTrack.it

Eseguire la funzione inversa facendo click sullo stesso elemento

L’animazione è riuscita alla grande, ma vediamo di rendere il nostro script più completo, facendo in modo che, cliccando una seconda volta sugli elementi la cui larghezza è aumentata, questi tornino alla situazione di partenza con un’altra animazione.

Anche quì ci sono molte strade, ma la pratica più usata consiste nell’assegnare una classe agli elementi la cui larghezza è stata portata a 400px, dopo di che, se viene fatto nuovamente click su uno di questi elementi, attraverso un controllo, saremo in grado di capire se la larghezza di quel dato elemento sia da aumentare o diminuire, a seconda che quella classe sia presente o no.

Anche in questo caso risulta troppo difficile da spiegare a parole, quindi passiamo ai fatti.

Analizzando il codice: come punto di partenza abbiamo sempre il click su un elemento della lista.

    $("#animazione li").click(function(){
        //...
    });

Dopo di che, se quel preciso elemento possiede la classe largo (nome a caso scelto da me con molta fantasia) e quindi è già lungo 400px, riportalo a 200px e toglili la classe largo.

if( $(this).hasClass("largo") ) {
    $(this).removeClass("largo").animate({width: "200px"}, 1000);
}

Altrimenti (cioè se non possiede quella data classe), aumenta la lunghezza a 400px e aggiungigli la classe largo.

else{
    $(this).addClass("largo").animate({width: "400px"}, 1000);
}

Ecco il risultato finale:

Segui
i tutorial
di jquery
su
BitTrack.it

Mi scuso se sono andato un po’ di fretta in questi ultimi passaggi, nonostante abbia utilizzato funzioni molto utili ed importanti tipo hasClass(), addClass, removeClass, ma il loro significato è talmente intuitivo ed evidente che non mi sembrava il caso di perderci troppo tempo.

Fine

Anche questa “lezione” è finita, spero di riuscire a pubblicare le prossime più velocemente, poichè gli argomenti da trattare su jQuery sono tantissimi, devo solo scegliere l’ordine da seguire. Come al solito, se hai suggerimenti o critiche, i commenti sono a tua disposizione. Alla prossima.

Primi passi con jQuery – 1

Raspo — Tue, 17 Nov 2009 22:43:33 +0000

Jquery è una libreria javascript molto potente che ci permette di estendere le potenzialità e funzionalità delle nostre pagine web con animazioni ed effetti vari.

Su Internet si possono trovare un infinità di tutorial a riguardo, ma che io sappia, non c’è molto in Italiano; dunque vorrei provare a condividerne la mia conoscenza con te, con una sorta di “guida al jquery“, basata su semplici esempi pratici piuttosto che concetti teorici.

Preparazione

Senza indugiare oltre, vai su http://jquery.com/ e scarica l’ultima versione di jquery (al momento è la 1.3.2).

Quindi sposta il file jquery-1.3.2.min.js appena scaricato nella cartella dove andremo a fare i nostri primi esperimenti; nella stessa cartella aggiungi anche un file HTML vuoto.

Tutto quello che devi fare adesso per utilizzare la libreria, è includerla nella sezione del codice HTML in questo modo.

Notare che se avessi spostato il file jquery-1.3.2.min.js in una sottocartella avresti dovuto scrivere:

Adesso puoi cominciare a scrivere il tuo primo semplice script per vedere se tutto funziona.

Test di funzionamento

Di seguito all’inclusione di jQuery, aggiungi un altro tag

Quando si scrive un codice jquery, è importante cominciare con la scritta $(document).ready(function() { per indicare che tutto ciò che è scritto dopo la parentesi graffa (e prima della chiusura }); ), verrà eseguito solo quando la pagina sarà completamente caricata.
Spostati momentaneamente nel per aggiungere un link da usare come pulsante per azionare lo script.

Funziona?

Visto che dobbiamo solamente testare il funzionamento della libreria, facciamo qualcosa di molto semplice.

$(document).ready(function() { $("#prova").click(function() { alert("Certo che funziona!"); return false; }); });

Ecco la spiegazione a grandi linee del codice. Quando viene fatto click su $(“#prova”), cioè, l’elemento con ID “prova“, esegue una funzione che mostra un messaggio di alert che dice: Certo che funziona!

Nota: il comando return false; non è indispensabile ai fini della funzione, serve solo ad evitare che cliccando, l’utente venga realmente reindirizzato alla pagina indicata nel href del link (in questo caso # farebbe scrollare improvvisamente la pagina verso l’alto).

Funziona?

Se appare l’alert significa che jquery funziona correttamente!

Anche se per ora il codice scritto non ti risulta molto chiaro, con qualche altro esempio e un minimo di pratica, capirai quanto jQuery sia effettivamente semplice.

Mostra e nascondi elementi

Per ora sei riuscito a far apparire un messaggio di alert, che come effetto non è poi un granchè, proviamo dunque con qualcosa di più interessante .

Per prima cosa c’è bisogno degli elementi HTML da manipolare.

Fatti vedere! Eccomi.

Un link con ID prova2 e uno span con classe hide che però ho nascosto con style=”display: none” (avrei potuto fare lo stesso da un file css esterno).

Vogliamo fare in modo che cliccando sul link “Fatti vedere!”, appaia lo span con la scritta Eccomi.

Fatti vedere! Eccomi.

Vediamo il codice jquery. Ricordati che deve essere incluso nel solito $(document).ready(function() {.

$(document).ready(function() { //... altro codice $("#prova2").click(function() { //scrivi qui cosa succede dopo il click }); });

Come prima, ho usato l’evento .click sul link per far partire la funzione. Ma hai fatto caso che lo span che dobbiamo far apparire ha una classe anziché un ID? Come li distinguo in jquery? Semplicissimo, esattamente come nel CSS: “#” sta per ID e “.” sta per classe. Quindi $(“.hide”) rappresenterà l’elemento (o gli elementi) con classe “hide”.

$("#prova2").click(function() { $(".hide").fadeIn(); return false; });

Per far apparire un elemento che è inizialmente nascosto, ci sono molti modi in jquery, io ho voluto usare il .fadeIn(). Se vuoi puoi provare anche con .show() che mostra l’elemento immediatamente, senza alcuna “transizione”.

Parametri

Come ultima cosa per oggi vediamo di passare qualche parametro al fadeIn() per allungarne la durata dell’effetto. I parametri di una funzione vanno inseriti nelle parentesi tonde quando questa viene chiamata.

$(".hide").fadeIn( PARAMETRI DELLA FUNZIONE );

Ovviamente, ogni funzione supporta solo un certo tipo di parametri che andranno scritti con una certa formattazione, con attenzione a virgole, virgolette, parentesi graffe, ect.

In questo caso, però, vogliamo solo impostare il tempo di durata dell’effetto fadeIn, che essendo un parametro numerico (espresso in millisecondi), basterà scriverlo nelle parentesi senza ulteriore formattazione.

$("#prova3").click(function() { $(".hide2").fadeIn(3000); return false; });

Proviamo con 3000, cioè 3 secondi.

FadeIn di 3 secondi Eccomi.

Fine (per ora)

Questa era la prima “lezione” di jquery, spero sia stata di tuo gradimento, perché ho intenzione di farne altre. Se hai bisogno di chiarimenti o vuoi fare qualche critica, un commento è ben gradito. Stay tuned!

Articoli correlati:
Primi passi con jQuery – 2

Primi passi con jQuery – 3

Creare un anteprima dinamica dei commenti

Creare un anteprima dinamica dei commenti

Raspo — Sat, 31 Oct 2009 21:59:51 +0000

Avere un anteprima del commento che si sta scrivendo, risulta molto utile, specialmente se si vuole utilizzare qualche tag html tipo quello per inserire link, citazioni o mettere il testo grassetto, o in corsivo. Per far ciò bastano poche semplici righe di jquery.

Codice HTML

Innanzitutto ci serve il codice HTML della textarea in cui l’utente inserisce il commento.

Inserisci del testo per far apparire l'anteprima

Di seguito aggiungiamo un DIV vuoto, dove vogliamo che appaia l’anteprima e diamoli un id, in questo caso l’ho chiamato “anteprima”.

Inserisci un commento per far apparire l'anteprima

Anteprima del commento

Per l’esattezza, l’anteprima del commento non apparirà dentro al div “anteprima” ma in quello vuoto che si trova al suo interno.

Nascondiamo il tutto con un tocco di CSS.

#anteprima { display: none; }

In questo modo, non vedremo neanche la scritta “Anteprima del commento”; lo faremo riapparire al momento giusto con lo script.

Script Jquery

Come al solito, assicuriamoci di aver incluso la libreria jquery nell’head e usando un file esterno o la stessa pagina html, creiamo il nostro script.

$(document).ready(function(){ $("#commento").keyup(function() { //funzione da eseguire }); });

Per far sì che lo script inizi a lavorare, usiamo l’evento jquery keyup, che esegue una certa funzione quando viene premuto (e rilasciato) un tasto mentre il focus si trova sulla textarea (che ha ID commento).

$(document).ready(function(){ $("#commento").keyup(function () { var comment = $(this).val(); $("#anteprima").show().children('div').html(comment); }); });

La funzione da eseguire è molto semplice:

Prendo il contenuto della textarea e lo salvo nella variabile comment.

Faccio apparire il div con id anteprima

Seleziono l’altro div vuoto che si trova al suo interno e vi scrivo il contenuto della variabile comment (cioè il testo del commento stesso)

Abbiamo quasi finito, basta fare qualche prova e vediamo che i vari tag html tipo , , vengono perfettamente “interpretati” nell’anteprima.

C’è solo un problema: quando premiamo invio, il testo non va a capo ma aggiunge semplicemente uno spazio.

$(document).ready(function(){ $("#commento").keyup(function () { var comment = $(this).val().replace(/\n/g, "
"); $("#anteprima").show().children('div').html(comment); }); });

Per correggere questo errore, basta agire sulla variabile comment e sostituire i \n, cioè i “simboli delle andate a capo” con dei
.

Fine

Adesso lo script è completo e pronto all’uso. Puoi sperimentarlo aggiungendo un commento su questa pagina!
Download

Articoli correlati:
Creare un ajax contact form con validazione dei dati

Primi passi con jQuery – 2

Primi passi con jQuery – 1

Creare un ajax contact form con validazione dei dati

Raspo — Thu, 22 Oct 2009 23:53:45 +0000

Con questo tutorial ti spiegherò come realizzare un form, da usare nella tua pagina contatti, per l’invio di email tramite ajax (quindi senza bisogno di ricaricare la pagina) con tanto di validazione dei dati inseriti.

Caratteristiche

Ogni campo ha dei dati predefiniti che vengono cancellati quando questo ottiene il “focus”

Se l’utente non inserisce dei dati obbligatori o un indirizzo email valido, lo script notifica l’errore evidenziando in rosso i campi errati.

L’email viene inviata tramite ajax e restituisce un messaggio di notifica al termine dell’operazione

L’invio dell’email deve poter funzionare anche con javascript disabilitati.

Per avere un idea più chiara di ciò che andremo a creare, ecco una demo funzionante del “prodotto finito”.

LINK DEMO

Preparazione

Per iniziare avrai bisogno di una pagina html “di base”.

Contatti

Notare l’inclusione della libreria jquery (direttamente dai server Google ), di uno style.css e del contatti.js che sarà lo script con cui lavoreremo maggiormente.

Aggiunta del contenuto

Per adesso non abbiamo scritto nulla, perciò prosegui con l’inserimento di un po’ di contenuto. I campi nome, e-mail, testo sono indispensabili e perchè no, anche un campo non obbligatorio per aggiungere un eventuale proprio sito web, oltre che ovviamente il pulsante di invio; il tutto incluso nel canonico
che punta ad un certo inviaemail.php.

Contattaci direttamente via email
Testo*

Sono da segnalare gli ID che corrispondono esattamente ai name dei vari campi (questo ci tornerà molto utile per la gestione dai dati da php in caso di javascript disabilitati), la presenza di un immagine di caricamento accanto al pulsante e uno span con ID result al momento vuoto. La classe form come anche l’ID contact_area sono del tutto arbitrari, servono solo a facilitare il lavoro sul CSS.

Un po’ di stile CSS

Se provi a visualizzare questa pagina nel browser il risultato non sarà certo dei migliori.

Senza perdere altro tempo aggiungi un po’ di stile in un nuovo file CSS che dovrai chiamare style.css come indicato nell’head dell’HTML.

body { margin: 0; background: #ddd; color: #000; } h2 { font: bold 22px verdana; color: #333; } #contact_area { width: 500px; margin: 0 auto; } .form { margin: 0 0 10px 0; width: 500px; font: normal 13px verdana; border: 1px solid #aaa; background: #eee; padding: 6px 10px; -moz-border-radius: 6px; -webkit-border-radius: 6px; } #invia { font: normal 16px verdana; border: 1px solid #aaa; background: #c9c9c9; padding: 2px 10px; margin: 0 10px 0 0; cursor: pointer; -moz-border-radius: 6px; -webkit-border-radius: 6px; } #load_img { display: none; line-height: 26px; } .error { border: 1px solid #ff5c5c } .fail { color: #F80000 } .success { color: #009600 }

Non ho alcuna intensione di soffermarmi sui vari accorgimenti usati nel CSS, ma devo far notare che abbiamo nascosto l’immagine di caricamento (linea 40) ed aggiunto le classi error, fail, success il cui scopo sarà più chiaro in seguito.

Direi senza alcun dubbio che l’aspetto è migliorato .

Aggiunta del motore (jquery)

Ora che hai tutto pronto, entriamo nel vivo della programmazione jquery. Crea il file contatti.js e aggiungi queste prime linee di codice.

$().ready(function(){ //variabili globali var name = $("#name"); var nameText = $(name).val(); var email = $("#email"); var emailText = $(email).val(); var sito = $("#sito"); var sitoText = $(sito).val(); var message = $("#testo"); var messageText = $(message).val(); });

Per adesso abbiamo solo dichiarato alcune variabili globali che useremo da quì in avanti. In particolare, abbiamo assegnato una variabile ad ogni campo della pagina HTML e ne abbiamo salvato il contenuto in un’altra variabile.

Per esempio, il campo con ID name, sarà indicato d’ora in poi semplicemente con “name” ed il suo contenuto predefinito, quello che possiede nel momento in cui la pagina viene caricata (in questo caso “Nome*“), verrà memorizzato nella variabile nameText.

Gestione dei valori di default nei singoli campi

Per far sì che i valori dei campi si azzerino quando ricevono il focus e tornino come predefiniti se non viene inserito alcun dato, aggiungi queste semplici funzioni.

//name name.focus(function(){ if($(this).val() == nameText) $(this).val(""); }); name.blur(function(){ if($(this).val() == "") $(this).val(nameText); }); //email email.focus(function(){ if($(this).val() == emailText) $(this).val(""); }); email.blur(function(){ if($(this).val() == "") $(this).val(emailText); }); //Sito web sito.focus(function(){ if($(this).val() == sitoText) $(this).val(""); }); sito.blur(function(){ if($(this).val() == "") $(this).val(sitoText); }); //message message.focus(function(){ if($(this).val() == messageText) $(this).val(""); }); message.blur(function(){ if($(this).val() == "") $(this).val(messageText); });

In tal modo, quando viene selezionato (.focus) un certo campo, la funzione ne azzera il contenuto se questo corrisponde a quello predefinito nell’HTML e quando il focus viene perso (.blur), se l’utente non ha aggiunto alcunchè, lasciando il campo vuoto, ne ripristina il valore predefinito.

Validazione dei contenuti

Per eseguire la validazione dei dati inseriti dall’utente, creeremo una funzione apposita per ogni campo che ne valuti la correttezza secondo criteri del tutto arbitrari. In questo caso, abbiamo imposto una lunghezza minima di nome utente e testo dell’email a 4 caratteri, mentre l’email dovrà rispettare la canonica forma [qualcosa]@[qualcosa].[qualcosa] .

function validateEmail(){ var a = $("#email").val(); var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/; if(filter.test(a)){ $("#email").removeClass("error"); return true; } else{ $("#email").addClass("error"); return false; } } function validateName(){ if((name.val().length < 4) || (name.val() == nameText)){ name.addClass("error"); return false; } else{ name.removeClass("error"); return true; } } function validateMessage(){ if((message.val().length < 4) || (message.val() == messageText)){ message.addClass("error"); return false; } else{ message.removeClass("error"); return true; } }

Per il controllo sulla lunghezza di un campo abbiamo usato la funzione .lenght che restituisce il numero di caratteri di una stringa; la validazione dell’email è invece un po’ più complessa poiché fa uso di una regex confrontata alla stringa con la funzione .test(), quindi prendila pure per buona .

Un ulteriore controllo è stato eseguito sui campi testo e nome che non devono essere uguali a quelli preimpostati (linee 14 e 24), infatti, essendo “Nome*” e “Testo*” di per sé due stringhe più lunghe di 4 caratteri, verrebbe vanificata la validazione.

Notare inoltre, che ciascuna funzione restituisce false e aggiunge una classe error a quel campo, se la validazione ha avuto esito negativo; altrimenti, restituisce true e toglie la classe error (nel caso sia stata precedentemente applicata).

Passaggio dei dati con Ajax

Adesso non resta che inviare i dati al php tramite ajax.

$("#contatti").submit(function(){ if(!validateName() | !validateEmail() | !validateMessage()){ return false; } else { //Invia email con ajax } });

Prendiamo il click sul pulsante invia (o meglio il submit del form con id contatti) come evento da cui partire e quindi sottoporre i dati alla validazione.

else { $('#load_img').fadeIn(); $.ajax({ type: 'post', url: 'inviaemail.php', data: 'name=' + name.val() + '&email=' + email.val() + '&site=' + sito.val() + '&message=' + message.val(), //......... }); // end ajax return false; }

Se la validazione viene superata: faccio apparire l’immagine di caricamento con un effetto fade in (linea 2) e poi, con metodo POST (linea 4), invio al file inviaemail.php, che si trova nella stessa cartella (linea 5), i dati contenuti all’interno dei vari campi, assegnando ad ognuno una variabile da far gestire al php (linea 6).

Prima di proseguire devi però sapere come è strutturato il file inviaemail.php.

Invio dell’email con PHP

La parte php è piuttosto semplice.

Assegno alla variabile mailTo il mio indirizzo email dove voglio ricevere tutti i messaggi del contact form.

$name = htmlspecialchars($_POST['name']); $mailFrom = htmlspecialchars($_POST['email']); $siteurl = htmlspecialchars($_POST['site']); $message_text = htmlspecialchars($_POST['message']); $subject = 'Messaggio dal contact form';

Prendo le variabili che mi ha precedentemente inviato ajax con metodo POST, le sottopongo alla funzione del php htmlspecialchars per correggere eventuali caratteri speciali e ne passo il contenuto in altrettante variabili php. Aggiungo anche un oggetto all’email, che mi faccia capire di cosa si tratta quando me la ritroverò nella casella di posta.

Aggiornato. Perché l’email risulti leggibile, è bene far in modo che appaia nel formato HTML. Aggiungo dunque una variabile headers con queste informazioni.

$headers = 'Content-type: text/html; charset=UTF-8' . "\r\n"; $headers .= 'From: '.$mailFrom;

La presenza del parametro From inoltre, evita che l’email appaia nella casella spam di certi servizi webmail tipo GMail.

$message = " $subject
----------------------------------------
Nome Utente: $name
e-Mail: $mailFrom
Sito: $siteurl
Testo della richiesta:

$message_text

----------------------------------------
";

Riunisco tutti i dati in un’ulteriore variabile message, in modo da comporre effettivamente il testo del messaggio di posta che riceverò. Notare la presenza di tutti i canonici tag HTML.

if (mail($mailTo, $subject, $message, $headers)) echo "email inviata!"; else { echo "Errore"; }

Con il comando mail() viene inviata effettivamente l’email e se non ci sono stati errori da parte del server in quest’ultima operazione, scrive il messaggio “email inviata!“; altrimenti scrive “Errore“.

Completamento del codice ajax

Adesso che sai cosa succede dal lato php, torniamo al nostro ajax.

else { $('#load_img').fadeIn(); $.ajax({ type: 'post', url: 'inviaemail.php', data: 'name=' + name.val() + '&email=' + email.val() + '&site=' + sito.val() + '&message=' + message.val(), success: function(results) { $('#load_img').fadeOut(function() { if(results == "email inviata!") { $('#result').html("e-Mail inviata correttamente"); $(name).val(nameText); $(email).val(emailText); $(sito).val(sitoText); $(message).val(messageText); } else $('#result').html("Errore") }); } }); // end ajax return false; }

Dopo l’invio dei dati al php alla riga 6, siamo pronti a ricevere il risultato dell’operazione e salvarlo in una variabile qualsiasi che abbiamo chiamato result.

Nascondiamo l’immagine di caricamento (linea 8 ) e se il risultato del php corrisponde a ciò che avevamo scritto col comando echo, significa che l’email è stata inviata e possiamo dunque scrivere sulla pagina HTML (dentro a quell’inutilizzato span con id results) una notifica di operazione completata con successo; dato che l’email è stata inviata, possiamo anche riazzerare i campi ai valori predefiniti.
Se c’è stato un problema sul php, mostreremo invece un messaggio di errore.

Con i javascript disabilitati?

Nel caso si tenti di inviare un email con i javascript disabilitati, non ci sarà alcun tipo di controllo sulla validazione dei dati, ma l’email verrà comunque inviata, poiché le variabili che abbiamo preso con metodo POST nel php corrispondono esattamente ai parametri name=”" assegnati nell’HTML ai vari campi.

Inviando l’email senza javascript, vieni rimandato alla pagina inviaemail.php contenente la sola scritta “email inviata!” oppure “Errore” nel caso si siano verificati o no errori sul php.

Conclusioni

Sperando che ti sia stato di aiuto, ti lascio i link per la demo ed il download del pacchetto completo.

Per qualsiasi tipo di osservazione o critica, un commento è sempre bene accetto!

LINK DEMO link download

Articoli correlati:
Creare un anteprima dinamica dei commenti

Primi passi con jQuery – 3

Primi passi con jQuery – 2