[Résolu] JQuery/Ajax - "Status Canceled"

Bonjour à tous,

J'ai fais un formulaire HTML tout bête.

<form method="post" action="">
	<label for="nom">Nom :</label><input type="text" id="nom" class="verif" name="nom"><br />
	<label for="prenom">Prénom :</label><input type="text" id="prenom" class="verif" name="prenom"><br />
	<label for="prenom">Téléphone :</label><input type="text" id="telephone" class="verif" name="telephone"><br />
	<label for="message">Message :</label><textarea id="message" class="verif" name="message"></textarea><br />
	<input type="submit" id="boutonEnvoyer" value="Envoyer">
</form>
<div id="messageInfo"></div>

A ça, j'ai un fichier JS associé qui réagit lors du clic sur le bouton "Envoyer".

$('#boutonEnvoyer').click(function(){
var nom = $('#nom').val();
		var prenom = $('#prenom').val();
		var telephone = $('#telephone').val();
		var message = $('#message').val();
		
		$.ajax({
			url: 'envoi_mail.php',
			type: 'POST',
			data: 'nom='+nom+'&prenom='+prenom+'&telephone='+telephone+'&message='+message,
			dataType: 'text',
			success: function(code_html, statut){
				alert('Succès');
				alert(code_html);
			},
			
			error: function(XMLHttpRequest, textStatus, errorThrown){
				alert('XMLHttpRequest : '+XMLHttpRequest);
				alert('textStatus : '+textStatus);
				alert('errorThrown : '+errorThrown);
			},
complete: function(resultat, statut){
				alert('Complété');
			}
		});

Le soucis que j'ai, c'est que les différents "alert" présents m'indiquent qu'il y a une erreur mais à aucun moment ça me donne une indication sur ce que ça pourrait être...

Google Chrome, dans l'onglet "Network" de l'inspecteur m'affiche pour le fichier PHP de traitement "Status (canceled)".

Le fichier en question est franchement tout simple.

if((isset($_POST['nom'])) && (isset($_POST['prenom'])) && (isset($_POST['telephone'])) && (isset($_POST['message']))) {
	if((!empty($_POST['nom'])) && (!empty($_POST['prenom'])) && (!empty($_POST['telephone'])) && (!empty($_POST['message']))) {
		$nom = $_POST['nom'];
		$prenom = $_POST['prenom'];
		$telephone = $_POST['telephone'];
		$message = $_POST['message'];
		
		echo 'Success';
	} else {
		echo 'Failed';
	}
} else {
	echo 'Failed';
}

Si quelqu'un a, ne serait-ce qu'une piste, je suis preneur sachant que c'est la première fois que j'utilise de l'Ajax.

Merci d'avance !
Modifié par j0r (31 May 2013 - 12:26)

Bonjour j0r,

Je t'avoue que ton erreur n'est pas claire, une page d'exemple serait pas mal.
Mais je pense que l'erreur peut venir du fait qu'en cliquant sur ton bouton, tu valide le formulaire et tu appel ta fonction js, ce qui peut (à mon avis mais je ne suis pas expert ) parasiter et faire echouer ton envoie en ajax...
Essaye plustôt avec un évènement :

<form method="post" action="" onsubmit="ta_fonction_js(); return false;">

-->Le "retrun false;" est pour empêcher l'envoi de la page.

et au lieu de mettre ton ajax dans l'évènement "click" du bouton, tu le met dans "ta_fonction_js()"

Voilà, en espérant t'avoir aider

Bonjour toukilbv,

Merci de ta réponse !

Bizarrement, en essayant ce que tu m'as dit, la console m'affiche furtivement que ma fonction n'est pas définie alors que le fichier .js est bien appelé et chargé.

Par ailleurs, le "return false;" n'a pas l'air de fonctionner non plus étant donné que la page se recharge... Étrange.

J'ai mis une version en ligne accessible ICI.

Cette version est identique à ce qui est marqué dans mon premier message. Si après avoir vu le résultat tu souhaites que je fasse comme tu m'as dit, préviens moi et je mettrai ça en ligne.

Merci de ton aide en tout cas !
Modifié par j0r (10 Jun 2013 - 09:54)

J'ai bien regarder ton fichier javascript : et en fait tu n'a pas besoin de valider ton formulaire car tu recupère les valeurs dans ta fonction js.

Ce que je peux te proposer pour ne pas envoyer le formulaire :
Met le bouton en dehors du formulaire :

<form method="post" action="">
	<label for="nom">Nom :</label><input type="text" id="nom" class="verif" name="nom"><br />
	<label for="prenom">Prénom :</label><input type="text" id="prenom" class="verif" name="prenom"><br />
	<label for="prenom">Téléphone :</label><input type="text" id="telephone" class="verif" name="telephone"><br />
	<label for="message">Message :</label><textarea id="message" class="verif" name="message"></textarea><br />
	<!--tu enlève le bouton -->
</form>
<!-- Et tu le met en dehors du formulaire avec un type en "button" -->
<input type="button" id="boutonEnvoyer" value="Envoyer">
<div id="messageInfo"></div>

De cette façon, le clique sur le bouton va appeler ton évènement "on click" sans envoyer ton formulaire.
Redis moi le résultat des tests
Modifié par toukilbv (31 May 2013 - 12:05)

toukilbv a écrit :
J'ai bien regarder ton fichier javascript : et en fait tu n'a pas besoin de valider ton formulaire car tu recupère les valeurs dans ta fonction js.

Ce que je peux te proposer pour ne pas envoyer le formulaire :
Met le bouton en dehors du formulaire :

<form method="post" action="">
	<label for="nom">Nom :</label><input type="text" id="nom" class="verif" name="nom"><br />
	<label for="prenom">Prénom :</label><input type="text" id="prenom" class="verif" name="prenom"><br />
	<label for="prenom">Téléphone :</label><input type="text" id="telephone" class="verif" name="telephone"><br />
	<label for="message">Message :</label><textarea id="message" class="verif" name="message"></textarea><br />
	<!--tu enlève le bouton -->
</form>
<!-- Et tu le met en dehors du formulaire avec un type en "button" -->
<input type="button" id="boutonEnvoyer" value="Envoyer">
<div id="messageInfo"></div>

De cette façon, le clique sur le bouton va appeler ton évènement "on click" sans envoyer ton formulaire.
Redis moi le résultat des tests

C'était ça le soucis, maintenant ça fonctionne bien, merci beaucoup à toi, je m'arrachais les cheveux depuis 2/3 jours déjà et ce n'est pas évident lorsqu'on débute en Ajax de débugguer soi-même...

Je marque en "Résolu".
Modifié par j0r (31 May 2013 - 12:26)

Ca marche
Bonne continuation!