Cacher un formulaire après validation

Fermé
tybmhi Messages postés 200 Date d'inscription dimanche 13 juillet 2008 Statut Membre Dernière intervention 18 septembre 2017 - 14 juil. 2012 à 14:58
tybmhi Messages postés 200 Date d'inscription dimanche 13 juillet 2008 Statut Membre Dernière intervention 18 septembre 2017 - 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"

--

2 réponses

lokakilo Messages postés 213 Date d'inscription dimanche 13 juillet 2008 Statut Membre Dernière intervention 20 juin 2013 14
14 juil. 2012 à 16:13
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';" />
1
tybmhi Messages postés 200 Date d'inscription dimanche 13 juillet 2008 Statut Membre Dernière intervention 18 septembre 2017 12
Modifié par tybmhi le 14/07/2012 à 17:55
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>"; 
} 
?>
0