Validation de formulaire html/php + jGrowl en retour Html

par **warda** » 19 janv. 2012, 13:04

Y aurait peut-être une solution en XMLHttpRequest dit Ajax

L'idée serait de passer des variables en GET dans le fichier.php et de les récupérer dans le fichier.html dans lequel se trouve le formulaire.

J'ai ajouté ça dans le fichier.php

if($_GET['success']) == 'jGrowl-good'){print}

if($_GET['errors']) == 'jGrowl-bad'){print}

et ça dans le fichier.html

Code : Tout sélectionner

		<script type='text/javascript'>
		function createXhrObject()
		{
		    if (window.XMLHttpRequest)
		        return new XMLHttpRequest();

		    if (window.ActiveXObject)
		    {
		        var names = [
		            "Msxml2.XMLHTTP.6.0",
		            "Msxml2.XMLHTTP.3.0",
		            "Msxml2.XMLHTTP",
		            "Microsoft.XMLHTTP"
		        ];
		        for(var i in names)
		        {
		            try{ return new ActiveXObject(names[i]); }
		            catch(e){}
		        }
		    }
		    window.alert("Votre navigateur ne prend pas en charge l'objet XMLHTTPRequest.");
		    return null; // non supporté
		}
		xhr = createXhrObject();
		</script>
		<script type='text/javascript'>
				$('#success').ready(function(){
					jGrowlTheme(
					'form', // LE NON DU THEME : BASIC OU MONO OU LES MIENS
					'Message envoyé avec succès', // Ici on met le titre
					'vous recevrez une réponse dans les meilleurs délais'
					);
				});
		</script>

Mais il me manque un élément pour enclencher l'événement à l'envoi du formulaire.
Ça devrait être quelque chose comme, non ?

<input type="submit" id="submit-button" value="envoyer" onclick="request('GET','page.php?var=param1','',);return(false)" />

par **xTG** » 18 janv. 2012, 20:51

php-growl n'a rien à voir.
C'est pour dialoguer avec des sockets entre le client et le serveur.

Pour le second par exemple ça ressemble à de l'Ajax.
Mais j'ai plutôt l'impression que ce soit de la communication entre deux serveurs.

par **warda** » 18 janv. 2012, 16:31

Tant qu'a se casser la tête, autant y aller franchement, non ?

Je vais jeter un oeil sur l'Ajax...

Ah tiens, je suis tomber sur ces deux post (en anglais avec des morceaux de python dans l'un)... si ça te parle

http://stackoverflow.com/questions/6287 ... l-from-php
http://stackoverflow.com/questions/1109 ... web-server

En tout cas, merci pour ton aide.

Pour l'instant, je laisse le topic ouvert... on ne sait jamais.

par **xTG** » 18 janv. 2012, 16:13

Tu peux transformer le traitement de ton formulaire avec de l'Ajax mais au final ce sera plus compliqué à gérer que du PHP selon moi.
Regardes du côté de la fonction serialize et $.post de jQuery.

par **warda** » 18 janv. 2012, 16:04

Bah... ouais,

c'est ce que je craignais. Car vois-tu, toutes mes pages sont construites selon le même modèle avec un footer en bas qui contient entre autre le formulaire.

Ça veut dire que toutes mes pages devront avoir une extension .php.

Mais je ne comptais pas me lancer dans un site tout php, sinon j'aurais piocher un cms de type wordpress, joomla ou même drupal voire modx.

Je voulais commencer doucement avec quelques "petites" difficultés

Y a pas moyen de faire ce que je veux sans changer les extensions de mes pages avec de l'Ajax par exemple ou du Json (je dis ça mais j'y connais rien mais j'ai vu passer un truc qui s'appelle jqSajax_1.0.1) ?

par **xTG** » 18 janv. 2012, 15:40

Tu sembles avoir compris.

En effet il faudra changer l'extension de ta page.
Mais cela ne pose pas de problème hormis qu'il te faudra modifier tout lien y amenant.

par **warda** » 18 janv. 2012, 15:12

Oui effectivement... y a une logique... qui échappe pas mal au noob que je suis. Conséquence : je met du temps à percuter.
Car c'est pas du tout intuitif tout ça. Le html+css ça passe mais dès qu'on touche au js / php / ruby / etc.

Par contre, le code que je dois mettre sur ma page qui contient le formulaire (ce n'est pas une seule page dédiée !), il faut bien qu'il soit précédé d'un <?php et finir par un ?> comme ceci :

		<?php
		if(isset($_GET['success']) && ($_GET['errors']) == 'afficher'){
			echo '<script type="text/javascript">alert(\'
				$("#ko").ready(function(){
				jGrowlTheme("form","Message pas envoyé","Arrgghh");
				});
			\');</script>';
		}
		?>

De fait, il ne peut être traité que si ma page index.html (qui contient le formulaire) devient index.php ?
Ce qui va me poser un sérieux souci.

Pour plus de clarté , je te donne l'adresse de mon site avec juste la page principale pour que ce soit plus concret

http://www.achraf-reda.net

par **xTG** » 18 janv. 2012, 10:03

Non rien à voir avec l'Ajax ce que tu as codé.
Mais tu n'as pas compris mon code.
Le header() est sur ta page de traitement et la condition php et le code JS sur ta page de formulaire !
Car dans ton cas tu réceptionnes bien la variable dans l'url mais il n'y a rien sur ta page pour le traiter.

par **warda** » 18 janv. 2012, 08:07

Heuu... d'accord !

Je croyais que le code js devait se trouver sur ma page de formulaire = index.html comme ci-dessous ?
(dans ce cas de figure le jGrowl marche très bien)

<!DOCTYPE html>
<html lang="fr">
    <head>
		<link rel="stylesheet" type="text/css" href="css/mes_css/jquery.jgrowl.css">
		<link rel="stylesheet" type="text/css" href="css/mes_css/jgrowl-theme.css">
		<script src="js/libs/jquery-1.7.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mes_js/jquery.jgrowl.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mes_js/jgrowl-theme.js" type="text/javascript" charset="utf-8"></script>
		<script type='text/javascript'>
			$('#errors').ready(function(){
				jGrowlTheme(
				'form', // Ici le nom du theme
				'Message pas envoyé', // Ici on met le titre
				'Arrgghh' // Ici le message
				);
			});
		</script>
    </head>
    <body>
	<div id="contact_form" class="clearfix">
		<form method="post" action="process.php">
		<label for="message"></label>
		<textarea id="message" name="message" placeholder="Votre message ici" data-minlength="20"></textarea>
		<label for="email"></label>
		<input type="text" id="email" name="email" placeholder="votre e-mail"/>
		<label for="name"></label>
		<input type="text" id="name" name="name" placeholder="votre nom"/>
		<input type="submit" id="submit-button" value="envoyer" />
		</form>
	</div><!-- END contact_form -->
    </body>
</html>

Suivant tes conseils, j'ai ajouté quelques lignes à ma page process.php

<?php
// On démarre la session AVANT d'écrire du code
ob_start();
	
	if(isset($_POST) && isset($_POST['name']) && isset($_POST['email']) && isset($_POST['message'])){
		
		//sumbission data
		$date = date('d/m/Y');
		$time = date('H:i:s');
		$ipaddress = $_SERVER['REMOTE_ADDR'];
		
		if(isset($_GET['success']) && ($_GET['errors']) == 'afficher'){
		  echo "<script> function(); </script>";
		}

		extract($_POST);
		
		if(!empty($name) && !empty($email) && !empty($message)){
			$message=str_replace("\'","'",$message);
			$destinataire="[email protected]";
			$sujet="[Formulaire de contact] Nouveau message";
			$headers = "From: Form Processor" . "\r\n";
			$headers .= 'Content-type: text/html; charset=utf-8' . "\r\n";
			$emailbody = "<p>Un nouveau message a été envoyé depuis le formulaire.</p>
						  <p><strong>Nom : </strong> {$name} </p>
						  <p><strong>Adresse e-mail : </strong> {$email} </p>
						  <p><strong>Message : </strong> {$message} </p>
						  <p>Adresse IP de l'exp. : {$ipaddress} on {$date} at {$time}</p>";

			mail($destinataire,$sujet,$emailbody,$headers);
			header('location: http://www.mon-site.net/index.html?success=afficher');
		}
		else {
			header('location: http://www.mon-site.net/index.html?errors=afficher');
		}
	} // fin du if (!isset($_POST)...)
ob_end_flush();
?>

Bah, la page est bien redirigée mais le jgrowl ne s'affiche pas ! !

Sur les sites que j'ai parcouru, on parle d'utiliser Ajax pour faire circuler des variables d'une page à une autre lorsque du html, du php et du js sont en "conflit" potentiel.
Parce que c'est un peu ça mon truc.
Je demande à une page html d'aller chercher une variable dans une page php et de l'exécuter à travers un script js ! Non ?
Je me suis lancé dans quelque chose de balaise pour un début.

par **xTG** » 17 janv. 2012, 09:58

Non pas du tout.
Voici le principe :

header('Location: unePage.php?unParam=afficherJs');

if( isSet($_GET['unParam']) && $_GET['unParam'] == 'afficherJs' ){
  echo '<script type="text/javascript">alert(\'un script JS\');</script>';
}

par **warda** » 17 janv. 2012, 03:36

@ xTG, merci...

donc ce serait quelque chose comme ça

ob_start();
$success='success';
header('location: http://www.mon-site.net=' . $success);
ob_end_flush();

et

Code : Tout sélectionner

		<script type='text/javascript'>
			var process = document.window.location="process.php";
			var success = 'http://www.mon-site.net=success/';
			if(process + success){
				$('#bravo').ready(function(){
					jGrowlTheme(
					'form', // nom du theme
					'Message envoyé avec succès', // Ici  le titre
					'vous recevrez une réponse dans les meilleurs délais' // Ici le message
					);
				});
			}
		</script>

par **xTG** » 16 janv. 2012, 07:42

Le code JS de jGrowl ainsi qu le message doit être sur la page du formulaire.
Ton echo dans la page de vérification ne sera jamais vu à cause de la redirection serveur.
Pour faire ce que tu veux il faut passer un argument dans l'url de redirection.
Et sur ta page de formulaire exécuter un code JS en fonction de cet argument.

par **warda** » 15 janv. 2012, 23:39

Bonjour,
je suis un gros noob en php ! Alors désolé par avance de poser une question un peu bateau !!

Sur le site que je suis en train d'écrire, j'ai intégré un formulaire de contact dans une page "index.html".
Le quidam qui passe s'en sert pour m'envoyer un message. Le formulaire passe par la moulinette du serveur et je récupère les infos sur une BALE.

Je voudrais faire ceci :
- après avoir rempli tous les champs et cliqué sur "Envoyer", le quidam est dirigé sur index.html et un "bloc" apparait pour lui dire que son message a été envoyé.
- si le quidam oublie de remplir un champ (donc erreur), est dirigé sur index.html et un "bloc" apparait pour lui dire qu'il y a un problème.

Petit plus, le "bloc" qui doit apparaître imite la notification Growl (avec javascript jGrowl).

Attention, je voudrais "rediriger" d'abord (après succès ou échec du formulaire) puis ensuite afficher un message de succès ou d'erreurs.
Tout ça doit se passer sur la page index.html et non pas sur la page process.php. Cette dernière ne "sert" qu'a valider le formulaire et renvoyer les datas.

J'ai tenté plusieurs choses mais ça ne marche pas. Pouvez-vous m'aider, svp ? Merci.

Dans le fichier index.html, on trouve ceci pour le formulaire :

<div id="contact_form" class="clearfix">
				<form method="post" action="process.php">
					<label for="message"></label>
					<textarea id="message" name="message" placeholder="Votre message ici" data-minlength="20"></textarea>
					<label for="email"></label>
					<input type="text" id="email" name="email" placeholder="votre e-mail"/>
					<label for="name"></label>
					<input type="text" id="name" name="name" placeholder="votre nom"/>
					<input type="submit" value="envoyer" id="submit-button" />
			    </form>
			</div><!-- END contact_form -->

Dans le fichier process.php, on trouve ceci pour le traitement du formulaire :

<?php
	if(isset($_POST) && isset($_POST['name']) && isset($_POST['email']) && isset($_POST['message'])){
		
		//sumbission data
		$date = date('d/m/Y');
		$time = date('H:i:s');
		$ipaddress = $_SERVER['REMOTE_ADDR'];

		extract($_POST);
		
		if(!empty($name) && !empty($email) && !empty($message)){
			$message=str_replace("\'","'",$message);
			$destinataire="contact@mon_site.fr";
			$sujet="[Formulaire de contact] Nouveau message";
			$headers = "From: Form Processor" . "\r\n";
			$headers .= 'Content-type: text/html; charset=utf-8' . "\r\n";
			$emailbody = "<p>Un nouveau message a été envoyé depuis le formulaire.</p>
						  <p><strong>Nom : </strong> {$name} </p>
						  <p><strong>Adresse e-mail : </strong> {$email} </p>
						  <p><strong>Message : </strong> {$message} </p>
						  <p>Adresse IP de l'exp. : {$ipaddress} on {$date} at {$time}</p>";

			mail($destinataire,$sujet,$emailbody,$headers);			

			header('Location : http://www.mon_site.fr');
		}
		else {
			echo "Vous n'avez pas rempli tous les champs";
		}
	} // fin du if (!isset($_POST)...)
?>

Le .js qui imite la notification Growl (et annonce à l'internaute/quidam que son message a bien été envoyé ou non) :

Code : Tout sélectionner

$('#success').ready(function(){
				jGrowlTheme(
				'form', //
				'Votre message a bien été envoyé', // 
				'vous recevrez une réponse bientôt' // 
			);

J'ai essayé un truc avec

Code : Tout sélectionner

header('Location : http://www.mon_site.fr');

ou

Code : Tout sélectionner

ob_start();
echo "jGrowl machin code js";
header('Location: http://www.mon_site.fr');
ob_end_flush();

Validation de formulaire html/php + jGrowl en retour Html

Répondre

Étendre la vue Revue du sujet : Validation de formulaire html/php + jGrowl en retour Html

Re: Validation de formulaire html/php + jGrowl en retour Htm

Re: Validation de formulaire html/php + jGrowl en retour Htm

Re: Validation de formulaire html/php + jGrowl en retour Htm

Re: Validation de formulaire html/php + jGrowl en retour Htm

Re: Validation de formulaire html/php + jGrowl en retour Htm

Re: Validation de formulaire html/php + jGrowl en retour Htm

Re: Validation de formulaire html/php + jGrowl en retour Htm

Re: Validation de formulaire html/php + jGrowl en retour Htm

Re: Validation de formulaire html/php + jGrowl en retour Htm

Re: Validation de formulaire html/php + jGrowl en retour Htm

Re: Validation de formulaire html/php + jGrowl en retour Htm

Re: Validation de formulaire html/php + jGrowl en retour Htm

Validation de formulaire html/php + jGrowl en retour Html