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

par **mtthjntt** » 08 févr. 2013, 21:04

Trop cooool ! Merci énormément ! Ca marche nickel et c'est super simple à mettre en place ! Fallait-il encore y penser !
Merci encore !

par **xTG** » 08 févr. 2013, 20:38

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>

par **mtthjntt** » 08 févr. 2013, 20:00

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..

par **xTG** » 08 févr. 2013, 19:43

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.

par **mtthjntt** » 08 févr. 2013, 18:37

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 !

Merci d'avance pour vos réponses !

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

Répondre

Étendre la vue Revue du sujet : Envoi d'un formulaire > empêcher l'actualisation de la page

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

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

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

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

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