Cacher un formulaire après validation

tybmhi Messages postés 200 Date d'inscription Statut Membre Dernière intervention -
tybmhi Messages postés 200 Date d'inscription Statut Membre Dernière intervention - 14 juil. 2012 à 17:54

Bonjour,

Je viens de finir mon premier petit formulaire de contact en AJAX (ça été laborieux...). La vérification des champs et l'envoie du mail se font asynchrone donc ça c'est parfait. En revanche à la validation, j'aimerais que le formulaire disparaisse une fois que le mail à été envoyé et là ça fait des heures et des heures que je suis dessus mais je n'arrive à rien.
j'ai trouvé :

document.getElementById("formulaire_contact").style.display = "none";

Mais ça ne fonctionne pas.

Voici le bout de mon code sur la page de mon formulaire :

<script language="JavaScript">
function maFonctionAjax(pseudo_contact, mail_contact, message_contact)
{
  var OAjax;
  if (window.XMLHttpRequest) OAjax = new XMLHttpRequest();
  else if (window.ActiveXObject) OAjax = new ActiveXObject('Microsoft.XMLHTTP'); 
  OAjax.open('POST',"maPageDeRequPHP.php",true);
  OAjax.onreadystatechange = function()
  {
      if (OAjax.readyState == 4 && OAjax.status==200)
      {
          if (document.getElementById) 
          {    
              if (OAjax.responseText =='true') { /* OK */
                    document.getElementById('msg').innerHTML='<font color=blue>'+OAjax.responseText+'</font>';

document.getElementById("formulaire_contact").style.display = "none";

           
              }else{                             /* PAS OK */
                    document.getElementById('msg').innerHTML='<font color=RED>'+OAjax.responseText+'</font>';
              }
          }     
      }
  }
  OAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
  OAjax.send('pseudo_contact='+pseudo_contact+'&mail_contact='+mail_contact+'&message_contact='+message_contact);                  
} 
</script>

Merci d'avance à ceux qui pourrait m'aider. le formulaire a pour id="formulaire_contact"

--

Afficher la suite

A voir également:

Cacher un formulaire après validation
Whatsapp formulaire opposition - Guide
Formulaire de réclamation facebook - Guide
Formulaire de reclamation instagram - Guide
Cacher son numéro - Guide
Cacher conversation whatsapp - Guide

2 réponses

Réponse 1 / 2

lokakilo Messages postés 213 Date d'inscription Statut Membre Dernière intervention 14

Est ce que tu as essayer dans ton HTML de mettre ça (dans le input du bouton envoyer du formulaire) :

<input type="submit" name="submit" value="Envoyer" onclick="javascript:document.getElementById('formulaire_contact').style.display='none';" />

Réponse 2 / 2

tybmhi Messages postés 200 Date d'inscription Statut Membre Dernière intervention 12

Bonjour lokakilo ! Et merci de ta réponse.
Je pense avoir plus de précision sur mon problème. J'ai remplacé

document.getElementById("formulaire_contact").style.display = "none";

par :

$('div#contact_form').html('<span id=\'confirmMsg\'>Envoye</span>');

J'ai remarqué que ce code fonctionne très bien mais seulement lorsqu'il est placé après le else donc si le retour est "false". Je crois qu'en fait mon formulaire ne renvoie pas "true" alors qu'il envoie le mail quand même et que tout se passe bien. J'ai peut-être mal "orthographé" ce code. Si quelqu'un voit une faute je suis preneur. J'ai essayé de changer les guillemets avec des quotes mais rien n'y fait.

Mon code maintenant sur la page du formulaire :

<script language="JavaScript">
function maFonctionAjax(pseudo_contact, mail_contact, message_contact)
{
var OAjax;
if (window.XMLHttpRequest) OAjax = new XMLHttpRequest();
else if (window.ActiveXObject) OAjax = new ActiveXObject('Microsoft.XMLHTTP');
OAjax.open('POST',"maPageDeRequPHP.php", true);
OAjax.onreadystatechange = function()
{
if (OAjax.readyState == 4 && OAjax.status==200)
{
if (document.getElementById)
{
if (OAjax.responseText == true) { /* OK */

$('div#contact_form').html('<span id=\'confirmMsg\'>Envoyé !</span>');

}else{ /* PAS OK */
document.getElementById('msg').innerHTML='<font color=RED>'+OAjax.responseText+'</font>';

}
}
}
}
OAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
OAjax.send('pseudo_contact='+pseudo_contact+'&mail_contact='+mail_contact+'&message_contact='+message_contact);
}
</script>

Voici une partie de mon formulaire :

<div id="contact_form"> 
<form name="formulaire_contact" id="formulaire_contact" method="POST" onsubmit="maFonctionAjax(this.pseudo_contact.value,this.mail_contact.value,this.message_contact.value);return false" action=""> 

... 


<input type="submit" value="envoyer"  name="submit_message_contact"/> 

</form> 
</div>

Et la page php qui exécute la requête :

<? 
include('repetition/connexion.php'); 

$adresse = $_POST['mail_contact']; 

function VerifierAdresseMail($adresse)  
{  
   $Syntaxe='#^[\w.-]+@[\w.-]+\.[a-zA-Z]{2,6}$#';  
   if(preg_match($Syntaxe, $adresse))  
      return true;  
   else  
     return false;  
} 

$erreurs=array();//tableau qui stocke les erreurs. 

if(!$_POST['pseudo_contact']){ 
    
    $erreurs[]='Veuillez entrer un pseudo'; 
} 
else { 
if ((strlen($_POST['pseudo_contact']) < 3)  
OR (strlen($_POST['pseudo_contact']) > 20)) { 

$erreurs[]='Le pseudo doit comporter plus de 3 caractères'; 
}} 

if(!VerifierAdresseMail($adresse)) { 
    $erreurs[]='Veuillez entrer un mail valide'; 
} 


if(!$_POST['message_contact']){ 

    $erreurs[]='Veuillez entrer un message'; 
} 
else { 
 if ((strlen($_POST['message_contact'])) < 10) { 

$erreurs[]='Votre message est trop court'; 
}} 

if(count($erreurs)==0) 
{ 
     
    //ici tu enregistres les valeurs dans la bdd 


    $pseudo_contact = mysql_real_escape_string(htmlspecialchars($_POST['pseudo_contact'])); 
    $mail_contact = mysql_real_escape_string(htmlspecialchars($_POST['mail_contact'])); 
 $message_contact = nl2br(htmlspecialchars($_POST['message_contact'])); 
  
      

$msg = "Pseudo :\t$pseudo_contact\n";  
$msg .= "E-Mail:\t$mail_contact\n"; 
$msg .= "Message:\t$message_contact\n\n"; 
if (isset($pseudo_membre)){ 
$msg .= "Age :\t$age_membre\n"; 
$msg .= "Statut :\t$statut_membre\n"; 
$msg .= "Ville :\t$ville_membre\n"; 
$msg .= "Département :\t$departement_membre\n"; 
} 
else { 
$msg .= "Contact non connecté !";  
} 
$recipient = "tybmhi@gmail.com"; 
$subject = "Contact"; 
$mailheaders = "From: www.safe-school.fr\n\n"; 
$mailheaders .= "Reply-To: $mail_contact\n\n"; 

mail($recipient, $subject, $msg, $mailheaders); 

//cette valeur sera traité par ajax et signifie que tt se passe bien 
echo "true"; 
;  
} 
else 
{ 

    echo "<p class='erreur'>"; 
        for($i=0;$i<count($erreurs);$i++) 
        { 
        echo "- ".$erreurs[$i].".<br />"; 
        } 
    echo "</p>"; 
} 
?>

Discussions similaires

Problème de restrictions

Impossible d'utiliser ce numéro de téléphone pour la validat

Civilité (Mr,Mme,Melle) n' apparait pas lors de l'exécution du formulaire

Ma commande est en cours de validation sur Fnac

Impossible d'utiliser numéro de téléphone validation

Votre réponse

Discussions similaires