Come fare una somma in realtime con PHP e JQuery

Come fare una somma in tempo reale dei campi di un form PHP

Per questo articolo sono disponibili Demo Download Script

La somma in tempo reale è molto utile nei casi in cui si ha la necessità di mostrare a video dei risultati immediatamente, senza la necessità di attendere che il server elabori la richiesta POST.

Per esempio può essere utile se avete un form in PHP, magari per la creazione di un preventivo online e volete mostrare i risultati in tempo reale.

In questo piccolo script utilizzo un paio di funzioni Javascript che non fanno altro che inviare i dati tramite POST ma in background, così da non cambiare la pagina.

Normalmente infatti per effettuare un’operazione, la somma per esempio, di uno o più valori, è necessario compilare il form (quindi avremmo bisogno di un file tipo index.php) ed inviarli tramite il metodo POST ad un altro file (per esempio totale.php) che effettuerà le operazioni di somma.

Vediamo subito come funziona.

Questo è il form (sto usando Bootstrap per stilizzarlo, ma è facoltativo e non preclude il funzionamento dello script)

v1 = è il nome della variabile che PHP utilizzerà per fare l’operazione e che Javascript utilizzerà per inviare i dati al file totale.php

onKeyUp=” calcola();” = è la funzione Javascript che raccoglie i dati delle variabili del form e li invia in POST a calcola.php

Bene, ora per avere il calcolo in tempo reale scriviamo qualche riga di Javascript e richiamiamo jQuery dalle CDN di Google.

Il risultato è il seguente

somma php in tempo reale

A presto!

Programmatore WordPress e Joomla, PHP/MySQL.
Sono freelance mi trovi come Professionista Joomla e articolista nella lista ufficiale di joomla.it, e come Professionista WordPress nella lista ufficiale di WUG Italia.
Dal 2006 sono titolare di Web Synapse, una Web Agency di Milano.
Pratico Kung Fu Wing Chun e mi piacciono le tagliatelle al ragù ! :-)

2 commenti su “Come fare una somma in tempo reale dei campi di un form PHP

  1. Ciao, innanzitutto complimenti per il post. Dovrei inserirei una funzione del genere in un sito wordpress in un modulo creato con Contact Form 7, pensi che possa funzionare? A dire il vero il mio intento è subordinare l’invio del modulo alla corretta compilazione di alcuni campi (la cifra inserita nell’ultimo campo deve equivalere alla somma di quelle inserite in altri campi). Consigli?
    Saluti

    • Ciao Samuele, grazie dei complimenti.
      Credo si possa fare scrivendo un pò di codice JS, non ho chiaro cosa vuoi ottenere ma so che Ninja Forms ha dei campi di calcolo e somma, forse con quello riusciresti senza dannarti troppo, provalo.

Commenta l'articolo

Pin It on Pinterest

Condividi l'articolo. Grazie.

Vuoi essere aggiornato ?