Come inviare dati dei form con ajax serialize()

Come inviare i dati dei form a php con Ajax .serialize()? Questa funzione recupera in un unica variabile tutti i valori del form, senza doverli recuperare singolarmente.

Il suo utilizzo è molto più veloce rispetto al classico metodo di selezione singola ed è molto utilizzato per form generati dinamicamente.

Per prima cosa vediamo una struttura semplificata del form che dovrai creare.

Puoi inserire nel form qualsiasi tipo di elemento input, select o textarea, in questo caso vedremo un semplice form con un solo campo.

<form action="#" method="post" id="ekw_form">
   <input type="number" id="ekw_number" name="ekw_number" value="5">
   <input type="button" name="submit" id="submit" value="Invia">
   <p class=”ekw_success_message”></p>
</form>

Questo form deve contenere obbligatoriamente questi campi:

• id univoco
• method: post o get
• pulsante per l’invio

Vediamo ora il codice Ajax necessario per passare i dati a php

 jQuery.noConflict();
    jQuery(document).ready(function ($) {

      $('#submit').on("click", function(e) {
        e.preventDefault(); //blocca il reload della pagina

        var form = $('#ekw_form').serialize(); //recupera tutti i dati del form

        $.ajax({
         type: "POST",
         url: $('#ekw_form').attr("action"),
         data: {
           ekw_dati: form
         },
         success: function() {
           var message = "Dati inviati";
           $('.ekw_success_message').text(message);
         },
         error: function() {
           var message = "Qualcosa è andato storto, prova di nuovo";
           $('.ekw_success_message').text(message);
         }
       });
     });

    });

Questo codice deve contenere:

• funzione  jQuery.noConflict(); per risolvere errore $ is not a function
• funzione .serialize() che stampa una stringa con tutti i dati concatenati del form
• data: { /* dati */ }: parametri da passare a php

Se tutto è andato a buon fine, in php avremo una variabile $_POST[‘ekw_dati’] contenente tutti i dati del form.

Il codice da utilizzare è il seguente:

if (isset($_POST['ekw_dati'])) {
   $numero = urldecode($_POST['ekw_number']); //$_POST con nome (name=””) del campo da richiamare

// funzioni da eseguire
}

In questo codice è importante richiamare i dati dei post con la variabile superglobale $_POST e usare come parametro il nome (attributo name=””) del campo di cui vogliamo il valore.

Se stai riscontrando l’errore “$_POST[‘input’] is not defined” verifica le seguenti azioni:

• Hai utilizzato la funzione urldecode() in php
• La chiamata Ajax è andata a buon fine
• Il tasto di invio è un tipo “button”

Se ancora riscontri questo errore ma visualizzi la variabile $_POST[‘variabile-della-chiamata-ajax’] allora puoi utilizzare questo codice:

<?php
if (isset($_POST['ekw_dati'])) {
$data = explode('&', $_POST['ekw_dati']);

for ($i=0; $i < count($data); $i++) {
  $arr = explode('=', $data[$i]);
  $data[$arr[0]] = $arr[1];
  unset($data[$i]);
}

 $numero = (int) data[‘nome-attributo-da-richiamare’];

// funzioni da eseguire

?>