8791 sujets

Développement web côté serveur, CMS

Transmission données ajax : formulaire + session

Pages :
(reprise du message précédent)

C'est vrai qu'il y a pas mal d'info sur les erreurs Smiley smile

Par contre là j'avoue que je ne comprends pas, dès que je mets le code js le navigateur me marque l'erreur suivant dans la console:
ReferenceError: verifCaptcha is not defined

alors que ça change rien à la fonction principale verifCaptcha !!!
function verifCaptcha(champ){
	dataString = $("#captcha").serialize();
	function retour_php(data){
		if(data['captcha_check'] == "invalid_post"){
			$('#msg_captcha').html("<p>Erreur: $_POST['captcha'] n'est pas défini.</p>");
		}elseif(data['captcha_check'] == "invalid_session"){
			$('#msg_captcha').html("<p>Erreur: $_SESSION['expect'] n'est pas défini.</p>");
		}elseif(data['captcha_check'] == "invalid_captcha"){
			$('#msg_captcha').html("<p>Mauvais Calcul?</p>");
		}elseif(data['captcha_check'] == "valid_captcha"){
			$('#msg_captcha').html("<p>Ok</p>");
		}else{
			$('#msg_captcha').html("<p>Erreur: Valeur de retour inconnue !</p>");
		}
	}
	$.ajax({
		type : "POST",
		url: "php/captcha.php",
		data: dataString,
		dataType: "json",
		success: retour_php,
		error: function(){alert('La requête a échouée !');}
	});
}


Idem, j'ai l'erreur suivante au chargement de la page:
Uncaught SyntaxError: Unexpected identifier

Qui correspond à la ligne suivante:
$('#msg_captcha').html("<p>Erreur: SESSION['expect'] n'est pas défini.</p>");

Idem, pourquoi cette erreur??? aucun appel à la fonction n'a été fait...
a écrit :
Idem, j'ai l'erreur suivante au chargement de la page:
Uncaught SyntaxError: Unexpected identifier

Qui correspond à la ligne suivante:
$('#msg_captcha').html("<p>Erreur: $_SESSION['expect'] n'est pas défini.</p>");


Tu est certain d'avoir un point-virgule à la fin de l'expression, il n'y aurait pas une virgule ou autre chose à la place ?

a écrit :
Idem, pourquoi cette erreur??? aucun appel à la fonction n'a été fait...

Le moteur js de ton navigateur vérifie que le code est syntaxiquement correct avant toute exécution.

Et là ce n'est pas le cas Smiley langue

Pour verifCaptcha, je pense que tu a du insérer la nouvelle méthode au mauvais endroit (à l'intérieur d'une autre fonction par exemple) ?
Non, j'ai bien le ; et c'est tout, ca donne donc:
function verifCaptcha(champ){
	dataString = $("#captcha").serialize();
	function retour_php(data){
		if(data['captcha_check'] == "invalid_post"){
			$('#msg_captcha').html("<p>Erreur: $_POST['captcha'] n'est pas défini.</p>");
		}elseif(data['captcha_check'] == "invalid_session"){
			$('#msg_captcha').html("<p>Erreur: $_SESSION['expect'] n'est pas défini.</p>");
		}elseif(data['captcha_check'] == "invalid_captcha"){
			$('#msg_captcha').html("<p>Mauvais Calcul?</p>");
		}elseif(data['captcha_check'] == "valid_captcha"){
			$('#msg_captcha').html("<p>Ok</p>");
		}else{
			$('#msg_captcha').html("<p>Erreur: Valeur de retour inconnue !</p>");
		}
	}
	$.ajax({
		type : "POST",
		url: "php/captcha.php",
		data: dataString,
		dataType: "json",
		success: retour_php,
		error: function(){alert('La requête a échouée !');}
	});
}


Pour le js, je ne savais pas que le navigateur vérifiait le code avant même sont exécution. J'ai appris un nouveau truc Smiley smile

Sinon, non verifCaptcha n'est pas dans une autre fonction comme tu pourras le voir si dessous:
<script type="text/javascript">
	function surligne(champ, erreur){
		if(erreur){champ.style.backgroundColor = "#F8E0E0";}
		else{champ.style.backgroundColor = "#CEF6CE";}
	}
	function verifNom(champ){
		if(champ.value.length < 2 || champ.value.length > 25){surligne(champ, true);return false;}
		else{surligne(champ, false);return true;}
	}
	function verifMail(champ){
		var regex = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/;
		if(!regex.test(champ.value)){surligne(champ, true); return false;}
		else{surligne(champ, false);return true;}
	}
	function verifSujet(champ){
		if(champ.value.length < 2 || champ.value.length > 50){surligne(champ, true);return false;}
		else{surligne(champ, false);return true;}
	}
	function verifMessage(champ){
		if(champ.value.length < 2 || champ.value.length > 500){surligne(champ, true);return false;}
		else{surligne(champ, false);return true;}
	}
	function verifCaptcha(champ){
		dataString = $("#captcha").serialize();
		function retour_php(data){
			if(data['captcha_check'] == "invalid_post"){
				$('#msg_captcha').html("<p>Erreur: $_POST['captcha'] n'est pas défini.</p>");
			}elseif(data['captcha_check'] == "invalid_session"){
				$('#msg_captcha').html("<p>Erreur: $_SESSION['expect'] n'est pas défini.</p>");
			}elseif(data['captcha_check'] == "invalid_captcha"){
				$('#msg_captcha').html("<p>Mauvais Calcul?</p>");
			}elseif(data['captcha_check'] == "valid_captcha"){
				$('#msg_captcha').html("<p>Ok</p>");
			}else{
				$('#msg_captcha').html("<p>Erreur: Valeur de retour inconnue !</p>");
			}
		}
		$.ajax({
			type : "POST",
			url: "php/captcha.php",
			data: dataString,
			dataType: "json",
			success: retour_php,
			error: function(){alert('La requête a échouée !');}
		});
	}
	$(function(){
		$("#contact").submit(function(event){
			var nom        = $("#nom").val();
			var sujet      = $("#sujet").val();
			var email      = $("#email").val();
			var message    = $("#message").val();
			var dataString = nom + sujet + email + message;
			var msg_all    = 'Merci de remplir tous les champs';
			var msg_alert  = 'Merci de remplir ce champ';
			if(dataString  == ''){$('#msg_all').html(msg_all);}
			else if(nom == ''){$('#msg_nom').html(msg_alert);}
			else if(sujet == ''){$('#msg_sujet').html(msg_alert);}
			else if(email == ''){$('#msg_email').html(msg_alert);}
			else if(message == ''){$('#msg_message').html(msg_alert);}
			else{
				$.ajax({
					type : "POST",
					url: $(this).attr('action'),
					data: $(this).serialize(),
					success : function(){$('#contact').html('<p>Votre email a été envoyé avec succès. Je vérifie ma boîte de réception tout le temps, donc je devrais vous répondre rapidement.</p>');},
					error: function(){$('#contact').html("<p>Erreur d'appel, le formulaire ne peut pas fonctionner</p>");}
				});
			}
			return false;
		});
	});
</script>


Par contre j'ai une erreur maintenant sur les autres fonctions, bizarre...
Bon en fait se sont les elseif en un mot qu'il n'aime pas !

D'ailleurs la coloration syntaxique nous le signale gentiment...

Désolé pour mes soupçons injustifiés Smiley confus
Smiley smile pas de soucis et c'est aussi de ma faute je m'en suis même pas rendu compte... Smiley decu

Je viens de faire la modif, mais là j'ai un message complètement différent:
Uncaught TypeError: Array.prototype.slice called on null or undefined

Il n'y a même plus d'envoi en ajax....
N'ayant pas accès à ton site, c'est difficile d'analyser cette erreur sur la base des infos disponibles dans ce thread.

J'ai reproduit le problème en local vite fait.

- Le formulaire (form.php) :

<?php
session_name("contactform");
session_start();
$_SESSION['n1'] = rand(1,20);
$_SESSION['n2'] = rand(1,20);
$_SESSION['expect'] = $_SESSION['n1']+$_SESSION['n2'];
?>
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('#check_captcha').click( function() {
		var dataString = $("#captcha").serialize();
		$.ajax({
			type : "POST",
			url: "captcha.php",
			data: dataString,
			dataType: "json",
			success: retour_php,
			error: function(){alert('La requête a échouée !');}
		});
	});
	function retour_php(data){
		if(data['captcha_check'] == "invalid_post"){
			$('#msg_captcha').html("Erreur: $_POST['captcha'] n'est pas défini.");
		}else if(data['captcha_check'] == "invalid_session"){
			$('#msg_captcha').html("Erreur: $_SESSION['expect'] n'est pas défini.");
		}else if(data['captcha_check'] == "invalid_captcha"){
			$('#msg_captcha').html("Mauvais Calcul?");
		}else if(data['captcha_check'] == "valid_captcha"){
			$('#msg_captcha').html("Ok");
		}else{
			$('#msg_captcha').html("Erreur: Valeur de retour inconnue !");
		}
	}
});
</script>
</head>
<body>
<input type="button" id="check_captcha" value="Check"/>
<span>Un petit test <?=$_SESSION['n1']?> + <?=$_SESSION['n2']?> =</span>
<input type="text" name="captcha" id="captcha" maxlength="10" placeholder="Captcha" required/>
<span id="msg_captcha"></span>
</body>
</html>


- Le script de réponse ajax (captcha.php) :

<?php
session_name("contactform");
session_start();
$captcha_check = '';
if (!isset($_POST['captcha'])) {
	$captcha_check = 'invalid_post';
} elseif (!isset($_SESSION['expect'])) {
	$captcha_check = 'invalid_session';
} elseif((int)$_POST['captcha'] != $_SESSION['expect']){
	$captcha_check = 'invalid_captcha';
}else{
	$captcha_check = 'valid_captcha';
}
$return_json = '{"captcha_check":"' . $captcha_check . '"}';
echo $return_json;


Tout fonctionne normalement.

L'erreur initiale (ton premier post) venait du fait que session_name("contactform"); était présent dans un script mais pas dans l'autre. Donc les deux scripts faisaient références à des sessions différentes... Il faut soit le mettre dans les deux ou alors le supprimer complètement.

[EDIT] L'autre problème identifié vient que ton code jquery s'exécutait avant que le DOM soit complètement chargé. Pour éviter ce pb, il faut encapsuler le code dans un gestionnaire associé à l'évènement 'ready' du DOM :
$( document ).ready(function() {
/* CODE JQUERY */
});
http://learn.jquery.com/using-jquery-core/document-ready/
Modifié par Fly06 (23 Sep 2013 - 22:08)
Encore une fois merci pour ton aide,

J'ai testé en modifiant ton code car j'utilise Zepto.js vu que le site utilise foundation 4 et quil est prévu pour être très léger.

J'ai donc mis 
ready(function($){ ... })

au lieu de:
$(document).ready(function() {


Du coup j'ai droit à une erreur sur le ready:
Uncaught ReferenceError: ready is not defined

Est-ce que ton code peut être compatible avec Zepto? Par contre, ayant un autre projet en cours utilisant Jquery je suis bien content d'avoir ton script Smiley cligne
Sinon, la je ne peux pas faire le test avant ce soir, mais j'ai pensé à une modif.

Est-ce que ton code mis dans un fichier js externe et appelé en async avant la fermeture de <body> permettrait d'éviter ce problème d'exécution avant le chargement complet du DOM?

Cela éviterai de mettre l'équivalent de $(document).ready(function() { en Zepto non?
Bonsoir,

Désolé du retard j'étais parti pour le boulot sans accès internet Smiley decu

Je vais voir pour faire fonctionner cela avec Zepto. Dès que j'ai réussi, je post mon code et clôture ce sujet pour que cela puisse servir à d'autre

Encore merci
Pages :
Sujet clos
Aller à