Invio e-mail Ajax/PHP

**zimone** · 16-01-2011, 21:12

Ciao a tutti,

ho questo problema.

Classico codice php per l'invio:

Codice PHP:


<form id="formail" method="post" action="">

    <div id="risposta">

    </div>

    

Nome:</p>

    <input type="text" id="nome" name="nome"  value="" />


    

E-mail:</p>

    <input type="text" id="email" name="email"  value="" />


    

Oggetto:</p>

    <input type="text" id="oggetto" name="ogggetto"  value="" />


    

Messaggio:</p>

    <textarea id="messaggio" name="messaggio" rows="9" cols="20"></textarea>


    <input type="submit" id="invia" name="invia" value="Invia" />

    </form>

Qui ho il codice javascript/ AJAX:

codice:

$(document).ready(function(){
	$("#invia").click(function(){
	
	//Recuperiamo tutte le variabili
		var valid = '';
		var isr = ' è richiesto.</p>';
		var name = $("#nome").val();
		var mail = $("#email").val();
		var subject = $("#oggetto").val();
		var messaggio = $("#messaggio").val();
	//Eseguiamo una serie di controlli
		if (name.length<1) {
			valid += '

Un nome valido'+isr;
		}
		if (!mail.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {
			valid += '

Un indirizzo e-mail valido'+isr;
		}
		if (subject.length<1) {
			valid += '

Un oggetto valido'+isr;
		}
		
	//Se i controlli non vengono superati, appare il messaggio di errore.
		if (valid!='') {
			$("#risposta").fadeIn("slow");
			$("#risposta").html("

Errore:</p>"+valid);
			$("#risposta").css("background-color","#ffc0c0");
		}
		//Se i controlli vengono superati, compare un messaggio di invio in corso
		else {
			var datastr ='name=' + name + '&mail=' + mail + '&subject=' + subject + '&messaggio=' + encodeURIComponent(messaggio);
			$("#risposta").css("display", "block");
			$("#risposta").css("background-color","#FFFFA0");
			$("#risposta").html("

Invio del messaggio in corso..</p>");
			$("#risposta").fadeIn("slow");
			setTimeout("send('"+datastr+"')",2000);
		}
		return false;
	});
});


function send(datastr){
	$.ajax({	
		type: "POST",
		url: "email.php",
		data: datastr,
		cache: false,
		success: function(html){
		$("#risposta").fadeIn("slow");
		$("#risposta").html(html);
		$("#risposta").css("background-color","#e1ffc0");
		setTimeout('$("#risposta").fadeOut("slow")',2000);
	}
	});
}

Lo script funziona bene, solo che funziona nel caso in cui nella pagine c'è solo 1 form, invece dovrei fare in modo che funzioni se ci sono altri form nella stessa pagina.

Il mio problema è questo che non riesco a risolvere.
Dovrei fare in modo che ogni volta si preme il pulsante " invia ":

Codice PHP:


<input type="submit" id="invia" name="invia" value="Invia" />

Nella funzione click()

codice:

$(document).ready(function(){
	$("#invia").click(function(){

devo fare in modo che venga passato non sempre lo stesso parametro "#invia" ma deve essere dinamico perchè i miei " form " nascono in base all'ID del messaggio.
Esempio:

Codice PHP:


$idmessaggio // questo cambia per ogni form stampato sulla pagina.



<form id="formail" method="post" action="">

    <div id="risposta">

    </div>

    

Nome:</p>

    <input type="text" id="nome" name="nome"  value="" />


    

E-mail:</p>

    <input type="text" id="email" name="email"  value="" />


    

Oggetto:</p>

    <input type="text" id="oggetto" name="ogggetto"  value="" />


    

Messaggio:</p>

    <textarea id="messaggio" name="messaggio" rows="9" cols="20"></textarea>


    <input type="submit" id="invia_$idmessaggio" name="invia_$idmessaggio" value="Invia" />

    </form>

il code " lo scrivo per farvi capire " dovrebbe venire così:

codice:

$(document).ready(function(){
	$("#invia"_$idmessaggio).click(function(){

Una cosa del genere Ma non so come si fa o comunque non mi funziona :|

Spero di essermi spiegato, il mio click su invia non passa il valore #invia ma cambia in base all'id ....

Grazie ..

**cavicchiandrea** · 17-01-2011, 10:57

Ma l'id messaggio e dinamico generato da php pertanto dovrebbe essere cosi:

codice:

<input type="submit" id="invia<? echo _$idmessaggio ?>" name="invia<? echo _$idmessaggio ?>" value="Invia" />

idem sara per js/jquery

**zimone** · 17-01-2011, 20:12

Originariamente inviato da cavicchiandrea
Ma l'id messaggio e dinamico generato da php pertanto dovrebbe essere cosi:

codice:

<input type="submit" id="invia<? echo _$idmessaggio ?>" name="invia<? echo _$idmessaggio ?>" value="Invia" />

idem sara per js/jquery

è? non siamo costretti a rispondere per forza

**Xinod** · 17-01-2011, 22:34

e' sempre opportuno controllare il submit del form piuttosto che il click di un suo submit

poi, se sai di poter avere piu' form il selettore dev' essere ovviamente piu' generico di un
$("#invia")

puo' essere
$("form")
per tutti i form del documento
o solo i <form> con una certa classe
$("form.classeFormDaInviare")

nella funzione ti andrai a ricavare questo id del messaggio
per esempio, del name del form, se l' hai fatto scrivere li' da php
$("form.classeFormDaInviare").submit(function(){
var idMessaggio=$(this).attr('name').substr(1);
...
})
...
<form name="f12345678">

poi dovrai fare in modo di non avere elementi con id duplicati, piu' elementi non possono avere stesso id
comporre gli id concatenando una parte statica e l' idMessaggio e' una via per poter determinare con precisione di quale elemento stai parlando, ma e' solo una delle possibili vie...
tra selettori e traversing di jquery, appoggiandoti al markup opportuno, puoi fare quello che vuoi

infine, come qui passi datastr
send('"+datastr+"')
non credo ti risulti difficile passare e, successivamente nella funzione, valutare l' idMessaggio

ciao

**zimone** · 18-01-2011, 20:30

Originariamente inviato da Xinod
e' sempre opportuno controllare il submit del form piuttosto che il click di un suo submit

poi, se sai di poter avere piu' form il selettore dev' essere ovviamente piu' generico di un
$("#invia")

puo' essere
$("form")
per tutti i form del documento
o solo i <form> con una certa classe
$("form.classeFormDaInviare")

nella funzione ti andrai a ricavare questo id del messaggio
per esempio, del name del form, se l' hai fatto scrivere li' da php
$("form.classeFormDaInviare").submit(function(){
var idMessaggio=$(this).attr('name').substr(1);
...
})
...
<form name="f12345678">

poi dovrai fare in modo di non avere elementi con id duplicati, piu' elementi non possono avere stesso id
comporre gli id concatenando una parte statica e l' idMessaggio e' una via per poter determinare con precisione di quale elemento stai parlando, ma e' solo una delle possibili vie...
tra selettori e traversing di jquery, appoggiandoti al markup opportuno, puoi fare quello che vuoi

infine, come qui passi datastr
send('"+datastr+"')
non credo ti risulti difficile passare e, successivamente nella funzione, valutare l' idMessaggio

ciao

Grazie per la risposta !!!

Allora ci sono, ho fatto così non ti metto tutto il codice perchè c'è sopra:

codice:

$(document).ready(function(){
	$("form.example").submit(function(){
	var id=$(this).attr('name');
		var valid = '';
		var isr = ' è richiesto.</p>';
		var name = $("#nome_"+id).val();
		var mail = $("#email_"+id).val();
		var subject = $("#oggetto_"+id).val();
		var messaggio = $("#messaggio_"+id).val();
		...
if (valid!='') {
			$("#risposta_"+id).fadeIn("slow");
			$("#risposta_"+id).html("

Errore:</p>"+valid);
			$("#risposta_"+id).css("background-color","#ffc0c0");
		
}else {
var datastr ='name=' + name +'&id=' + id + '&mail=' + mail + '&subject=' + subject + '&messaggio=' + encodeURIComponent(messaggio);
			$("#risposta_"+id).css("display", "block");
			$("#risposta_"+id).css("background-color","#FFFFA0");
			$("#risposta_"+id).html("

Invio del messaggio in corso..</p>");
			$("#risposta_"+id).fadeIn("slow");
			
			setTimeout("send('"+datastr+"')",2000);
		}
		return false;
	});
});

function send(datastr){
	
	//document.write(id);
	$.ajax({	
		type: "POST",
		url: "mail.php",
		data: datastr,
		cache: false,
		success: function(html){
			
		$("#risposta_"+id).fadeIn("slow");
		$("#risposta_"+id).html(html);
		$("#risposta_"+id).css("background-color","#e1ffc0");
		
		setTimeout($("#risposta_"+id).fadeOut("slow"),2000);
	}
	});
}

Funziona tutto bene, i vari form che ho nella pagina lavorano bene, ho solo questo problema:

praticamente mi rimane in pending il messaggio .. "Invio del messaggio in corso.."
Mi spedisce l'email correttamente, quindi i dati l'ajax li passa correttamente nell'altro file "mail.php", solo che nella risposta di successo es: " messaggio inviato correttamente ... " presente nel file mail.php non mi viene stampato.

Forse non riconosce l'id su questo pezzo di codice:

codice:

function send(datastr){
	
	//document.write(id);
	$.ajax({	
		type: "POST",
		url: "mail.php",
		data: datastr,
		cache: false,
		success: function(html){
			
		$("#risposta_"+id).fadeIn("slow");
		$("#risposta_"+id).html(html);
		$("#risposta_"+id).css("background-color","#e1ffc0");
		
		setTimeout($("#risposta_"+id).fadeOut("slow"),2000);
	}
	});
}

Come posso passarlo id alla funzione send?

**zimone** · 18-01-2011, 20:50

Ce l'ho fatta!

codice:

...
setTimeout(send(datastr,id) ,2000);
...

e poi :

codice:

function send(datastr,id){
	//alert("sdasdasd2222: " + id);
	$.ajax({	
		type: "POST",
		url: "send_inserzionista.php",
		data: datastr,
		cache: false,
		success: function(html){
			//alert("sdasdasd: " + id);
		$("#risposta_"+id).fadeIn("slow");
		$("#risposta_"+id).html(html);
		$("#risposta_"+id).css("background-color","#e1ffc0");
		
		setTimeout($("#risposta_"+id).fadeOut("slow"),2000);
	}
	});
}

Discussione: Invio e-mail Ajax/PHP

Strumenti discussione

Ricerca discussione

Visualizza

Invio e-mail Ajax/PHP

Permessi di invio