Forum d'entraide PHPFrance

Venez poser vos questions PHP, MySQL, HTML5, CSS, Javascript, Gestion de serveurs à la communauté PHPfrance
https://forum.phpfrance.com/

Envoi d'un formulaire > empêcher l'actualisation de la page

https://forum.phpfrance.com/viewtopic.php?f=8&t=267105

Page 1 sur 1

Envoi d'un formulaire > empêcher l'actualisation de la page

Posté : 08 févr. 2013, 18:37
par mtthjntt
Bonjour à tous,

Alors voila après plusieurs jours passés sur un formulaire html et un script php qui récupère ces données et les envoient directement sur une adresse mail, il me reste un ultime petit problème à régler. A côté de mon bouton envoyer j'ai un texte où c'est écrit "merci de remplir tous les champs", si par exemple l'utilisateur fait une erreur dans son adresse mail alors le formulaire n'est pas envoyé et ce texte devient "adresse email invalide". Si tout est OK, alors ce même texte devient quelque chose comme "Merci, votre message a bien été envoyé".

Mon problème c'est que, dans l'exemple de l'adresse mail erronée, si l'utilisateur clique sur le bouton envoyé alors ma page est actualisée et je remonte tout en haut de page. Le message n'est alors pas forcément perçu par les utilisateurs qui pourront croire que leur réponse a été envoyée. Le formulaire se trouve tout en bas de la page (sur un site en single page). Ma question est donc la suivante : N'y-a-t-il pas un moyen d'empêcher que la page s'actualise au moment de l'envoi du formulaire?

J'ai cherché du côté de onsubmit = return false mais je n'arrive pas à l'implémenter dans mon code : 
<?php
$erreur = NULL;
$info = NULL;
if(!empty($_POST['email']) && isset($_POST['action']) && $_POST['action'] == 'envoi' ){
	    $nom = $_POST['nom'];
        $prenom = $_POST['prenom'];
        $huit_avril = $_POST['huit_avril'];
        $nbr_adultes_huit_avril = $_POST['nbr_adultes_huit_avril'];
        $nbr_enfants_huit_avril = $_POST['nbr_enfants_huit_avril'];
        $treize_avril = $_POST['treize_avril'];
        $nbr_adultes_treize_avril = $_POST['nbr_adultes_treize_avril'];
        $nbr_enfants_treize_avril = $_POST['nbr_enfants_treize_avril'];
        $cinq_mai = $_POST['cinq_mai'];
        $nbr_adultes_cinq_mai = $_POST['nbr_adultes_cinq_mai'];
        $nbr_enfants_cinq_mai = $_POST['nbr_enfants_cinq_mai'];
	extract($_POST);
	if(preg_match("#^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$#", $email)){	
	
		$email = htmlspecialchars(addslashes($email));
		
		$reponse = htmlspecialchars(addslashes($reponse));
		$destinataire = "[email protected]";
		$sujet = "Un nouvel invité a répondu à l'invitation !";
		$entete = 'From : '.$email.'';
		$reponse= 'Linvité(e): '.$nom.' '.$prenom.' sera présent(e) aux dates du '."\n".' '."\n".' - 8 avril : '.$huit_avril.'. Il y aura '.$nbr_adultes_huit_avril.' adultes et '.$nbr_enfants_huit_avril.' enfants '."\n".' '."\n".' - 13 avril : '.$treize_avril.'. Il y aura '.$nbr_adultes_treize_avril.' adultes et '.$nbr_enfants_treize_avril.' enfants '."\n".' '."\n".' - 05 mai : '.$cinq_mai.'. Il y aura '.$nbr_adultes_cinq_mai.' adultes et '.$nbr_enfants_cinq_mai.' enfants '."\n".'   ';
		
		mail($destinataire,$sujet,$reponse,$entete);
		
		$info = "Merci, votre message a été envoyé";
		
		unset($_POST, $reponse, $nom, $prenom, $email);
 }
	else{
	$erreur="Adresse email invalide";
	}
 
}
else{
	$erreur = "Merci de remplir tous les champs.";
}

?>

<!doctype html>
<html lang="en-US">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Bar Mitzvah</title>
  <link rel="shortcut icon" href="favicon.ico">
  <link rel="icon" href="favicon.ico">
  <link rel="stylesheet" type="text/css" href="styles.css">
  

		
	<!-- Start WOWSlider.com HEAD section -->
	<link rel="stylesheet" type="text/css" href="style_wow.css" />
	<script type="text/javascript" src="js/jquery.js"></script>
	<!-- End WOWSlider.com HEAD section -->
	
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>
	<!-- Partie Religieux -->
	<div id="religieux">
		<div class="religieux-content">
			<img src="images/religieux2.jpg" alt="wtf?!" >
			<p class="map1"><a href="https://maps.google.fr/maps?q=47+rue+malleville&ie=UTF8&hnear=47+Rue+de+Malleville,+95880+Enghien-les-Bains,+Val-d'Oise,+%C3%8Ele-de-France&gl=fr&t=m&z=16" target="_blank">Localiser sur Google Maps</a></p>
		</div>
	</div>
	<div class="transition"></div>
	
	<!-- Partie Soirée -->
	<div id="party">
		<div class="party-content">
			<object type="application/x-shockwave-flash" data="images/anim_etoiledavid.swf" width="550px" height="400px"><param name="movie" value="ADRESSE" /><param name="allowFullScreen" value="true" /></object>
			
			<img src="images/party2.jpg" alt="wtf?!" >
			<p class="map2"><a href="https://maps.google.fr/maps?q=66+Rue+Jean-Jacques+Rousseau,+Paris&hl=en&ie=UTF8&sll=48.967598,2.305452&sspn=0.007269,0.01929&oq=66+rue+jean+jac&gl=fr&hnear=66+Rue+Jean-Jacques+Rousseau,+75001+Paris,+%C3%8Ele-de-France&t=m&z=16" class="map1"target="_blank">Localiser sur Google Maps</a></p>
			
	<div id="wowslider-container1">
	<div class="ws_images"><ul>
<li><img src="images/sam.jpg" alt="" title="" id="wows1_0"/></li>
<li><img src="images/test2.jpg" alt="" title="" id="wows1_1"/></li>
<li><img src="images/test3.jpg" alt="" title="" id="wows1_2"/></li>
<li><img src="images/test4.jpg" alt="" title="" id="wows1_3"/></li>
</ul></div>
<div class="ws_bullets"><div>
<a href="#" title="">1</a>
<a href="#" title="">2</a>
<a href="#" title="">3</a>
<a href="#" title="">4</a>
</div></div>
		
		</div>
		
		<br /><br />
	</div>
	
	<!-- Coupon réponse -->
	<div id="coupon-reponse">
		<div class="coupon-reponse-content">
			<img src="images/header-coupon-reponse.jpg" alt="wtf?!" >
			
			<!-- formulaire -->
			<form name="form" action="<?$PHP_SELF;?>" method="post" >
                        Nom, prenom : <input type="text" name="nom"> <input type="text" name="prenom"><br /><br />

                        Je serai present le : <br /><br />

                        Le 8 avril 2013 <input type="radio" name="huit_avril" value="oui"> oui <input type="radio" name="huit_avril" value="non"> non <br />
                        <i> Si oui : nombre d'adultes <input type="text" name="nbr_adultes_huit_avril" style="width:25px;margin-right:25px;"> nombre d'enfants (- de 12 ans) <input type="text" name="nbr_enfants_huit_avril" style="width:25px;"></i><br />
                        <br />
                        Le 13 avril 2013 <input type="radio" name="treize_avril" value="oui"> oui <input type="radio" name="treize_avril" value="non"> non <br />
                        Si oui : nombre d'adultes <input type="text" name="nbr_adultes_treize_avril" style="width:25px;margin-right:25px;"> nombre d'enfants (- de 12 ans) <input type="text" name="nbr_enfants_treize_avril" style="width:25px;"><br />
                        <br />
                        Le 05 mai 2013 <input type="radio" name="cinq_mai" value="oui"> oui <input type="radio" name="cinq_mai" value="non"> non <br />
                        Si oui : nombre d'adultes <input type="text" name="nbr_adultes_cinq_mai" style="width:25px;margin-right:25px;"> nombre d'enfants (- de 12 ans) <input type="text" name="nbr_enfants_cinq_mai" style="width:25px;"><br />
                        <br />
                        
                        Mail : <input type="text" name="email" id="email"<?php if(isset($_POST['email'])) echo htmlspecialchars($_POST['email']); ?>" />
                        
                        <!-- utiliser pour tester si on doit recup des données -->
                        <input type="hidden" name="action" value="envoi" />
                        <input type="submit" value="valider">
                        <?=$info?><?=$erreur?>
                </form>
			
		</div>
	</div>
	<script type="text/javascript" src="js/wowslider.js"></script>
	<script type="text/javascript" src="js/script.js"></script>
	<!-- End WOWSlider.com BODY section -->
</body>
</html>
Donc si vous avez une manière simple d'empêcher que la page s'actualise et reste donc "au même endroit" au moment où l'utilisateur clique sur "envoyer" je suis preneur ! :D

Merci d'avance pour vos réponses !

Re: Envoi d'un formulaire > empêcher l'actualisation de la p

Posté : 08 févr. 2013, 19:43
par xTG
Mets une ancre : 
<a name="monAncre"></a>
Et modifies ton url d'envoi de formulaire en rajoutant l'ancre (url#monAncre).
Ainsi la page sera scrollée à l'endroit de l'ancre.

Re: Envoi d'un formulaire > empêcher l'actualisation de la p

Posté : 08 févr. 2013, 20:00
par mtthjntt
Merci de ta réponse ! Alors, je ne suis pas vraiment sur de la manip que je dois faire avec l'ancre. En fait, lorsque l'utilisateur clique sur envoyer ça envoie directement le mail avec les valeurs contenues dans le formulaire. Je n'ai qu'une seule et même page donc dans l'idéal j'aimerais bien que la page ne "bouge" pas au moment où l'utilisateur clique sur le bouton envoyer..

Re: Envoi d'un formulaire > empêcher l'actualisation de la p

Posté : 08 févr. 2013, 20:38
par xTG
Pour ne pas qu'elle bouge il faut faire l'envoi en Javascript (Ajax).
Ou sinon pour que l'utilisateur soit ramené sur le formulaire (ou au niveau du message) on utilise une ancre.

Exemple : 
<?php
// Pour simuler un début de page
for($i=0; $i<30; $i++)
  echo "<br />";
?>

<a name="monAncre"></a>
<div class="message">Notre message d'erreur ou de confirmation</div>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>#monAncre" method="POST">
  <input type="submit" value="Envoyer" />
</form>

Re: Envoi d'un formulaire > empêcher l'actualisation de la p

Posté : 08 févr. 2013, 21:04
par mtthjntt
:D Trop cooool ! Merci énormément ! Ca marche nickel et c'est super simple à mettre en place ! Fallait-il encore y penser !
Merci encore !
Heures au format UTC+02:00
Page 1 sur 1
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/