whatsapp
keyboard_arrow_down Contatti

Sabato

19

Marzo 2022

Come inviare dati dei form con Ajax serialize() a php

Come inviare dati dei form con ajax serialize()

  1. blog Come inviare dati dei form con ajax serialize()
event_available
schedule

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.

help_outline

Come inviare i dati dei form a php con Ajax .serialize()

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
help_outline

Come recuperare dati in 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.

help_outline

Errore $_POST[‘input’] is not defined

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

?>

Ti è piaciuto questo articolo?

favorite thumb_down
Autore articolo

Fabio

Sono un terribile realista. Pratico e determinato ma anche un grande sognatore, ecco perché do continuamente vita a nuovi progetti online e non. Nel 2019 ho fondato Eureka Web proprio per rendere possibile tutto questo. Insieme possiamo realizzare la tua idea!


Visita il sito
library_books

Leggi anche

Come usare le chiavi API Google
Scopri
Come unire file Javascript e CSS in WordPress
Scopri
Variabili in CSS come usarle nei tuoi fogli di stile
Scopri

Contattami

perm_identity
alternate_email
phonelink_ring
message

Il tuo messaggio è stato inviato con successo!
Ti risponderemo a breve

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

message
perm_identity
alternate_email

keyboard_arrow_up