8795 sujets

Développement web côté serveur, CMS

Soumettre un formulaire sans recharger la page

Bonjour,
Je voudrais savoir comment faire, à l'aide de jQuery (ajax), pour soumettre mon formulaire (ça revient à exécuter du code php), et m'afficher une confirmation (dans #infos) sans recharger complètement la page.
La formulaire en question : http://tinyurl.com/y547g6o
Mon code : 

<p id="infos">



	php
		if($_POST){
			$mailRegex = "/^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/";
			$villeRegex = "/^[a-zA-Z-]+$/";
			$nick = $_POST['nick'];
			$mail = $_POST['mail'];
			$ville = $_POST['ville'];
			if( trim($nick)=='' ){echo "Veuillez indiquer votre nick.<br />";}
			if( trim($mail)=='' ){echo "Veuillez indiquer votre adresse email.<br />";}else
			if( !preg_match($mailRegex,$mail) ){echo "Veuillez indiquer une adresse email valide.<br />";}
			if( trim($ville)=='' ){echo "Veuillez indiquer votre ville.<br />";}else
			if( !preg_match($villeRegex,$ville) ){echo "Veuillez indiquer une ville valide.<br />";}
		}


Merci.
Modifié par Dinduks (21 Apr 2010 - 00:48)
Ajax ou pas Ajax c'est exactement la même façon de procéder.

En fait, c'est juste une vue qui est adapté à Javascript. En règle générale on utilise JSON ou XML comme format de données.

Tu utilises la méthode $.ajax() ou $.post() de jQuery, et tu soumets ces données à une page php qui va te renvoyer correctement formater les données que tu souhaites.

À l'aide d'une fonction de retour que tu définies dans ta méthode $.ajax() tu ajoutes le contenu dans ta div#infos comme tu l'entends.

Consulte la documentation de jQuery, elle est très complète à ce sujet.
Merci pour vos réponses. Smiley smile
J'ai réalisé mon formulaire, mais la doc de jQuery ne m'a pas beaucoup aidé.
J'ai utilisé Ajax pour récuprer un contenu JSON envoyé par le script PHP.

Je poste le code pour ceux qui en auront besoin, on sait jamais. Smiley cligne 


	$infos = array();
	$infos["nick"] = array();
	$infos["mail"] = array();
	$infos["phone"] = array();
	$infos["ville"] = array();
	$infos["done"] = array();
	$done = "Votre inscription s'est bien déroulé ! [cligne]<br />";
	
	$mailRegex = "/^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/";
	$villeRegex = "/^[a-zA-Z-]+$/";
	$phoneRegex = "/^[ 0-9.-]+$/";
	$nick = htmlspecialchars($_POST['nick']);
	$mail = htmlspecialchars($_POST['mail']);
	$phone = htmlspecialchars($_POST['phone']);
	$ville = htmlspecialchars($_POST['ville']);
	$team = htmlspecialchars($_POST['team']);
	$teammate1 = htmlspecialchars($_POST['teammate1']);
	$teammate2 = htmlspecialchars($_POST['teammate2']);
	$teammate3 = htmlspecialchars($_POST['teammate3']);
	$teammate4 = htmlspecialchars($_POST['teammate4']);
	
	if( trim($nick)=='' )
		$infos["nick"] = "Veuillez indiquer votre nick.<br />";
		
	if( trim($mail)=='' ){
		$infos["mail"] = "Veuillez indiquer votre adresse email.<br />"; 
	}else if( !preg_match($mailRegex,$mail) ){
		$infos["mail"] = "Veuillez indiquer une adresse email valide.<br />";
	}
	
	if( trim($phone)=='' ){
		$infos["phone"] = "Veuillez indiquer votre numéro de téléphone.<br />";
	}else if( !preg_match($phoneRegex,$phone) ){
		$infos["phone"] = "Veuillez indiquer un numéro de téléphone valide.<br />";
	}
	
	if( trim($ville)=='' ){
		$infos["ville"] = "Veuillez indiquer votre ville.<br />";
	}else if( !preg_match($villeRegex,$ville) ){
		$infos["ville"] = "Veuillez indiquer une ville valide.<br />";
	}
	
	if( $infos["nick"] != null || $infos["mail"] != null || $infos["phone"] != null || $infos["ville"] != null ){
		$json = json_encode($infos);
		echo $json;
	}else{
		mysql_connect("localhost","root","sBloodyRoots \,,/");
		mysql_select_db("ma_bd");
		mysql_query("INSERT INTO inscriptions ( nick, email, phone, ville, team, teammate1, teammate2, teammate3, teammate4 )
			VALUES ('$nick', '$mail', '$phone', '$ville', '$team', '$teammate1', '$teammate2', '$teammate3', '$teammate4')");
		$infos["done"] = array($done);
		$json = json_encode($infos);
		echo $json;
	}

	exit;



$("#formContainer").submit(function(){
		var nick = $("#nick").val();
		var mail = $("#mail").val();
		var phone = $("#phone").val();
		var ville = $("#ville").val();
		var team = $("#team").val();
		var teammate1 = $("#teammate1").val();
		var teammate2 = $("#teammate2").val();
		var teammate3 = $("#teammate3").val();
		var teammate4 = $("#teammate4").val();
		var dataString = 'nick='+nick+'&mail='+mail+'&phone='+phone+'&ville='+ville+'&team='+team+'&teammate1='+teammate1+'&teammate2='+teammate2+'&teammate3='+teammate3+'&teammate4='+teammate4;
		$.ajax({
			type: "POST",
			url: "bin/script.php",
			data: dataString,
			dataType: "json",
			success: function(json){
				$("#infos").html('');
				if ( json["nick"] != '' ){ $("#nick").css({border:"2px solid red"});$("#infos").append(json["nick"]); }else{ $("#nick").removeAttr("style"); }
				if ( json["mail"] != '' ){ $("#mail").css({border:"2px solid red"});$("#infos").append(json["mail"]); }else{ $("#mail").removeAttr("style"); }
				if ( json["phone"] != '' ){ $("#phone").css({border:"2px solid red"});$("#infos").append(json["phone"]); }else{ $("#phone").removeAttr("style"); }
				if ( json["ville"] != '' ){ $("#ville").css({border:"2px solid red"});$("#infos").append(json["ville"]); }else{ $("#ville").removeAttr("style"); }

				}
			}
		});
		return false;
	});

Modifié par Dinduks (27 Apr 2010 - 16:35)
Sujet clos
Aller à