Con questo tutorial ti spiegherò come realizzare un form, da usare nella tua pagina contatti, per l’invio di email tramite ajax (quindi senza bisogno di ricaricare la pagina) con tanto di validazione dei dati inseriti.
Caratteristiche
- Ogni campo ha dei dati predefiniti che vengono cancellati quando questo ottiene il “focus”
- Se l’utente non inserisce dei dati obbligatori o un indirizzo email valido, lo script notifica l’errore evidenziando in rosso i campi errati.
- L’email viene inviata tramite ajax e restituisce un messaggio di notifica al termine dell’operazione
- L’invio dell’email deve poter funzionare anche con javascript disabilitati.
Per avere un idea più chiara di ciò che andremo a creare, ecco una demo funzionante del “prodotto finito”.
Preparazione
Per iniziare avrai bisogno di una pagina html “di base”.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="it-IT"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" href="style.css" type="text/css" media="screen"/> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> <script type="text/javascript" src="contatti.js"></script> <title>Contatti</title> </head> <body> </body> </html>
Notare l’inclusione della libreria jquery (direttamente dai server Google 
), di uno style.css e del contatti.js che sarà lo script con cui lavoreremo maggiormente.
Aggiunta del contenuto
Per adesso non abbiamo scritto nulla, perciò prosegui con l’inserimento di un po’ di contenuto. I campi nome, e-mail, testo sono indispensabili e perchè no, anche un campo non obbligatorio per aggiungere un eventuale proprio sito web, oltre che ovviamente il pulsante di invio; il tutto incluso nel canonico <form> che punta ad un certo inviaemail.php.
<form method="post" name="contatti" id="contatti" action="inviaemail.php"> <div id="contact_area"> <h2>Contattaci direttamente via email</h2> <input type="text" name="name" id="name" class="form" value="Nome*" /> <input type="text" name="email" id="email" class="form" value="e-Mail*" /> <input type="text" name="sito" id="sito" class="form" value="Sito Web" /> <textarea name="message" id="testo" class="form" rows="12" cols="" >Testo*</textarea> <div> <input type="submit" name="submit" id="invia" value="Invia"/> <img src="load.gif" alt="load" id="load_img" /> <span id="result"></span> </div> </div> </form>
Sono da segnalare gli ID che corrispondono esattamente ai name dei vari campi (questo ci tornerà molto utile per la gestione dai dati da php in caso di javascript disabilitati), la presenza di un immagine di caricamento accanto al pulsante e uno span con ID result al momento vuoto. La classe form come anche l’ID contact_area sono del tutto arbitrari, servono solo a facilitare il lavoro sul CSS.
Un po’ di stile CSS
Se provi a visualizzare questa pagina nel browser il risultato non sarà certo dei migliori.
Senza perdere altro tempo aggiungi un po’ di stile in un nuovo file CSS che dovrai chiamare style.css come indicato nell’head dell’HTML.
body {
margin: 0;
background: #ddd;
color: #000;
}
h2 {
font: bold 22px verdana;
color: #333;
}
#contact_area {
width: 500px;
margin: 0 auto;
}
.form {
margin: 0 0 10px 0;
width: 500px;
font: normal 13px verdana;
border: 1px solid #aaa;
background: #eee;
padding: 6px 10px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
#invia {
font: normal 16px verdana;
border: 1px solid #aaa;
background: #c9c9c9;
padding: 2px 10px;
margin: 0 10px 0 0;
cursor: pointer;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
#load_img {
display: none;
line-height: 26px;
}
.error {
border: 1px solid #ff5c5c
}
.fail {
color: #F80000
}
.success {
color: #009600
}
Non ho alcuna intensione di soffermarmi sui vari accorgimenti usati nel CSS, ma devo far notare che abbiamo nascosto l’immagine di caricamento (linea 40) ed aggiunto le classi error, fail, success il cui scopo sarà più chiaro in seguito.
Direi senza alcun dubbio che l’aspetto è migliorato 
.
Aggiunta del motore (jquery)
Ora che hai tutto pronto, entriamo nel vivo della programmazione jquery. Crea il file contatti.js e aggiungi queste prime linee di codice.
$().ready(function(){
//variabili globali
var name = $("#name");
var nameText = $(name).val();
var email = $("#email");
var emailText = $(email).val();
var sito = $("#sito");
var sitoText = $(sito).val();
var message = $("#testo");
var messageText = $(message).val();
});
Per adesso abbiamo solo dichiarato alcune variabili globali che useremo da quì in avanti. In particolare, abbiamo assegnato una variabile ad ogni campo della pagina HTML e ne abbiamo salvato il contenuto in un’altra variabile.
Per esempio, il campo con ID name, sarà indicato d’ora in poi semplicemente con “name” ed il suo contenuto predefinito, quello che possiede nel momento in cui la pagina viene caricata (in questo caso “Nome*“), verrà memorizzato nella variabile nameText.
Gestione dei valori di default nei singoli campi
Per far sì che i valori dei campi si azzerino quando ricevono il focus e tornino come predefiniti se non viene inserito alcun dato, aggiungi queste semplici funzioni.
//name
name.focus(function(){
if($(this).val() == nameText) $(this).val("");
});
name.blur(function(){
if($(this).val() == "") $(this).val(nameText);
});
//email
email.focus(function(){
if($(this).val() == emailText) $(this).val("");
});
email.blur(function(){
if($(this).val() == "") $(this).val(emailText);
});
//Sito web
sito.focus(function(){
if($(this).val() == sitoText) $(this).val("");
});
sito.blur(function(){
if($(this).val() == "") $(this).val(sitoText);
});
//message
message.focus(function(){
if($(this).val() == messageText) $(this).val("");
});
message.blur(function(){
if($(this).val() == "") $(this).val(messageText);
});
In tal modo, quando viene selezionato (.focus) un certo campo, la funzione ne azzera il contenuto se questo corrisponde a quello predefinito nell’HTML e quando il focus viene perso (.blur), se l’utente non ha aggiunto alcunchè, lasciando il campo vuoto, ne ripristina il valore predefinito.
Validazione dei contenuti
Per eseguire la validazione dei dati inseriti dall’utente, creeremo una funzione apposita per ogni campo che ne valuti la correttezza secondo criteri del tutto arbitrari. In questo caso, abbiamo imposto una lunghezza minima di nome utente e testo dell’email a 4 caratteri, mentre l’email dovrà rispettare la canonica forma [qualcosa]@[qualcosa].[qualcosa] .
function validateEmail(){
var a = $("#email").val();
var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
if(filter.test(a)){
$("#email").removeClass("error");
return true;
}
else{
$("#email").addClass("error");
return false;
}
}
function validateName(){
if((name.val().length < 4) || (name.val() == nameText)){
name.addClass("error");
return false;
}
else{
name.removeClass("error");
return true;
}
}
function validateMessage(){
if((message.val().length < 4) || (message.val() == messageText)){
message.addClass("error");
return false;
}
else{
message.removeClass("error");
return true;
}
}
Per il controllo sulla lunghezza di un campo abbiamo usato la funzione .lenght che restituisce il numero di caratteri di una stringa; la validazione dell’email è invece un po’ più complessa poiché fa uso di una regex confrontata alla stringa con la funzione .test(), quindi prendila pure per buona 
.
Un ulteriore controllo è stato eseguito sui campi testo e nome che non devono essere uguali a quelli preimpostati (linee 14 e 24), infatti, essendo “Nome*” e “Testo*” di per sé due stringhe più lunghe di 4 caratteri, verrebbe vanificata la validazione.
Notare inoltre, che ciascuna funzione restituisce false e aggiunge una classe error a quel campo, se la validazione ha avuto esito negativo; altrimenti, restituisce true e toglie la classe error (nel caso sia stata precedentemente applicata).
Passaggio dei dati con Ajax
Adesso non resta che inviare i dati al php tramite ajax.
$("#contatti").submit(function(){
if(!validateName() | !validateEmail() | !validateMessage()){
return false;
}
else {
//Invia email con ajax
}
});
Prendiamo il click sul pulsante invia (o meglio il submit del form con id contatti) come evento da cui partire e quindi sottoporre i dati alla validazione.
else {
$('#load_img').fadeIn();
$.ajax({
type: 'post',
url: 'inviaemail.php',
data: 'name=' + name.val() + '&email=' + email.val() + '&site=' + sito.val() + '&message=' + message.val(),
//.........
}); // end ajax
return false;
}
Se la validazione viene superata: faccio apparire l’immagine di caricamento con un effetto fade in (linea 2) e poi, con metodo POST (linea 4), invio al file inviaemail.php, che si trova nella stessa cartella (linea 5), i dati contenuti all’interno dei vari campi, assegnando ad ognuno una variabile da far gestire al php (linea 6).
Prima di proseguire devi però sapere come è strutturato il file inviaemail.php.
Invio dell’email con PHP
La parte php è piuttosto semplice.
<?php $mailTo = 'tuaemail@qualcosa.boh'; ?>
Assegno alla variabile mailTo il mio indirizzo email dove voglio ricevere tutti i messaggi del contact form.
$name = htmlspecialchars($_POST['name']); $mailFrom = htmlspecialchars($_POST['email']); $siteurl = htmlspecialchars($_POST['site']); $message_text = htmlspecialchars($_POST['message']); $subject = 'Messaggio dal contact form';
Prendo le variabili che mi ha precedentemente inviato ajax con metodo POST, le sottopongo alla funzione del php htmlspecialchars per correggere eventuali caratteri speciali e ne passo il contenuto in altrettante variabili php. Aggiungo anche un oggetto all’email, che mi faccia capire di cosa si tratta quando me la ritroverò nella casella di posta.
Aggiornato. Perché l’email risulti leggibile, è bene far in modo che appaia nel formato HTML. Aggiungo dunque una variabile headers con queste informazioni.
$headers = 'Content-type: text/html; charset=UTF-8' . "\r\n"; $headers .= 'From: '.$mailFrom;
La presenza del parametro From inoltre, evita che l’email appaia nella casella spam di certi servizi webmail tipo GMail.
$message = "<html> <head> <title> $subject </title> </head> <body> <p>----------------------------------------</p> <b>Nome Utente:</b> $name<br /> <b>e-Mail:</b> $mailFrom<br /> <b>Sito:</b> $siteurl<br /> <b>Testo della richiesta:</b><br /> <p>$message_text</p> <p>----------------------------------------</p> </body> </html>";
Riunisco tutti i dati in un’ulteriore variabile message, in modo da comporre effettivamente il testo del messaggio di posta che riceverò. Notare la presenza di tutti i canonici tag HTML.
if (mail($mailTo, $subject, $message, $headers))
echo "email inviata!";
else {
echo "Errore";
}
Con il comando mail() viene inviata effettivamente l’email e se non ci sono stati errori da parte del server in quest’ultima operazione, scrive il messaggio “email inviata!“; altrimenti scrive “Errore“.
Completamento del codice ajax
Adesso che sai cosa succede dal lato php, torniamo al nostro ajax.
else {
$('#load_img').fadeIn();
$.ajax({
type: 'post',
url: 'inviaemail.php',
data: 'name=' + name.val() + '&email=' + email.val() + '&site=' + sito.val() + '&message=' + message.val(),
success: function(results) {
$('#load_img').fadeOut(function() {
if(results == "email inviata!") {
$('#result').html("<span class='success'>e-Mail inviata correttamente</span>");
$(name).val(nameText);
$(email).val(emailText);
$(sito).val(sitoText);
$(message).val(messageText);
}
else
$('#result').html("<span class='fail'>Errore</span>")
});
}
}); // end ajax
return false;
}
Dopo l’invio dei dati al php alla riga 6, siamo pronti a ricevere il risultato dell’operazione e salvarlo in una variabile qualsiasi che abbiamo chiamato result.
Nascondiamo l’immagine di caricamento (linea 8 ) e se il risultato del php corrisponde a ciò che avevamo scritto col comando echo, significa che l’email è stata inviata e possiamo dunque scrivere sulla pagina HTML (dentro a quell’inutilizzato span con id results) una notifica di operazione completata con successo; dato che l’email è stata inviata, possiamo anche riazzerare i campi ai valori predefiniti.
Se c’è stato un problema sul php, mostreremo invece un messaggio di errore.
Con i javascript disabilitati?
Nel caso si tenti di inviare un email con i javascript disabilitati, non ci sarà alcun tipo di controllo sulla validazione dei dati, ma l’email verrà comunque inviata, poiché le variabili che abbiamo preso con metodo POST nel php corrispondono esattamente ai parametri name=”" assegnati nell’HTML ai vari campi.
Inviando l’email senza javascript, vieni rimandato alla pagina inviaemail.php contenente la sola scritta “email inviata!” oppure “Errore” nel caso si siano verificati o no errori sul php.
Conclusioni
Sperando che ti sia stato di aiuto, ti lascio i link per la demo ed il download del pacchetto completo.
Per qualsiasi tipo di osservazione o critica, un commento è sempre bene accetto!
Sottoscrivi il nostro Feed
58 Commenti
22:25
ciao raspo, grazie per la release.
tuttavia lo script non funziona se la pagina carica anche mootools.
come mai? c’e’ un modo per risolvere il problema?
grazie ancora
23:53
Ci sono tutta una serie di accorgimenti da seguire per far convivere mootools e jquery, ma sinceramente non ho mai approfondito l’argomento.
Comunque, sono quasi sicuro che qui dovresti trovare tutte le informazioni che ti servono.
Grazie a te per il commento.
00:20
ciao, grazie per la risposta e per il link.
alla fine ho comunque risolto la cosa sostituendo mootools con uno script ajax dall’effetto simile.
se posso approfittare poi avrei altre due domande: sarebbe facilmente integrabile nel form una select option (non parlo proprio del form in se’ ma del javascript/PHP). E’ poi possibile migliorare il risoltato grafico della mail inviata? Normalmente il contenuto del form viene visualizzato in una sola riga senza formattazione. Insomma, un po’ caotica come cosa.
Grazie ancora per il supporto. Vi auguro il meglio per il vostro sito.
01:32
Per la select: è abbastanza facile, devi individuare l’opzione che è stata effettivamente selezionata con “:selected”, e poi devi prenderne il contenuto col comando .text(). Una cosa del genere:
var selezione = $("select option:selected").text();Poi, nella parte di ajax, quando passi le variabili data: ‘name=’ + name.val() + ‘&email=’ ecc.. devi passare anche la nuova variabile “selezione”. Infine dovrai fare in modo che il php sia in grado di riceverla ed utilizzarla, es:$selezione = htmlspecialchars($_POST['selezione']);E’ un po’ difficile da spiegare, ma se hai capito come funziona lo script non dovresti avere grossi problemi.Riguardo alla formattazione dell’email, è effettivamente un po’ caotica, vedrò di aggiornare l’articolo nei prossimi giorni, si tratta comunque di poche righe di php.
01:45
mh, vedro’ di aspettare l’aggiornamento : )
grazie ancora raspo, se stato gentilissimo.
a presto,
m.
PS.
ogni commento richiedo un nick diverso. curioso!
12:26
Ho aggiornato l’articolo, i cambiamenti sono SOLO nella parte php. Ho aggiornato anche il file da scaricare ovviamente.
Per il problema dei nomi nei commenti, grazie di avermelo segnalato, non me ne sarei mai accorto altrimenti, comunque è stato corretto.
17:39
accidenti che velocita’〜
grazie ancora per il lavoro che svolgete.
alla prossima release!
m.
13:30
inserendo il form nel mio sito mi da sempre errore di invio email… non capisco il motivo, ho cambiato8naturalmente) dove deve arrivare la posta ma non và….. AIUTO!!!
13:38
Non Mi funziona AIUT0!!!!!!
18:56
Se salta fuori l’errore di invio email significa molto probabilmente che hai sbagliato a indicare il percorso del file php.
Controlla bene i percorsi nella chiamata ajax quando dice:
url: 'inviaemail.php',è lì che viene indicato dove si trova il file php.11:30
a me invece non funziona bene con opera
con explore 6 ho corretto lo script ma con opera mi sfasa la pagina non riconoscendo il margin top del contenitore
20:05
L’obiettivo del tutorial era soltanto quello di mostrare come si può inviare un email con jquery/ajax, la parte visuale di CSS è assolutamente secondaria.
Per curiosità, ho provato ad usarlo con Opera, ma non ho riscontrato alcun problema particolare.
Sarei comunque felice di aiutarti, se cercassi di essere un po più chiaro a riguardo.
16:10
Ciao,
ti ringrazio per l’aiuto….ma una cosa è possibile inserire il vostro form all’interno di un sito dove carico le pagine con ajax?Io non riesco e a dir la verità ho provato a prendere altri form già fatti che usano all’interno jquery e non riesco a farli funzionare, cioè li carico in un div ma poi non funzionano i vari script di controllo (proprio non si avviano ) e non so perchè:
il loader ajax che usa è così:
$(document).ready(function(){
$(“#contentArea”).load(“pagina.html”);
});
puoi aiutarmi? puo’ essere essere un problema dell’inclusione di librerie jquery diverse , del tipo che nel loader usa jquery-latest.js e nella pagina del form c’è src http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
inoltre secondo voi posso nel mio loader ajax dirgli di caricare “index.html” e quest’ultima può essere la vostra index completa o deve essere una pagina con all’interno solo il codice tra e quindi non deve contenere il richiamo a librerie etc?
grazie
16:45
Se ho ben capito, intendi caricare con ajax un’intera pagina contenente tutto il contact form, ma ovviamente una volta caricato non ti funziona la validazione etc..
Innanzitutto, non c’è bisogno di caricare l’intera pagina HTML; se metti il contact form dentro a un div che abbia un ID, basta fare:
$(”#contentArea”).load(”pagina.html#NOMEID”);Per caricare solamente quest’ultimo all’interno di #contentArea. (quindi il prob delle doppie librerie sarebbe bypassato in quanto non dovrai caricare la sezione <head>).Il fatto che dopo aver caricato il contenuto, lo script non funzioni è normalissimo, infatti, quando usi ajax è come se facessi un copia/incolla da un altra pagina. Ma si da il caso che l’altra pagina non contenga semplice html, ma anche del codice javascript/jquery che deve essere letto ed interpretato dal browser per poter funzionare, cosa che non avviene con una semplice chiamata ajax!
Ci sono vari modi per ovviare a questo problema, ti indicherò quello meno ortodosso, ma più semplice da spiegare.
Dopo aver caricato la pagina HTML (o soltanto una parte come ti ho indicato), aggiungi alla sezione head il file js del contact form in questo modo:
$(document).ready(function(){Assicurati che nel campo src=”contatti.js” sia indicato correttamente il link allo script.$(”#contentArea”).load(”pagina.html#nomeID”);
$("head").append('<script type="text/javascript" src="contatti.js"></script>');
});
Questo dovrebbe andare bene perchè il comando append oltre ad “incollare” quel testo ne legge il contenuto, che in questo caso contiene la chiamata allo script del contac form.
Fammi sapere se ha funzionato
03:14
Ciao Raspo,
Ho fatto una cosa simile per un contact form qualche giorno fa e ora devo ampliare il form con un “Allega file”, ma mi trovo davanti a un problema…
Nel file php devo usare l’array $_FILES oltre a quello $_POST e dopo vari tentativi ho visto che qualcosa non funziona(riesco a spedire la mail ma senza l’alegato) e ho pensato che fosse un problema del comando jquery/ajax $.post. Siccome non conosco ancora perfettamente il jquery volevo sapere se il mio problema può dipendere appunto da esso… Io invece di usare $.ajax ho usato appunto il comando $.post ma penso che alla fine funzionano nello stesso modo, le ho visto usare in diversi script per eseguire la medesima azione, corregimi se sbaglio…
Grazie anticipatamente.
10:18
$.ajax (con type: ‘post’) e $.post sono assolutamente la stessa cosa, lì puoi usare indistintamente senza problemi.
Sinceramente, non ho mai provato ad inviare un email con un allegato, ma dovrebbe essere assolutamente fattibile con ajax, in fondo, si tratta di inviare un informazione più…
Magari, se posti il codice, possiamo provare a ragionarci un po’ su
19:45
Ciao Raspo e’ possibile che il contact form nn funzioni piu? lo sto provando in un sito e nn mi funziona ho riscarikato il tuo file lho installato in server di prova e niente kosa sarà?
19:49
nella stringa inviaemail.php (http://……it/inviaemail.php) nn mi esce piu email inviata ma pagina nn trovata
The page cannot be found
The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.
20:02
scusami Raspo tutto risolto…mancava l’attivazione php hehehe nn mi avevano avvisato…ciaoalla prox x eventuali aggiornamenti
20:26
Scusarti di cosa?! hai fatto tutto da solo XD
Cmq grazie della visita e non esitare a contattarmi per qualsiasi altro dubbio.
17:14
Salve raspo io ho modificato lo script in modo da inviare commenti alle news che inserisco nel mio sito. Ho cambiato la pagina inviamail con una insert into tabella ecc ecc però non me lo fa mai inserire il commento. Da cosa dipende ?
17:53
Le cause potrebbero essere molteplici.
Dovresti darmi più informazioni, un link alla pagina in questione, oppure postare qui una parte del codice che hai cambiato, altrimenti non so come aiutarti.
18:20
ok lo posto subito. Lo sto provando in locale:
questa è la pagina inviamail cambiata:
<?php include_once('ecd-config.php'); mysql_connect($dbhost, $dbuser, $dbpassword) or die(mysql_error()); mysql_select_db($dbname); $comment = "INSERT INTO ecd_commenti_articoli (nome, mail, website, commento, datains, idart) VALUES ('".$_POST['name']."', '".$_POST['email']."', '".$_POST['sito']."', '".$_POST['message']."', ".time().", ".$_POST['id-news'].")"; if (mysql_query($comment)) echo "commento inviato!"; else { echo "Errore"; }questo è il file js contatti:
jQuery(document).ready(function($){ //variabili globali var name = $("#name"); var nameText = $(name).val(); var email = $("#email"); var emailText = $(email).val(); var sito = $("#sito"); var sitoText = $(sito).val(); var message = $("#testo"); var messageText = $(message).val(); //Form validation $("#contatti").submit(function(){ if(!validateName() | !validateEmail() | !validateMessage()){ return false; } else {} }); //validazione di campi function validateEmail(){ var a = $("#email").val(); var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/; if(filter.test(a)){ $("#email").removeClass("error"); return true; } else{ $("#email").addClass("error"); return false; } } function validateName(){ if((name.val().length < 4) || (name.val() == nameText)){ name.addClass("error"); return false; } else{ name.removeClass("error"); return true; } } function validateMessage(){ if((message.val().length < 4) || (message.val() == messageText)){ message.addClass("error"); return false; } else{ message.removeClass("error"); return true; } } //qualche controllo e invio effettivo dell'email con ajax $("#contatti").submit(function(){ if(!validateName() | !validateEmail() | !validateMessage()){ return false; } else { $('#load_img').fadeIn(); $.ajax({ type: 'post', url: 'inviaemail.php', data: 'name=' + name.val() + '&email=' + email.val() + '&site=' + sito.val() + '&message=' + message.val(), success: function(results) { $('#load_img').fadeOut(function() { if(results == "commento inviato!") { $('#result').html("e-Mail inviata correttamente"); $(name).val(nameText); $(email).val(emailText); $(sito).val(sitoText); $(message).val(messageText); } else $('#result').html("Errore") }); } }); // end ajax return false; } }); //gestione dei dati predefiniti nei vari campi quando ricevono il focus //name name.focus(function(){ if($(this).val() == nameText) $(this).val(""); }); name.blur(function(){ if($(this).val() == "") $(this).val(nameText); }); //email email.focus(function(){ if($(this).val() == emailText) $(this).val(""); }); email.blur(function(){ if($(this).val() == "") $(this).val(emailText); }); //Sito web sito.focus(function(){ if($(this).val() == sitoText) $(this).val(""); }); sito.blur(function(){ if($(this).val() == "") $(this).val(sitoText); }); //message message.focus(function(){ if($(this).val() == messageText) $(this).val(""); }); message.blur(function(){ if($(this).val() == "") $(this).val(messageText); }); });18:25
ma i miei commenti arrivano o no ?
18:36
Probabilmente, avendo scritto del codice php senza usare nessun tag tipo <pre>, sei stato preso come uno spammer da Akismet
18:41
ho capito spero di non aver incasinato la pagina con tutti questi commenti
cmq questo è il link da dove sto provando lo script http://www.reteluna.it/sottoportali/ajax-contact-form/
18:56
Non hai incasinato la pagina, ma ho avuto un po’ da fare per togliere i commenti che erano nella coda di spam.
Cmq sembra ci siano un po’ di problemi, nella parte ajax che hai postato leggo:
$.ajax({ type: 'post', url: 'inviaemail.php',Ma non avevi detto di aver: “cambiato la pagina inviamail con una insert into tabella “?
Allora devi cambiare il percorso alla pagina anche in quel punto!
e poi, sempre nella parte ajax c’è scritto ad un certo punto:
Mentre nel php è
queste differenze nei nomi delle variabili “site/sito” possono fare la differenza.
Infine:
Da dov’è che prendi il valore di “id-news” nella pagina contatti?
19:03
allora all’interno della pagina inviamail.php ho messo il codice insert into tabella ecc ecc, quale percorso dovrei cambiare ?
id-news è un campo di tipo hidden che contiene un valore numerico.
Ma anche nello script i valori da inviare nella mail sono presi col post, ho dato gli stessi nomi che stanno nel form.Vabè ora ho riaggiornato la pagina è il campo hidden non c’è. Come dovrei correggere. Purtroppo di ajax non se non nulla io :S
19:21
Dando un occhiata alla pagina, sembra che la parte ajax funzioni correttamente.
Il fatto che restituisca “Errore” significa che devi avere qualche problema col DataBase nella parte php.
19:23
sai cosa, se tolgo i file js, lo script funziona i dati li invia correttamente e non capisco come mai
19:35
Allora il motivo è che non passi il valore di quel campo nascosto “id-news” tramite ajax.
Prova a cambiare la parte in cui invii i dati in questo modo:
data: 'name=' + name.val() + '&email=' + email.val() + '&sito=' + sito.val() + '&message=' + message.val() + '&id-news=' + $("#id-news").val(),
19:42
fatto, ho sostituito inserendo id-news ma continua a darmi errore :S
20:03
Ma questa volta è cambiato l’errore restituito da php! dice:
syntax error, unexpected T_VARIABLE in /web/htdocs/www.reteluna.it/home/sottoportali/ajax-contact-form/inviaemail.php on line 13
E’ una questione di solo php adesso
20:15
yessssssssssssssssssssssssssssssssssssssssss risolto grande raspo XD
20:20
Bene, sono contento per te.
Torna a trovarci!
20:28
come faccio a vedere eventulamente gli errori sul php anche se metto mysql_Error non mi fa vedere niente
22:32
Per vedere gli errori che restituisce il php quando utilizzi ajax, ti serve un plugin tipo firebug per FireFox
13:49
come faccio a controllare usando questo script, se una checkbox è selezionata oppure no ?
15:59
Per prendere le checkbox che sono state selezionate devi fare:
$("input:checked")e poi esegui i controlli di cui hai bisogno.Cmq ho risposto ad una cosa simile precedentemente , puoi prendere spunto da lì.
09:22
[...] abbiamo una serie di input di tipo radio e al click su un qualche pulsante (tipo quello per l’invio di un email) vogliamo sapere quale radio button è stato selezionato [...]
12:00
vorrei chiederti, come far vedere la pagina html da me creata per email inviata Infinitamente grazie.
10:37
Scusami ma non ho proprio capito la domanda…
18:01
sicuramente mi sono espressa male ….. allora sul tasto “invia” quando viene pigiato vorrei far comparire la mia pagina di ringraziamento.
quale è il “tag” da modificare?
oppure cosa bisogna fare per non vedere solo la scritta “email inviata correttamente”
ti ringrazio se puoi farmi comprendere questo passaggio.
19:36
Caricare un’altra pagina vanificherebbe l’aver usato ajax (il cui scopo è appunto quello di evitare il reload).
Comunque modificare lo stile del messaggio di successo è abbastanza semplice.
Cerca il punto in cui dice:
if(results == "email inviata!") {$('#result').html("<span class='success'>e-Mail inviata correttamente</span>");
Invece di limitarti ad usare uno <span> con classe “success”, se conosci un po’ di HTML/CSS puoi sbizzarrirti e inserire tutti i div, immagini, link che desideri, che appariranno dopo il pulsante “invia”.
21:09
Grazie!!!1000
11:59
Ho seguito le tue indicazioni e, tanto per non sbagliare ho modificatosolamente il puntatore della meil.Ilproblema è che il form non da nessun errore ma la mail non arriva. Al momento lascio la pagina così com’ è nel caso volessi testarlo tu stesso.
Grazie
Nico
12:56
Ho provato il form alla pagina http://www.elybijoux.com/contatti.html e sembra tutto ok.
Sei sicuro che l’indirizzo email sia giusto? Hai controllato nella cartella dello spam? alcuni client non riconoscono il formato e mandano le email del contact form tra lo spam.
13:41
RISOLTO! Sembra che l’ inoltro automatico da parte del sito su un’altra casella di posta non rigiri le mail inviate tramite form.strano.
cmq grazie Nico
11:03
Salve non riesco a capire come mai quando spedisco l’email mi da errore di spedizione ma in realtà l’email arriva al destinatario (solo con Fire fox)
11:52
innazitutto grazie per lo script, l’ho scaricato e collegato ad un form che ho creato io… però non funziona o meglio sembra funzionare, ma lo script non effettua ne validazione ne niente, se premo il tasto per inviare il form anche se tutti i campi sono vuoti o pieni mi rimanda ad una pagina bianca con scritto solo “email inviata” o una cosa del genere… cosa può essere ?
12:36
hai controllato se l’indirizzo della pagina che elabora i dati sia lo stesso sia nel file js che nell’action del form ? Poi hai incluso la libreria jquery ? Hai incluso il file css correttamente ? Semagari posti un pò di codice ti poremmo aiutare
12:50
Allora, jquery viene caricato da google, altrimenti senza jquery l’intero template che sto costruendo non funzionerebbe… il file style.css (che è quello principale del mio template) si trova nella cartella css, e a questo ho aggiunto le classi che utilizza per la validazione, i file contatti.js e inviaemail.php si trovano nella root assieme al file index.html
il codice utilizzato è questo
http://pastebin.com/C7kx5XVA
13:09
Il problema è dato dal fatto che jQuery non prende il .submit()
Giusto per curiosità, prova a cambiare:
<input type="image" src="./images/sendmail_button.png" class="contact-input-button"/>in
<input type="submit" class="contact-input-button"/>14:04
ok allora ho notato una cosa, prima mi ero sbagliato, quando dicevo che mi riportava ad una pagina bianca con scritto “email inviata”, non avevo cambiato l’id del form, adesso che ho inserito quello giusto, il form funziona al 50% XD, se scrivo tutti i dati il form funziona ed appare il messaggio di conferma, mentre se provo la validazione i bordi non diventano rossi >_< qualche idea ?
14:46
Ah ok, allora quello è solo un problema di css.
La classe error viene aggiunta, ma nel dichiarare il colore rosso per il bordo devi utilizzare un selettore più specifico
invece di usare semplicemente
.error {border: 1px solid #ff5c5c
}
prova per esempio con
#contactForm input.error {border: 1px solid #ff5c5c
}
Non posso dirti esattamente come fare perchè non ho visto il css che hai usato.
14:52
ok perfetto sono riuscito a farlo funzionare, grazie mille gentilissimo
10:54
Io mi chiedevo invece, usando ajax come potrei fare ad esempio a far visualizzare uno alla volta dei dati prelevati da db ?
14:49
Questo è una cosa che nn ha molto a che fare con gli argomenti del tutorial.
Cmq, il modo più intelligente e sicuro per fare una cosa del genere è quello di preparare una funzione da lato php che fa le richieste al DB e con ajax richiamare la funzione (con un POST ad esempio) e poi prendi quello che restituisce per usarlo come desideri.
La differenza dal puro php sta nel fatto che le richieste le fai con ajax, ma le operazioni sul DB le lasci fare a PHP che è più sicuro.