Réinitialiser un formulaire sans charger la page avec Ajax

Question

nenetta

6 Jul 2015 à 14:28

Bonjour le forum,

J'ai crée un formulaire de contact et j'ai réussi à envoyer les informations sans rafraîchir ma page avec Ajax, mais après l'affichage de mon message de confirmation, le formulaire n'est pas réinitialiser, il me faut absolument recharger la page.
j'ai fait un

document.getElementById("myForm").reset();

mais c'est avant la confirmation d'envoi
Je suis débutante sur Ajax, aidez moi svp

_laurent

Modérateur

6 Jul 2015 à 15:12

Bonjour,

nenetta a écrit :
j'ai fait un
[...]
mais c'est avant la confirmation d'envoi

Et bien il te suffit de mettre ce reset au moment de ta confirmation d'envoi plutôt qu'avant. Smiley confus

ou alors je n'ai pas bien compris...

nenetta

6 Jul 2015 à 15:32

_laurent a écrit :
Bonjour,

Et bien il te suffit de mettre ce reset au moment de ta confirmation d'envoi plutôt qu'avant. ou alors je n'ai pas bien compris...

j'ai un bouton qui m'affiche le formulaire, quand je valide le message de confirmation est affiché sur le même div que le formulaire, j'arrive pas à fermer ce message avec self.close(), aussi quand je clique sur le bouton pour qu'il m'affiche le formulaire c'est plutôt le message de confirmation qui est affiché donc obligée de rafraîchir la page.. je sais pas si j'arrive à m'expliquer là Smiley decu

JENCAL

6 Jul 2015 à 16:00

nenetta a écrit :
Bonjour le forum,

J'ai crée un formulaire de contact et j'ai réussi à envoyer les informations sans rafraîchir ma page avec Ajax, mais après l'affichage de mon message de confirmation, le formulaire n'est pas réinitialiser, il me faut absolument recharger la page.
j'ai fait un
document.getElementById("myForm").reset();
mais c'est avant la confirmation d'envoi
Je suis débutante sur Ajax, aidez moi svp

Ton ajax ce passe après ton message de confirmation, ton reset tu dois le mettre après la réponse ajax comme l'a justement dit jaqen h'ghar. ton ajax l'as tu fait en JS ou un Jquery ?
Modifié par JENCAL (06 Jul 2015 - 16:01)

nenetta

6 Jul 2015 à 16:10

JENCAL a écrit :

Ton ajax ce passe après ton message de confirmation, ton reset tu dois le mettre après la réponse ajax comme l'a justement dit jaqen h'ghar. ton ajax l'as tu fait en JS ou un Jquery ?

Bonjour

je l'ai fait en JS, il se passe avant mon message de confirmation.

JENCAL

6 Jul 2015 à 16:18

Ah..

Tu fais l'ajax, et tu demande après si l'utilisateur est ok ? ^^

JENCAL

6 Jul 2015 à 16:20

	if (window.XMLHttpRequest) {
	xmlhttp = new XMLHttpRequest();
	} else {
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
		   	document.getElementById("myForm").reset();
		}
	}
	xmlhttp.open("Pblabalcheminblablablabla",true);
	xmlhttp.send();

nenetta

6 Jul 2015 à 16:24

JENCAL a écrit :

	if (window.XMLHttpRequest) {
	xmlhttp = new XMLHttpRequest();
	} else {
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200) {
		   	document.getElementById("myForm").reset();
		}
	}
	xmlhttp.open("Pblabalcheminblablablabla",true);
	xmlhttp.send();

en fait, j'ai fait le traitement sur la même fonction d'Ajax, voici mon code
c'est pas bien de procéder comme ça?

function senddata(){
	var email=document.getElementById("mail").value;
	var res=true;
	
  if (document.getElementById("your-name").value=="")
  {document.getElementById("error-name").style.display = "block";
  res=false;}
  else
	  {document.getElementById("error-name").style.display = "none";}
  
 if (email==""){
    document.getElementById("error-email").style.display = "block";
	document.getElementById("error-email").innerHTML="Veuillez remplir le champ obligatoire.";
	 res=false;
 }
  else  document.getElementById("error-email").style.display = "none";
 
 if (document.getElementById("message").value==""){
    document.getElementById("error-message").style.display = "block";
	 res=false;
 }
  else document.getElementById("error-message").style.display = "none";
  
if ((email!="")&&(( email.indexOf("@") == -1 ) || ( email.indexOf("@") == 0 ) || ( email.indexOf("@") != email.lastIndexOf("@") ) || ( email.indexOf(".") == email.indexOf("@")-1 ) || ( email.indexOf(".") == email.indexOf("@") +1 ) || ( email.indexOf("@") == email.length -1 ) || ( email.indexOf (".") == -1 ) || ( email.lastIndexOf (".") == email.length -1 )  ))
	{
		document.getElementById("mail").style.borderColor="#FF0000";
		document.getElementById("error-email").style.display = "block";
		document.getElementById("error-email").innerHTML="email invalid";
        res=false;
	}
	
	
	
	if (res==true){
	var dataO = new Object();
	dataO.nom=document.getElementById('your-name').value;
	dataO.tel=document.getElementById('tel').value;
	dataO.email=document.getElementById('mail').value;
	dataO.message=document.getElementById('message').value;
	
	 $.ajax({
      type: "GET",
	  data:dataO,
      url: "#"
   }).done(function(html){
      $('.show').html(html); 
   }
);
document.getElementById["#anonymous-subscriber-node-form"].reset();
} 

}

Modifié par nenetta (06 Jul 2015 - 16:25)

JENCAL

6 Jul 2015 à 16:30

Ok

donc : $.ajax
c'est de l'ajax jquery

ton url: "#" fait bien appel a un fichier php ? ce fichier php te renvoi un résultat ou non ?

_____________

edit :
Si tu fais un clic droit -> inspecter l'element -> console.. as tu une erreur ?
Modifié par JENCAL (06 Jul 2015 - 16:36)

nenetta

6 Jul 2015 à 16:37

JENCAL a écrit :
Ok

donc : $.ajax
c'est de l'ajax jquery

ton url: "#" fait bien appel a un fichier php ? ce fichier php te renvoi un résultat ou non ?

_____________

Ah ok desolée,

j'ai mis "#" pour rester sur la même page, il fait appel à aucun autre fichier.

Edit : non aucune erreur sur ma console,

sinon ou devrais - je placer le "document.getElementById("").reset(); "?
Modifié par nenetta (06 Jul 2015 - 16:40)

JENCAL

6 Jul 2015 à 16:40

Ok tu reste sur la même, page, du coup j'ai jamais fait, au pire tu peux omettre le variable URL par défault c'est sur la même page. mais si tu es sur que le # fonctionne aussi Smiley smile

JENCAL

6 Jul 2015 à 16:43

document.getElementById["#anonymous-subscriber-node-form"].reset();

??

pourquoi des [] (crochets) ^^
Modifié par JENCAL (06 Jul 2015 - 16:47)

nenetta

6 Jul 2015 à 16:48

Ah j'ai corrigé cette erreur tkt

JENCAL

6 Jul 2015 à 16:49

nenetta a écrit :

sinon ou devrais - je placer le "document.getElementById("").reset(); "?

dans le done, ou dans le success(mais tu n'en a pas)

nenetta

6 Jul 2015 à 16:49

JENCAL a écrit :
Ok tu reste sur la même, page, du coup j'ai jamais fait, au pire tu peux omettre le variable URL par défault c'est sur la même page. mais si tu es sur que le # fonctionne aussi

ça fonctionne, j'ai un problème juste avec le message de confirmation que je l'ai mis sur le même div du formulaire donc impossible de le fermer par un simple window.close() Smiley ohwell

nenetta

6 Jul 2015 à 16:58

JENCAL a écrit :

dans le done, ou dans le success(mais tu n'en a pas)

et je peux les mettre pour ajax jquery? sinon un lien utile?
Modifié par nenetta (06 Jul 2015 - 17:08)

JENCAL

6 Jul 2015 à 17:02

Il est ou ton message de confirmation là ?

nenetta

6 Jul 2015 à 17:11

JENCAL a écrit :
Il est ou ton message de confirmation là ?

voilà


<?php if ($_GET['nom']!=""){
	$nom=$_GET['nom'];
	$tel=$_GET['tel'];
	$email=$_GET['email'];
	$message=$_GET['message'];

	
	            $sujet = 'Demande de devis';
                $message = "Bonjour,<br /> 
                <strong>Vous avez une demande de devis en attente. </strong><br /> 
                 Nom : ".$nom." <br />
                Tél. : ".$tel."<br />
                Email : ".$email."<br />
                   Message : ".$message."<br />
                      <br />
                               Merci ";
//$destinataire = 'contact@';
$destinataire = 'samah@';
$headers = "From: \"\"<contact@.net>\n";
$headers .= "Reply-To: contact@.net\n";
$headers .= "Content-Type: text/html; charset=\"iso-8859-1\"";
   if(mail($destinataire,$sujet,"$message",$headers))
{  
	?>			 			 
	 
        <section class="popup-mid popup-mid-newsletter" id="content" >
          <div class="inside" id="content"><div>
    <header>
      <h3>Merci M. <?php echo $nom; ?>, votre demande a bien été prise en compte !</h3>
    </header>
    <div class="content">
      <div class="view-b">
        <div class="pre-text">
          Vous devriez recevoir notre réponse rapidement.       </div>
      </div>
    </div>
    <a class="close thank-you utilities close-btn-processed-processed" href="javascript: void(0)">Fermer</a>

Modifié par nenetta (06 Jul 2015 - 17:12)

JENCAL

6 Jul 2015 à 17:14

donc quand il clic sur

<a class="close thank-you utilities close-btn-processed-processed" href="javascript: void(0)">Fermer</a>

ton formulaire doit se vider?
Si oui
tu peux mettre

// en dehors de la function senddata()

$(".close").click(function(){
	document.getElementById("anonymous-subscriber-node-form").reset();
});

EDIT :
noublie pas que dans
document.getElementById("#anonymous-subscriber-node-form").reset();
tu dois enlever le # pour
document.getElementById("anonymous-subscriber-node-form").reset();
Modifié par JENCAL (06 Jul 2015 - 17:17)

Sujet clos

JavaScript, DOM et API Web HTML5

Réinitialiser un formulaire sans charger la page avec Ajax