Serializzare una form ed inviarla via Ajax

Questo snippet JS agisce lato front-end su una form, permettendo di inviare i dati via Ajax, in maniera asincrona quindi e senza ricaricare la pagina. Può quindi essere inclusa in varie tipologie di progetti, anche su un sito WordPress, a patto che sia incluso correttamente nel DOM del sito web e che sia richiamato correttamente JQuery in precenza, al quale lo script si appoggia.

Come funziona questo Snippet?

Per funzionare correttamente lo snippet deve essere incluso in un tag <script></script> e la sua dichiarazione deve essere successiva a quella della libreria JQuery.

Grazie a $(‘#FORM_ID‘).submit() La funzione scatta al momento della submit della form con l’id che abbiamo inserito, in questo caso #FORM_ID, ma qui ci possiamo inserire un qualsiasi selettore del DOM.

Invio dei Dati

Viene bloccato il normale invio di informazioni con e.preventDefault() (e quindi il refresh della pagina),mentre i dati della form sono serializzati con la funzione serialize(), ovvero convertiti in stringa e salvati all’interno della variabile data. Tramite il campo url indichiamo allo script dove effettuare la chiamata Ajax econ il parametro type invece il metodo (POST / GET).

Ricezione dei Dati

Bypassiamo la ricezione lato server ma potete immaginare di avere uno script PHP che riceve tutti i dati della form all’interno della variabile $_POST[‘name’]. Dopo la chiamata Ajax, se tutto è andato bene, riceveremo il risultato delle operazioni lato server all’interno della variabile data definita dentro Successe potranno essere utilizzati come meglio credete.

LO SNIPPET

Di seguito lo snippet, pronto per il copia-incolla 🙂

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

/**
* Developer Corsaro.it - Send post data through ajax
* Website: https://developercorsaro.it
* cesare@developercorsaro.it
*/

$(document).ready(function() {
$('#FORM_ID').submit(function(e) {
e.preventDefault();
var $element = $(this);
var data = $element.serialize();
$.ajax({
url: "URL",
type: "POST",
data: data,
success: function(data) {
//dosomething
}
});
});
});

Utilizzi

Come ho detto in precedenza questo Snippet può essere utlizzato in un sacco di tipologie diverse di progetto, ad esempio possiamo includerlo nel footer del tema WordPress attivo.