Oggi vedremo come creare un form di invio dati via POST usando jQuery Ajax. Per chi non lo conoscesse ajax ci permette di inviare i dati in modo dinamico senza dover ricaricare la pagina, rendendo il tutto molto facile da usare.
Soluzione ideale per cms creati su misura, o per mille altri scopi, come ad esempio invio di mail multiple tramite form. E’ lo stesso linguaggio usato anche da “colossi” del web come Google, Facebook e Youtube per rendere la navigazione sempre fluida e mai frustrante.
01. Introduzione
A cosa serve l’articolo che state per leggere? bhè vi sarà utile se volete inviare più volte degli elementi via POST ( o get) a un file PHP. Un utilizzo “base” si ha quando si ha l’esigenza di inserire più di un articolo senza mai uscire dal pannello di aggiunta nel pannello di gestione.
La soluzione in questi casi è obbligata, mentre per altri scopi meno complessi, si può ricorrere a delle “scappatoie” come ad esempio nel filtro selettivo di elementi.
Per questa guida userò ajax fornito dalle librerie jQuery che reputo molto più semplice e potente rispetto alla versione in linguaggio javascript.
02. Struttura HTML
Vediamo la struttura del nostro form di invio dati, come vedete facendo tutto con ajax non ho specificato nell’html se inviare via POST o GET. Ovviamente potete stilizzare il form via CSS come preferite.
<form name="modulo">
<p>Nome</p>
<p><input type="text" name="nome" id="nome">
<p>Mansione</p>
<input type="text" name="mansione" id="mansione">
<input type="button" id="bottone" value="Invia i dati">
</form>
<div id="risultato"></div>
Il div “risultato” serve per far apparire il messaggio di conferma dell’avvenuto invio delle variabili via POST al nostro file di elaborazione PHP.
03. Creiamo lo script ajax
Per prima cosa incorporiamo le librerie JQuery che ci serviranno per inviare i dati via Ajax:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
A questo punto creiamo lo script di invio dati tramite ajax (il codice è commentato per darvi modo di capire al meglio):
<script type="text/javascript">
$(document).ready(function() {
//al click sul bottone del form
$("#bottone").click(function(){
//associo variabili
var nome = $("#nome").val();
var mansione = $("#mansione").val();
//chiamata ajax
$.ajax({
//imposto il tipo di invio dati (GET O POST)
type: "POST",
//Dove devo inviare i dati recuperati dal form?
url: "risultato_aggiunta.php",
//Quali dati devo inviare?
data: "nome=" + nome + "&mansione=" + mansione,
dataType: "html",
//Inizio visualizzazione errori
success: function(msg)
{
$("#risultato").html(msg); // messaggio di avvenuta aggiunta valori al db (preso dal file risultato_aggiunta.php) potete impostare anche un alert("Aggiunto, grazie!");
},
error: function()
{
alert("Chiamata fallita, si prega di riprovare..."); //sempre meglio impostare una callback in caso di fallimento
}
});
});
});
</script>
04. Elaboriamo i dati inviati
Una volta creato lo “scheletro” e lo script di invio dati dobbiamo creare il file che elaborerà tutti i dati inseriti per fare qualcosa. Ovviamente da qui in poi dovrete adattare il codice in base al vostro progetto e/o esigenze particolari.
FILE : risultato_aggiunta.php
<?php
include("connessione_db.php"); //connetto script di connessione db
include("config.php"); //includo file configurazione
mysql_select_db("$db_name",$connessione); //seleziono il database e mi connetto
$nome = $_POST['nome'];
$mansione = $_POST['mansione'];
$sql = "INSERT INTO tua_tabella SET
nome = '$nome',
mansione = '$mansione',
if (@mysql_query($sql))
{ echo '<p>Il tuo alloggio è stato inserito correttamente</p>'; } //Messaggio che apparirà sotto il form di aggiunta tramite msg
else { echo '<p>Si e verificato un errore ' . mysql_error() .'</p>'; } //eventuale messaggio di errore
?>
Et voilà se avete creato tutto come si deve (dal database innanzitutto), sarete in grado di inserire dati nel vostro database senza dover ogni volta ritornare nella pagina di aggiunta. Ovviamente questo metodo può essere applicato anche per altri scopi, come ad esempio per inviare mail tramite form. Potete applicare lo script anche al mio form PHP html5/css3 semplicemente modificando il form html e aggiungendo le righe di jQuery sopra illustrate.
Spero vi sia utile, se avete domande, dubbi o perplessità sono qui =)
Ottimo.. 😉 adesso lo provo sullo script delle short url.. 🙂
😉
Ciao a tutti, ho provato a implentare questo codice al mio sistema di commenti, ma non vuole funzionarmi!
Siccome il mio form non usciva dalla pagina, richiamavo la funzione di salvataggio dei commenti nel data base così:
index.php
if($_GET[‘add’] == “comment”){
$oggetto_commento = $_POST[‘commento’];
$oggetto_commento= htmlentities($oggetto_commento);
$oggetto_commento = addslashes($oggetto_commento);
$oggetto_commento = stripslashes($oggetto_commento);
if($oggetto_commento == “”){null;} else{
$data_commento =(date(“y-m-d”));
mysql_query(“INSERT INTO commenti (id_com,id_page,ogg_com,date_com) VALUES (‘$idm’, ‘$f’, ‘$oggetto_commento’, ‘$data_commento’)”);
//la variabile f sarebbe l’id univoco di ogni post da commentare
}}
<?
?>
dopo che ho letto il tuo articolo l’ho rimodellato così
index.php
$(document).ready(function() {
//al click sul bottone del form
$(“#send_submit”).click(function(){
//associo variabili
var commento = $(“#txtInput”).val();
//chiamata ajax
$.ajax({
//imposto il tipo di invio dati (GET O POST)
type: “POST”,
//Dove devo inviare i dati recuperati dal form?
url: “index.php?add=comment&f=”,
//Quali dati devo inviare?
data: “commento=” + commento,
dataType: “html”,
//Inizio visualizzazione errori
success: function(msg)
{
$(“#prev”).html(msg); // messaggio di avvenuta aggiunta valori al db (preso dal file risultato_aggiunta.php) potete impostare anche un alert(“Aggiunto, grazie!”);
},
error: function()
{
alert(“Chiamata fallita, si prega di riprovare…”); //sempre meglio impostare una callback in caso di fallimento
}
});
});
});
<?
?>
Ma non funziona, oltre a darmi l’errore in Java, mi dirotta poi dopo a index.php?commento=testo_del_commento_appena_fatto
Ho provato anche a separare le funzioni, a fare un send.php con la scrittura del database, e inviare le variabili $commento ed $f con java ma nulla, anche cancellare la cache. Potreste aiutarmi? Grazie!
Sicuramente l’errore sta nella variabile da recuperare url: “index.php?add=comment&f=”, usando ajax non ti serve creare una variabile da poter elaborare con il GET come facevi prima, secondo me dovresti semplicemente creare un file elaborazione.php dove recuperi il valore del commento che passi con ajax usando POST. Per l’id univoco dell’articolo puoi creare un campo nascosto che contiene l’id dell’articolo commentato e lo passi con ajax come hai fatto con il commento.
Questa è solo un’idea ovviamente, fammi sapere che magari ho interpretato/capito male. Ciao!
Ciao, e complimenti per l’articolo.
Ti volevo chiedere nella stringa:
data: “nome=” + nome + “&mansione=” + mansione,
c’è quel “&” commerciale a cosa serve?
se io devo aggiungere un’altro campo devo fare cosi:
data: “nome=” + nome + “&mansione=” + mansione + “&nuovocampo” + nuovocampo,
??
Ciao Riccardo grazie della tua risposta. Allora ho provato a creare un file di elaborazione come mi hai consigliato te chiamato send.php, e ho provato anche a passare la variabile f diversamente, ma il risultato lo stesso, ti posto il codice senza i tag php perchè ho notato che commentando lo cancella.
index.php
$(document).ready(function() {
//al click sul bottone del form
$(“#send_submit”).click(function(){
//associo variabili
var commento = $(“#txtInput”).val();
var f = “$f”;
//chiamata ajax
$.ajax({
//imposto il tipo di invio dati (GET O POST)
type: “POST”,
//Dove devo inviare i dati recuperati dal form?
url: “send.php”,
//Quali dati devo inviare?
data: “commento=” + commento + “&f=” + f,
dataType: “html”,
//Inizio visualizzazione errori
success: function(msg)
{
$(“#prev”).html(msg); // messaggio di avvenuta aggiunta valori al db (preso dal file risultato_aggiunta.php) potete impostare anche un alert(“Aggiunto, grazie!”);
},
error: function()
{
alert(“Chiamata fallita, si prega di riprovare…”); //sempre meglio impostare una callback in caso di fallimento
}
});
});
});
Il commento me lo registra nel database, come anche prima per altro, il problema è che quando premo “commenta” anche adesso mi fa un redirect su “index.php?commento=quello_che_ho_scritto_nel_commento” poi tornando indietro vedo che il commento me l’ ha effettivamente postato. Quindi le variabili le riesce a passare benissimo, solo non capisco perchè mi fa un refresh su questa pagina.
mi puoi postare cortesemente anche send.php?
Scusa il disturbo eh! Non ho mai chiesto aiuto, ma ricontrollando di errori mi pare non dovrebbero essercene e non capisco proprio cosa non funzioni, ma soprattutto cambiando l’URL con send.php non capisco perchè il redirect me lo faccia sulla index, che non è dichiarata da nessuna parte, tu cosa ne pensi?
Purtroppo mi cancella i tag head e body dove avevo scritto il codice della textarea te la scrivo senza tag:
body di index.php
form id=\”send_comment\”
textarea id=\”txtInput\” value=\”Inserisci il tuo commento..\”
cols=\”80\” rows=\”1\” name=\”commento\” placeholder=\”Inserisci il tuo commento..\” autocomplete=\”off\” /textarea
input id=\”send_submit\” type=\”submit\” value=\”Commenta\”
/form
Sisi certo!
send.php
$connessione_database = mysql_connect(“dati”)
or die(“Connessione al database non riuscita: ” . mysql_error());
$db_selected = mysql_select_db(‘Sql419830_1’, $connessione_database);
if (!$db_selected) {
die (‘Can\’t use Sql419830_1 : ‘ . mysql_error());}
$oggetto_commento = $_POST[‘commento’];
$f = $_POST[‘f’];
$oggetto_commento= htmlentities($oggetto_commento);
$oggetto_commento = addslashes($oggetto_commento);
$oggetto_commento = stripslashes($oggetto_commento);
if($oggetto_commento == “”){null;} else{
$data_commento =(date(“y-m-d”));
mysql_query(“INSERT INTO commenti (id_com,id_page,ogg_com,date_com) VALUES (‘$idm’, ‘$f’, ‘$oggetto_commento’, ‘$data_commento’)”);
//$idm sarebbè l’id univoco dell’utente registrato invece, presa tramite cookie
mysql_close($connessione_database);
hai già provato a usare un alert in caso di successo nell’aggiunta?
perchè se ho capito bene:
– in effetti funziona tutto e l’unico problema è il redirect al success (strano) mi fa pensare che da qualche parte ci sia un header location o qualcosa di simile che da errore.
Prova a usare un alert almeno vedi se ti da qualcosa o no. (p.s se hai skype aggiungimi riccardo.mel90 perchè così magari facciamo 100 commenti XD)
perfetto aggiunto, sono pagnakko, ci sentiamo li!
Su skype per ragioni lavorative di solito accedo solo il pomeriggio 😉
gira rigira casco sempre qua, mi sa che dovrò chiederti qualcosa su ajax…
hihih quando vuoi ale! 😉
Ciao riccardo… Premesso che il mio primo approccio in ajax è avvenuto proprio ora con questo tuo post, mi è sorto un dubbio leggendo leggendo… L’immissione di dati nel database avrei potuto risolverla anche con la funzione di jquery .load() di cui leggevo un tuo posto precedente?!? Ovvero al click sul Pulsante per l’invio del modulo richiamavo con load la pagina aggiunta.php che si occupava di prendere i valori dei campi e inserirli nel database… Era possibile anche cosi? Ti ringrazio dell attenzione…
Angelo
No Angelo, perchè di fatto con load non passi “informazioni” via POST o GET e quindi non avresti alcun risultato. Ciao!
Peró da ciò che ho potuto capire dal tuo precedente post, potresti cmq passare alla pagina php vari parametri…
Tipo l’inserimento di una email all interno di un database newsletter…
Esempio:
Ho un input text chiamato email
DA ciò :
Var indirizzo = $(#email).val();
$(#box).load(‘newsletter.php?indirizzo=’+indirizzo);
A questo punto newsletter.php dovrebbe essere in grado di acquisire il parametro tramite $_GET[‘indirizzo’] e poi inserirlo in database.
Ancora non ho provato, mada quello che leggevo penso si possa fare, no?
si in effetti non ci avevo pensato però a passare dati con GET devi stare attento, detto questo proverò anche con il tuo metodo e ti farò sapere =D (vedi quante cose vengono in mente hihi).
:-). Verissimo.. Infatti ora spno curioso di provare e nel pomeriggio mi dedicherò un po all’ajax… 🙂 ti faró sapere…
Attendo con ansia il tuo prossimo tutorial sui cms, sono molto curioso su come far interagire i dati da una tabella all’altra, e nell’attesa ti faccio i miei migliori complimenti, non solo per la preparazione ma anche per la scelta di condividere con tutti noi, il risultato di tutti i tuoi sforzi e del tempo impiegato per arrivare a ció..
Grazie Angelo! per fortuna sto iniziando a raccogliere i frutti del mio lavoro dopo tanta gavetta, fammi sapere per quella prova con jquey load che mi interessa molto =D
Ciao riccardo.. ho testato… come immaginavo funziona….
prelevo con questo codidce il valore del campo e lo passo con load alla pagina php che poi sarà incaricata di inserire nel database il valore preso tramite S_GET..
ecco la parte jquery
$(document).ready(function()
{
$(‘.carica’).click(function()
{
var address = $(‘#indirizzo’).val();
$(‘#risultato’).load(‘insertNewsLetter.php?nome=’+address);
});
})
enjoy it 🙂
Ottimo grazie della segnalazione potrebbe rivelarsi molto utile 😉
Ciao, ho seguito la tua guida, e funziona tutto correttamente, per questo di ringrazio. Vorrei chiederti come migliorare lo script:
1) Una volta inseriti i dati cancellare il contenuto degli input.
2) Visualizzare sotto in tempo reale i dati presenti nel database senza aggiornare la pagina.
Grazie mille, ho scoperto da poco il e ho trovato molti spunti interessanti.
Per la prima domanda basta usare reset() di jQuery.
Per la seconda in effetti volevo fare un articolo a brevissimo 😉 (in ogni caso dai un’occhiata qui: http://api.jquery.com/jQuery.ajax/
Grazie per la risposta, per la prima domanda ho risolto in questo modo:
document.getElementById(“nome”).value=””;
document.getElementById(“mansione”).value=””;
va bene lo stesso?
2) Ok, allora attendo con ansia l’articolo, nel frattempo inizio a guardare i link.
Ne approfitto della disponibilità e ti chiedo un altra cosa, come si potrebbe temporizzare il messaggio che si ha quando l’inserimento va buon fine? vorrei fare qualcosa tipo gmail, che compare il rettangolo giallo con il messaggio e dopo pochi secondo scompare….
Si è un metodo alternativo 😉
Per la domanda 2 puoi far sparire il pulsante di invio mettendo subito dopo click function questo code:
$("#bottone").click(function(){$("#bottone").fadeOut();
...
Ovviamente una volta inviata la mail lo devi fare riapparire se vuoi ;=)
Ok, nel frattempo avevo risolto cosi:
//Inizio visualizzazione errori
success: function(msg)
{
$(“#risultato”).fadeIn(“slow”);
$(“#risultato”).html(msg);
setTimeout(‘$(“#risultato”).fadeOut(“slow”)’,4000);
Ciao, potresti indicare come aggiungere un controllo, che se le caselle sono vuote e viene premuto il pulsante non accade nulla, mentre al momento vengono inviati dati vuoti.
Ciao usa if (campo == “”) { CODE CAMPO VUOTO }
per saperne di più guarda qua la sezione controllo campi:
http://www.targetweb.it/form-contatti-php-con-antispam
Ciao Riccardo Mel,
Allora ti espnmgo subito il problema. ho rpeso in considerazione il tuo form, ma da qualche errore in finala e su risultato_aggiunta.
l’ho modificato con i miei dati come avevo strutturato il db. Ovviamente ti parlo di phpmyadmin, quindi il db che vado ad utilizzare si trova fisicamente su phpmyadmin. I campi sono due attualmente:
1) username
2) password.
Ti posto tutto il codice, mi potresti correggere l’errore, visto che proviene dal tuo esempio ???? Grazie.
Come prima cosa, il primo file l’ho chiamato ajax.js eccolo:
$(document).ready(function() {
//al click sul bottone del form
$(“#bottone”).click(function(){
//associo variabili
var username = $(“#username”).val();
var email = $(“#password”).val();
//chiamata ajax
$.ajax({
//imposto il tipo di invio dati (GET O POST)
type: “POST”,
//Dove devo inviare i dati recuperati dal form?
url: “risultato_aggiunta.php”,
//Quali dati devo inviare?
data: “username=” + username + “&password=” + password,
dataType: “html”,
//Inizio visualizzazione errori
success: function(msg)
{
$(“#risultato”).html(msg); // messaggio di avvenuta aggiunta valori al db (preso dal file risultato_aggiunta.php) potete impostare anche un alert(“Aggiunto, grazie!”);
},
error: function()
{
alert(“Chiamata fallita, si prega di riprovare…”); //sempre meglio impostare una callback in caso di fallimento
}
});
});
});
risultato_aggiunta.php
[PHP]
<?php
include("connessione_db.php"); //e questo cos'è ???????
include("connetti.php"); //Questo è il mio file di conessione al db
mysql_select_db("$db_name",$connessione); //seleziono il database e mi connetto
$username = $_POST[''username'];
$password = $_POST['password'];
$sql = "INSERT INTO UTENTIJAVA SET
username = '$username',
password = '$password',
if (@mysql_query($sql))
{ echo ' I dati sono stati inseriti correttamente. Grazie !!!!DA’; } //Messaggio che apparirà sotto il form di aggiunta tramite msg
else { echo ‘Si e verificato un errore ‘ . mysql_error() .”; } //eventuale messaggio di errore
?>
[/PHP]
Il form inserimento dati, l’ho chiamato insdatijava.php
[PHP]
Username:
Email:
[/PHP]
Ed infine rimane questo che l’ho chiamato connessione_db:
Ovviamente ques’ultima riga non so se è giusta o meno chiamarlaconnessione_db. L’errore che mi da è sul file risultato_aggiunta.php, ossia qua:
[PHP]
$username = $_POST[”username’];
$password = $_POST[‘password’];
$sql = “INSERT INTO UTENTIJAVA SET
username = ‘$username’,
password = ‘$password’,
if (@mysql_query($sql))
{ echo ‘ I dati sono stati inseriti correttamente. Grazie !!!!DA’; } //Messaggio che apparirà sotto il form di aggiunta tramite msg
else { echo ‘Si e verificato un errore ‘ . mysql_error() .”; } //eventuale messaggio di errore
?> //diventa tutto rosso
[/PHP]
Potresti controllare il codice grazie sperando in una tua risposta al più presto.
Ciao Fabio, “mi da qualche errore” non è una richiesta di assistenza precisa. oltretutto così ad occhio hai usato una sintassi php non corretta per questo ti da errore, direi di iniziare da li se fossi in te 😉
P.s non siamo in un forum di assistenza, ti invito per richieste generiche non inerenti al post (mi sembra di capire che l’invio via ajax ti funziona bene…il problema sta nel php) di girarle sulla pagina facebook o via mail in privato per tenere pulito il post da eventuali richieste o domande.
Ciao Riccardo,
Con molto piacere vias emailo se hai skype. Il mio contatto skype è mousesenzapalle2007. ovviamente se ti va di aggfiungermi. Se mi dai la tua email, ti mando un’email, se preferisci.
Ciao riccardo… Volevo chiederti una cosa che non ho ben capito. Il tuo tutorial è davvero molto semplice e chiaro, ma ho dei dubbi solo su una cosa.
Se la chiamata va a buon fine, con “sucess:” dichiari una funzione con dentro il codice da eseguire.
E fin qui tutto ok… Alla funzione gli dai anche un parametro “msg” parametro che poi nn vedo richiamato piu da nessun altra parte..
A cosa serve quel parametro, e come funziona?
msg è semplicemente l’output proveniente dal file di elaborazione che viene richiamato dalla funzione function(msg) 😉 in alternativa puoi anche scrivere direttamente lì cosa vuoi far apparire in caso di successo.
Ciao, io ho lo stesso problema del primo tipo.
sto utilizzando questo script per la login alla pagina.
la pagina Server funziona, ma quando clicco sul submit non mi fa nulla,
anzi mi manda nell’url il seguente indirizzo
http://127.0.0.1/test/?username=admin&password=admin
cioè i dati che passo con POST
purtroppo non avete messo la risposta al primo problema e quindi non so come risolverlo
$(“#logbtn”).submit(function(){
//associo variabili
var user = $(“#uname”).val();
var pwd = $(“#upass”).val();
//chiamata ajax
$.ajax({
//imposto il tipo di invio dati
type: “POST”,
//Dove devo inviare i dati recuperati dal form?
url: “inc/login.inc.php”,
//Quali dati devo inviare?
data: “username=” + user + “&password=” + pwd,
dataType: “html”,
//Inizio visualizzazione errori
success: function(msg)
{
$(“#risultato”).html(msg);
alert(“fatto!”);
// messaggio di avvenuta aggiunta valori al db
//(preso dal file inc/login.inc.php)
},
error: function()
{
alert(“Chiamata fallita, si prega di riprovare…”);
}
});
});
});
User name
User password
Login button
Ossia non fa nulla
Ciao marco, una domandina su ajax..
È possibile che due form nella stessa pagina, chiamino tramite ajax la stessa pagina php?
Ti domando questo perche il ho due form, uno per la registrazior alla news letter, e uno per la cencellazione…
Utilizzo ajax perce entrambi si trovano in un box a comparsa con si patico effetti di animazione quindi necessito di chiamate asincrone senza dover ricaricare la pagina.
Entrambi i form, all’azione submit, richiamano la pagina newsletter.php
Ma nonostante la sintassi della chiamata ajax sia la stessa nel primo caso, la chiamaa mi passa… Nel secondo la chiamata nn passa e mi da l alert di chiamata fallita…
Errori nello script non penso perche sono identitici.. Allora mi era sorto il dubbio che forse nn fosse possibilr richiamare una stessa pagina ajax da due form nella pagina…
Sai dirmi qualcosa a riguardo?
Ciao Riccardo,
ho provato ad implementare questo script nella mia pagina, ma ricevo l’errore di ” chiamata fallita”, da cosa potrebbe dipendere?
Grazie dell’aiuto,
Elisa 🙂
Ciao Elisa le cause possono essere molte e spaziano dal:
– Non hai attribuito gli ID giusti agli elementi del form
– Non hai collegato in modo corretto il file di elaborazione (non viene trovato etc).
CIao Riccardo,
per un ulteriore test, ho provato ad utilizzare lo script che hai fatto tu, escludendo la chiamata al db, ma ricevo ancora il messaggio di errore.
Ho verificato di aver incluso jquery, ma niente…
Grazie dell’aiuto,
Elisa
salve…ho usato questo script con un ciclo foreach cioè mi appaiono dei risultati con a fianco il pulsante “invia i dati” …ma se clicco non mi funziona , o meglio…mi inserisce soltanto il primo dei risultati del ciclo …mi saprebbe gentilmente dare una mano?
Ciao ! ho una domanda..sto usando questo script per l invio di una mail , e sto provando a sostituire al pulsante
un pulsato con type =”image” ma quando vado poi ad effettuare la prova di invio, la pagina si riaggiorna.
COme posso fare?
Grazie 😀
risolto !!! 😀
ciao dopo tanto tempo ho ripreso ad usare questa funzione..
per caso sai come far eseguire una pagina php remota..
tipo
url: “http://sito.ext/cartella/risultato_aggiunta.php”,
mmmm… non ho capito bene cosa intendi, hai provato con .load o con una richiesta asincrona?
ciao,
il tuo codice funziona perfettamente, l’unica cosa che non mi funziona sono i campi file che non riesco a passarli al php che deve salvare il file (nel mio caso una foto) perchè in effetti non è un post ma un tipo $_FILES.
come posso fare?
Grazie
Oliviero
per la questione “upload foto” ci sono da usare altre strade e fare parecchie considerazioni. Appena posso finisco l’articolo proprio riguardo questa tematica.
Ciao, l’articolo è stato di facile comprensione, ma ho una domanda da fare!
Ho fatto la prova di inserimento commenti con 2 browser con questo script, e riesco a far stampare anche il messaggio appena inviato dall’utente.
Però ovviamente il commento appena inviato lo vede solo l’utente che lo ha inviato, ,mentre l’altro lo vedrà se aggiornerà o si sposterà tra una pagina e l’altra.
Hai qualche idea di come potrei risolvere il problema ? magari qualche guida…
P.s. per farti capire meglio, Facebook la notifica la fa arrivare in tempo reale! senza che ricarichi la pagina o ti sposti in altre pagine. Grazie
Ciao Genny capisco il tuo problema, è stato anche il mio problema quando ho inziato, quindi è del tutto normale. Dirti tutto in un commento sarebbe troppo lunga e non capiresti molto preferisco fare un articolo per illustrarti tutto nel dettaglio, a settembre partirò con il nuovo “ciclo” di articoli con tante novità pertanto ti invito a seguirmi 😉
Ciao, bellissimo articolo!
ho provato lo script…ma su alcuni pc funziona..mentre su un altri no..
e visualizza il messaggio di errore per chiamata fallita.
Secondo te come mai?
grazie mille
Scoperto il motivo.
Quando si visitava il sito senza il “www” non trovava la pagina con lo script.
Grazie lo stesso
salve,
se ad esempio il messaggio di risultato sia una altro form , quindi che esegue la stessa operazione mettendo il msg di risultato in un ulteriore div , si devono fare modifiche ? xchè ci ho provato ma non va
ah se ne può mettere piu di uno in una pagina?
certo Antonio a patto che crei id dei bottoni e del form differenti. Per l’altra domanda direi che è inutile far apparire lo stesso form che fa la medesima cosa al success di ajax. Ti conviene studiarti la funzione .appendTo() e insertAfter() per appendere quello che vuoi al form (messaggi di errore, successo o notifica).
Ciao,
grazie per lo script che funziona correttamente. L’ho utilizzato per un campo di input con il quale filtrare i risultati di una query (e visualizzare i nuovi risultati filtrati).
Solo un problema: vorrei ottenere i risultati della ricerca filtrata non solo col click del mouse sul bottone, ma anche su pressione del tasto “invio” sulla tastiera.
Ti posto le 2 chiamate alla funzione inviadati() – che contiente il codice da te riportato nell’articolo – e che funziona solo eseguendo il click sul bottone.
$(‘#campoinput’).keypress(function(e) {
if(e.keyCode == 13) {
inviadati();
}
});
$(“#bottone”).click(function(){
inviadati();
});
ho provato inutilmente anche con
$(“#form”).submit(function(){
alert(‘#modulo’);
});
Grazie
Ciao Riccardo!
Innanzitutto, ottima guida: uno dei motivi che mi ha spinto ad approfondire l’argomento jquery/ajax! 🙂
Sto cercando di inserire nel mio sito un modulo un po’ complesso: in pratica nella pagina principale è presente un form che invia dei dati via ajax a una pagina php che processa i dati e in un caso particolare include una terza pagina che contiene un altro form. Fin qui tutto funziona. Ora, vorrei che anche questo form inviasse dati via ajax a una quarta pagina. Per far funzionare il tutto ho inserito lo script nella terza pagina (quella del secondo form) ed effettivamente la richiesta ajax parte e arriva alla quarta pagina ma senza inviare i dati. Facendo alcune prove con degli alert ho visto che non riesce a recuperare i value del secondo form, mentre gli stessi elementi richiamati nello stesso modo con jquery (ma non con la funzione val()!) vengono riconosciuti.
Ad esempio questo codice funziona alla perfezione:
$(“#nome”).keyup(function () {
var value = $(this).val();
$(“h2”).text(value);
}).keyup();
mentre questo:
var nome = $(“#nome”).val();
restituisce undefined.
Dove può essere il problema?
Grazie in anticipo!!!
Andrea
Stranamente a me funziona solo su chrome, firefox e explorer pare che invii i dati ma non si vedono i risultati..chi mi aiuta??grazie
Ciao Armando, ho lo stesso problema… quando passo una variabile con post su IE 11 e firefox non la calcola proprio. Poi hai risolto? Non trovo alcuna discussione in merito su internet.
Posso inviare i dati a più pagine ?
Ciao Riccardo Mel,
Premessa:
Mi viene il sospetto che tu posti i codici e poi non fai una verifica se a te personalmente funziona oppure no.
Detto ciò, io l’ho voluto provare non sono un grande esperto di ajax però mi sono reso conto che il tuo codice fa veramente pena. Ha troppi buchi nell’acqua. ma scusa un attimo s’inserisce così i dati in una tabenlla ???? Hai fatto una certa confusione tra l’inserimento datie l’aggiornamento tabella. I o prima di postare ci penserei su due volte visto che la formula esatta è la seguente:
[PHP]
$query=”INSERT INTO nometabella i(nome, mansione) VALUES(‘$nome’,’$mansione’)”;
[/PHP]
A casa mia anche se jquery o ajax a meno che non si parli di connessione mysqli allora ha un’altra sintassi, ma non mi sembra questo caso è quella che ho postato io e non sta cacata che hai fatto:
$sql = “INSERT INTO utenti SET
nome = ‘$nome’, mansione = ‘$mansione'”
Quetso non ha significato. Nemmeno se volessi aggiornare la tabella del db. E in ultimo n’altra cacata bestiale:
if (@mysql_query($sql))
{ echo
Il mio compilatore netbeans 7..3 mi segnala errore. Se fossi in te riguarderei meglio ciò che hai scritto prima di fare figure di merde. oppure lascia perde a fa il web desgigner. Che non mi sembra che tu abbia la stoffa per farlo.
Ciao Fabioi ti assicuro che tutti i codici sono testati e derivano da esperienze e test vari che incontro durante la mia vita lavorativa. Non sono un guru e non lo sarò mai a differenza tua che sicuramente sei un Top Designer/ Developer (Chi non conosce paperinik4 del resto….). Ad ogni modo cercherò di migliorare sperando di raggiungere i tuoi alti livelli tecnici. In ogni caso se non ti stanno bene certe cose che leggi il web è un mondo libero: chiudi pure la scheda e prosegui nella tua florida carriera.
P.s L’articolo è un po’ vecchiotto questo è vero tuttavia non posso aggiornare ciascun articolo ogni giorno in base agli ultimi standard (nel punto in qui parli di mysqli sembri ubriaco…xD) credo che gli altri utenti abbiano apprezzato e usato questo articolo nel migliore dei modi, come vedi dai commenti sopra il tuo. Se tu non lo hai fatto me ne farò una ragione.
Grazie del commento ne farò buon uso! Buona giornata!
Ciao, segnalo un piccolo errore di sintassi! Il comando sql per le query non è chiuso correttamente:
$sql = “INSERT INTO tua_tabella SET
nome = ‘$nome’,
mansione = ‘$mansione’,
Mentre dovrebbe essere:
$sql = “INSERT INTO tua_tabella SET
nome = ‘$nome’,
mansione = ‘$mansione'”;
Bella guida comunque! 🙂
Buongiorno a tutti e complimenti per l’articolo.
Il codice funziona ma ho un problema da cui non riesco a uscire.
Nella pagina ho dei campi sia di input text che di tipo textarea.
Il problema è che quando invio tramite POST con ajax, il testo contenuto in entrambi i campi viene sempre modificato con la eliminazione degli spazi tra i caratteri !
Ad es inserendo sia nel campo text sia nella textarea il testo “a b c…” il testo che viene ricevuto nella pagina definita in URL sarà “abc…” (quindi senza spazi) .
Se provo ad inserire “a b c…” quello che viene inviato (e ricevuto) è solo “a” (il primo “codice spazio ” viene eliminato e tutto quello che segue!!!!
Avete qualche idea o suggerimento ?
grazie anticipatamente
nell’ultima frase ho inserito in “a b c…” il codice html dello spazio tra caratteri “& n b s p ;” (tutto attaccato) ma è stato eliminato inviando il commento….
Ciao,
non so se potete aiutarmi.
Ho un sito del nostro negozio in cui i clienti possono fare dei preventivi sul materiale.
Il cliente inserisce in una textbox delle misure, preme il button ed un JS esegue il calcolo con i prezzi ecc.
Vorrei che il contenuto della textbox venga inviato su un DB (PHPmyadmin), esiste un metodo facile??? (mi interessa sapere quale misura i visitatori fanno il preventivo, per offerte, ecc)
Ciao Riccarto ottima guida… ho un problema ad inviare correttamente i dati del form al database per i valori contenuti nei campi raido e checkbox.
Utilizzando il metodo Post tradizionale che il form punta direttamente al file .php funziona correttamente. Invece utilizzando il tuo codice in Ajax funziona si correttamente per gli altri campi come input, texare, select ma non per i campi radio e ceckebox non li importa nel file .php e considerando questo non salva correttamente i contenuti dei campi radio e ceckbox nel database.
Piccola aiuto!!! grazie anticipatamente…
Allego lo script per capire meglio quello che ho fatto
Form
Impresa
Privato
script:
$(document).ready(function() {
//al click sul bottone del form
$(“#bottone”).click(function(){
$(“.loading”).show();
//associo variabili
var attivo = $(“#attivo”).prop(‘checked’);
var ragionesociale = $(“#ragionesociale”).val();
var privato = $(“#privato”).prop(‘checked’);
$.ajax({
type: “POST”,
url: “insert_conf.php”,
data: “ragionesociale=” + ragionesociale + “&attivo=” + attivo + “&privato=” + privato,
dataType: “html”,
success: function(msg)
{
$(“.loading”).hide();
$(“#risultato”).html(msg);
},
error: function()
{
alert(“Chiamata fallita, si prega di riprovare…”);
}
});
});
});
Grazie….
Ottimo articolo
Grazie mille!