Discussion :

[bajoran99]

Salut,

Je suis un nouveau développeurs web et débutant en javascript. Je fais actuellement un site web, j'ai fait un formulaire de contact qui est valider en JS et submit en PHP...

J'ai réussi à tout faire fonctionner le formulaire mais le problème est que lorsque le formulaire est submit avec le message de succès tout les informations inscrit dans les champs du formulaire reste inscrit et le formulaire ne se vide pas après l'envoi...

J'ai beaucoup chercher et j'ai rien trouvé de concluant.... Pouvez vous m'aider? Le formulaire fonctionne bien mais le formulaire ne se vide pas après qu'on clic sur submit... Que faire ? Merci d'avance !

Voici mon code combiné HTML,CSS,JAVASCRIPT...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<style>
body{width:610px;}
#frmContact {border-top:#F0F0F0 2px solid;background:#FAF8F8;padding:10px;}
#frmContact div{margin-bottom: 15px}
#frmContact div label{margin-left: 5px}
.demoInputBox{padding:10px; border:#F0F0F0 1px solid; border-radius:4px;}
.error{background-color: #FF6600;border:#AA4502 1px solid;padding: 5px 10px;color: #FFFFFF;border-radius:4px;}
.success{background-color: #12CC1A;border:#0FA015 1px solid;padding: 5px 10px;color: #FFFFFF;border-radius:4px;}
.info{font-size:.8em;color: #FF6600;letter-spacing:2px;padding-left:5px;}
.btnAction{background-color:#2FC332;border:0;padding:10px 40px;color:#FFF;border:#F0F0F0 1px solid; border-radius:4px;}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
function sendContact() {
        var valid;      
        valid = validateContact();
        if(valid) {
                jQuery.ajax({
                url: "contact_mail.php",
                data:'userName='+$("#userName").val()+'&userEmail='+$("#userEmail").val()+'&subject='+$("#subject").val()+'&content='+$(content).val(),
                type: "POST",
                success:function(data){
                $("#mail-status").html(data);
                },
                error:function (){}
                });
        }
}
 
function validateContact() {
        var valid = true;       
        $(".demoInputBox").css('background-color','');
        $(".info").html('');
        
        if(!$("#userName").val()) {
                $("#userName-info").html("(required)");
                $("#userName").css('background-color','#FFFFDF');
                valid = false;
        }
        if(!$("#userEmail").val()) {
                $("#userEmail-info").html("(required)");
                $("#userEmail").css('background-color','#FFFFDF');
                valid = false;
        }
        if(!$("#userEmail").val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)) {
                $("#userEmail-info").html("(invalid)");
                $("#userEmail").css('background-color','#FFFFDF');
                valid = false;
        }
        if(!$("#subject").val()) {
                $("#subject-info").html("(required)");
                $("#subject").css('background-color','#FFFFDF');
                valid = false;
        }
        if(!$("#content").val()) {
                $("#content-info").html("(required)");
                $("#content").css('background-color','#FFFFDF');
                valid = false;
        }
        
        return valid;
}
</script>
<div id="frmContact">
<div id="mail-status"></div>
<div>
<label style="padding-top:20px;">Name</label>
<span id="userName-info" class="info"></span><br/>
<input type="text" name="userName" id="userName" class="demoInputBox">
</div>
<div>
<label>Email</label>
<span id="userEmail-info" class="info"></span><br/>
<input type="text" name="userEmail" id="userEmail" class="demoInputBox">
</div>
<div>
<label>Subject</label> 
<span id="subject-info" class="info"></span><br/>
<input type="text" name="subject" id="subject" class="demoInputBox">
</div>
<div>
<label>Content</label> 
<span id="content-info" class="info"></span><br/>
<textarea name="content" id="content" class="demoInputBox" cols="60" rows="6"></textarea>
</div>
<div>
<button name="submit" class="btnAction" onClick="sendContact();">Send</button>
</div>
</div>
 
 
Voici le code PHP pour traiter les informations du formulaire...contact_mail.php
 
<?php 
$toEmail = $_POST["userEmail"];
$msg = $_POST["content"];
$subject = $_POST["subject"];
 
$headers = "From: " . $_POST["userName"] . "<". $_POST["userEmail"] .">\r\n";
 
if(mail($toEmail, $subject, $msg, $headers)) {
    
echo "<p class='success'>Contact Mail Sent.</p>";
} else {
echo
     "<p class='Error'>Problem in Sending Mail.</p>";
}
?>

Merci

[NoSmoking]

Bonjour,
il existe une méthode simple qui consiste à avoir un <input type="reset"> et de le cliquer, ou simuler le cilc, pour effacer tous les champs du formulaire.
Il faut bien sûr que tous les champs soient contenus dans un élément <form>, ce qui n'est pas le cas dans ton code HTML.