Cacher un formulaire pour afficher du texte

Version imprimable

Bonjour à tous,

Je cherche depuis quelques jours à réaliser quelque chose en vain...

En effet, j'ai créé un formulaire de contact, et j'aimerai que celui-ci, une fois validé, disparaisse pour laisser place à du texte. Par exemple, l'utilisateur renseigne les informations nécessaires, et quand il valide le formulaire en cliquant sur le bouton, ce formulaire disparaît et une phrase du style "Merci, votre inscription a bien été prise en compte".

Voici mon code actuel :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div class="inscriptionnews">
    <p>Votre ville n'est pas encore programmée ? Inscrivez-vous à notre newsletter pour recevoir nos dates d'arrivées dans votre département.</p>
        <form id="form" action="" method="post">
               <div class="form-group">
                   <input type="text" name="ville" class="" placeholder="Département" autocomplete="off" required>
               </div>
               <div class="form-group">
                  <input type="email" name="email" class="" placeholder="Adresse email" autocomplete="off" required>
              </div>
             <input type="submit" class="boutonnews" value="S'inscrire" >
        </form>
   <div class="test123"><p>TEST</p></div>
</div>

Code:

1
2
3
4
5
6
7
8
9
10
 
$(function (){
    $("#form").submit(function(){
        ville = $(this).find("input[name=ville]").val();
        email = $(this).find("input[name=email]").val();
        $.post("../inscription_newsletter.php",{ville: ville, email: email},function(data){
    	})
    	return false;
    });
});

Le fichier "inscription_newsletter" contient le code permettant l'ajout à la base de données et l'envoi du mail.

Merci d'avance à tous !

Tu peux faire comme ça.

ATTENTION : je n'ai pas mis le chemin d'accès ../ au fichier inscription_newsletter.php car chez moi il est dans le même répertoire.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<style type="text/css">
</style>
<script language="JavaScript" type="text/javascript">
function soumettre() {
 var ville = $("input[name='ville']").val();
 var email = $("input[name='email']").val();       
 
 $.ajax
 ({            
   type: "POST",            
   url: "inscription_newsletter.php",            
   data: {ville: ville, email: email},            
   dataType: "html",            
   success: function(msg){    
    console.log('ok ' +msg);
           $("#mydiv").html('Merci, votre inscription a bien été prise en compte')
     return true;    
   },
   error:function(msg){
    console.log('ko '+msg);
    return false;
   }
 });    
}
</script>
</head>
<body>
<div class="inscriptionnews" id="mydiv">
    <p>Votre ville n'est pas encore programmée ? Inscrivez-vous à notre newsletter pour recevoir nos dates d'arrivées dans votre département.</p>
        <form id="form" action="" method="post">
               <div class="form-group">
                   <input type="text" name="ville" class="" placeholder="Département" autocomplete="off" required>
               </div>
               <div class="form-group">
                  <input type="email" name="email" class="" placeholder="Adresse email" autocomplete="off" required>
              </div>
             <input type="submit" class="boutonnews" value="S'inscrire" >
        </form>
   <div class="test123"><p>TEST</p></div>
</div>
<script language="JavaScript" type="text/javascript">
$(function ()
 {
  $('#form').submit(
   function ()
   {
    soumettre();
    return false;
   } 
  )
 }
)
</script>
</body>
</html>

21/08/2017, 15h16
ParisElliot

Merci beaucoup ça marche très bien ! Un peu de CSS et le tour est joué.
Encore merci !