11484 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Cancel le refresh d'un submit

Bonsoir/bonjour,
j'ai créé un formulaire method post afin de récupérer les données inscrites dedans.
Côté php tout vas bien ! Hélas je bloque sur un truc : le refresh de la page Smiley fache
En fait lorsque le client valide son formulaire la page se refresh instant sans même donner signe que le formulaire a bien été envoyé. Si vous avez des suggestions de méthodes jolies et sympa pour l'informer je prends sinon, j'aimerais savoir comment je pourrais cancel le refresh de la page mais en vidant bien les deux inputs et le textarea du formulaire tout en indiquant par X méthode que le formulaire a bien été transmit. Je ne souhaite pas rediriger sur une autre page de préférence Smiley ravi . On m'a conseillé Ajax mais j'ai aucune connaissance là-dedans et j'ai essayé avec e.preventDefault() mais ça cancel l'event submit (logique Smiley sweatdrop ).

Merci d'avoir pris le temps de lire ^^
(même si inutile le formulaire ressemble à ça)
            <form method='POST' action=''>
                <h1>Me contacter</h1>
                <div class="footer_form">
                    <input type="text" class="name" name='Nom' maxlength="20" placeholder="Your Name*" onfocus="this.placeholder=''" onblur="this.placeholder='Votre nom*'" required='required'>
                    <input type="email" class="email" name='Email' placeholder="Indiquez une adresse email valide*" onfocus="this.placeholder=''" onblur="this.placeholder='Indiquez une adresse email valide*'"   required="required">
                    <textarea rows="1" class="message" name='Message' placeholder="Votre message ici...*" onfocus="this.placeholder=''" onblur="this.placeholder='Votre message ici...*'" required='required' style="resize: none;"></textarea>
                </div>
                <div class="footer_contact">
                    <button type="submit">Envoyer votre message</button>
                </div>
            </form>
Modérateur
Bonjour,

c'est coté PHP qu'il faut que tu regardes, ta partie HTML ne fera rien d'autre qu'afficher le formulaire.

Après le submit tu traites apparemment bien tes infos Côté php tout vas bien ! Hélas je bloque sur un truc : le refresh de la page.

C'est a ce moment là que tu peut vérifier ce qui a été posté afficher un message d'erreur , remerciement ou un récapitulatif de ce qui a était soumis par ton formulaire.

Exemple de base.
if((isset($_POST['Nom']) && (!empty($_POST['Nom']) )  {echo '<p>Bonjour  '.$_POST['Nom'].', bla bla ...</p>';}


Cdt
Modifié par gcyrillus (25 Apr 2021 - 15:04)
Bonjour gcyrillus,
Peut-être que je me trompe, mais il me semble que là, lors de la soumission du formulaire, ses champs se vident. Ainsi, si je ne me trompe pas, le message que tu proposes ne s'afficherait jamais, car le champ sera vide au démarrage de la page et de même lors du rafraichissement du php...

Bonjour Efeelios,

Je crois qu'il faut plutôt utiliser la session...

Peut-être un code comme ça (je suis désolé, mais je n'ai pas testé : il manque peut-être un petit truc...) :

<?php
	session_start();
	if(isset($_POST['Nom']) && (!empty($_POST['Nom']){
	        $_SESSION['flash']="Le formulaire a bien été envoyé";
	}
?>
<!DOCTYPE html>
<html>
	<head>
[...]
<?php
            if (isset( $_SESSION['flash'])){
                echo($_SESSION['flash']);
                unset($_SESSION['flash']);
            }
?>
[...]

Si ça fonctionne, tu peux aussi remplacer le message par du code HTML puis ajouter style ou class et id puis style en css...


--------------------------------------------------------------------------------------------------
Quand vous avez trouvé votre réponse, cochez "Résolu" et indiquez la meilleure solution.
Bonsoir, merci à vous d'avoir essayé.
J'ai trouvé et aucune de vos réponses n'étaient malheureusement la bonne ou du moins n'a fonctionné pour mon cas.
Je suis passé par une XMLHttpRequest et ça a fonctionné.

Merci de votre aide tout de même
Modérateur
js_html a écrit :
Bonjour gcyrillus,
Peut-être que je me trompe, mais il me semble que là, lors de la soumission du formulaire, ses champs se vident.


Bonsoir js_html Smiley smile

Oui et non. son formulaire n'a pas d'URL spécifique sur action="" , ce qui veut dire que la page se soumet/ s’envoie à elle même le formulaire. toutes tes valeurs $_POST sont donc dispos au chargement de la page si le formulaire a été soumis . Et au lieu de seulement les traitées, tu peut les affichées à la place du formulaire.

exemple :
<form method='POST' action=''>
<?php 
if((isset($_POST['Nom'])) && (!empty($_POST['Nom']) ))  {echo '<p>Bonjour  '.$_POST['Nom'].', merci de m\'avoir contacté</p>';
  } else { ?>
	<h1>Me contacter</h1>
	<div class="footer_form">
		<input type="text" class="name" name='Nom' maxlength="20" placeholder="Your Name*" onfocus="this.placeholder=''" onblur="this.placeholder='Votre nom*'" required='required'>
		<input type="email" class="email" name='Email' placeholder="Indiquez une adresse email valide*" onfocus="this.placeholder=''" onblur="this.placeholder='Indiquez une adresse email valide*'"   required="required">
		<textarea rows="1" class="message" name='Message' placeholder="Votre message ici...*" onfocus="this.placeholder=''" onblur="this.placeholder='Votre message ici...*'" required='required' style="resize: none;"></textarea>
	</div>
	<div class="footer_contact">
		<button type="submit">Envoyer votre message</button>
	</div>
<?php } ?>
</form>

Cette exemple affiche un message au lieu du formulaire aprés soumission.

Cdt
Modifié par gcyrillus (26 Apr 2021 - 00:35)
Sujet clos
Aller à