Inviare i dati di un form senza refresh

I form, come ben sappiamo, servono per inviare una certa quantità di informazioni, inserite dall’utente, ad una determinata pagina web.

Solitamente si viene rimandati ad una pagina .php che elaborerà i dati secondo le necessità del programmatore e ci rimanderà ad una pagina specifica dove ci attenderà un messaggio di errore o conferma che sia.

L’obiettivo di questo articolo è quello di analizzare un metodo, tutt’altro che complesso, per inviare i dati dalla pagina del form in modo del tutto “trasparente” e senza dover essere trasferiti altrove:

DEMO - Risultato

Creiamo innanzitutto un form..

 
<div id="info_form">
   <form id="info">
      <label>Nome</label>
      <input name="nome" id="nome" type="text" class="inp" />
      <label>Cognome</label>
      <input name="cognome" id="cognome" type="text" class="inp" />
      <label>Email</label>
      <input name="email" id="email" type="text" class="inp" />
      <input type="submit" id="submit" value="INVIA"/>
    </form>
   <label id="message"></label>
   </div>
 

 ..E diamogli un aspetto più o meno decente:

Foglio di stile - style.css

Eccoci al nocciolo della questione! Per raggiungere il nostro obiettivo ricorriamo alla coppia jQuery/AJAX: con il primo elaboriamo i dati, li validiamo e li diamo in pasto allo script in Ajax che li invierà alla pagina desiderata.

Il tutto finisce con un messaggio di avviso che ci informa della conferma dell’invio dei dati oppure di un eventuale errore.

 
$(function() {
   $("#submit").click(function() {
   var elem_error = '';
   var name = $("input#nome").val();
   if (name == "") {
     $('#message').html('Completare il campo nome').animate({'backgroundColor':'#d36235','marginTop':'0px'},1000);
     $("input#nome").focus();
     return false;
   }
   var cognome = $("input#cognome").val();
   if (cognome == "") {
     $('#message').html('Completare il campo cognome').animate({'backgroundColor':'#d36235','marginTop':'0px'},1000);
     $("input#cognome").focus();
     return false;
   }
   var email = $("input#email").val();
   if (email == "") {
     $('#message').html('Completare il campo e-mail').animate({'backgroundColor':'#d36235','marginTop':'0px'},1000);
     $("input#email").focus();
     return false;
}
     var dati = 'name='+ name + '&cognome=' + cognome + '&email=' + email;
     $.ajax({
         type: "POST",
         url: "elaborazione_dati.php", //// pagina di destinazione dei dati
         data: dati,
         success: function() {
               $('#message').html('Dati inviati con successo').animate({'backgroundColor':'#e5c90a','marginTop':'0px'},1000);
         }
});
return false;
});
});