Invio form asincrono (jQuery)? Semplice, con un semplice script!

Se volete inviare un intero form in modo asincrono ci vuole molto in jQuery e javascript per raccogliere tutti i dati contenuti nel form, assegnarli a delle variabili e mandarle in modo asincrono, per poi controllare la risposta ecc…

E’ fattibile e l’ho usato anche io per anni. Quando però il cliente vi chiede l’aggiunta di qualche campo e vi recrimina il fatto che alcune informazioni non sono codificate in utf8 (o quello che usate) e vuole anche le immagini caricate in modo asincrono, il vostro, come il mio, cervellino inizia a pensare al modo più veloce e pulito per far fuori il cliente. Ammettilo, è così.

Oggi vi mostro uno script direi conosciuto ma non sempre preso in considerazione, e non capisco perché: Malsup jQuery Form.
La particolarità di questo script è che non andrà fatta alcuna modifica al form; verrà invece interrotto il submit (l’invio) del form in modo sincrono mentre i dati verranno davvero inviati! Avete capito bene: invii, la pagina non si aggiorna ma i dati vengono inviati! E potrete inviare qualsiasi campo nel form, date, testo e anche file senza preoccuparvi di aggiungerlo altrove! Ora vediamo come fare.

Basterà includere nel vostro file la libreria jQuery e poi il file che troverete da scaricare qui (fate tasto destro e “salva con nome”).

Per metterlo in atto: ancora più semplice!

Create un form, qualsiasi form volete e di cui avete bisogno, aggiungetene l’id e segnatevelo (ad esempio id form “idForm” e pagina dove inviare “strumenti.php”).

Sotto al form dovrete SOLO mettere il seguente codice (l’ho modificato rispetto alla pagina originale traducendolo e aggiungendo “msg” alla funzione di risposta “function(msg)”) :

<script type="text/javascript">

        // aspettiamo che il documento sia caricato totalmente
        $(document).ready(function() { 
            // aggancia 'idForm' e crea una semplice risposta
            $('#idForm').ajaxForm(function(msg) { 
                alert("Form inviato correttamente!"); 
            }); 
        }); 

</script>

Questo è quanto 🙂

Se poi volete modificare un campo, magari un div vuoto, con una risposta dalla pagina “strumenti.php” (come indicato precedentemente) vi basterà modificare la riga “alert(“Form inviato correttamente!”);” con un codice jQuery molto semplice:

$('#id_div_vuoto').html(msg);

In questo modo il div con id=”id_div_vuoto” verrà riempito di ogni “echo …” che stamperete nella pagina “strumenti.php”.
Provate! Se scrivete solamente in tutta la pagina strumenti.php il seguente codice:

echo "Risposta dalla pagina strumenti";

vedrete che comparirà nel vostro div. Da questo capite che potete far tornare qualsiasi valore, anche un’intera pagina!!!

Come avrete capito è tutto molto semplice. Per maggiori dettagli vi consiglio di guardare sul sito dello sviluppatore.

Come al solito rimango a disposizione.

Buona codeata!

Annunci

, , , , , , , ,

  1. Lascia un commento

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger hanno fatto clic su Mi Piace per questo: