Bonjour à tous,
j'ai besoin d'un petit contact form en ajax qui permet d'envoyer un message sans recharger la page.
Comme je suis une quiche en ajax, j'ai trouvé ce petit script sur le net qui est vieux mais qui fonctionne bien.
https://webdesign.tutsplus.com/fr/tu...jax--cms-23068
mon problème c'est que j'aurai besoin d'y intégrer une checkbox qui doit être "checked" pour confirmer l'envoi de ce form
donc comment faire ???
coté html pas de problème : formulaire.php
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 <form role="form" id="contactForm" class="contact-form" data-toggle="validator" class="shake"> .... <div class="row"> <div class="form-group col-sm-6"> <label for="name" class="h4">Name</label> <input type="text" class="form-control" id="name" placeholder="Enter name" required> </div> <div class="form-group col-sm-6"> <label for="email" class="h4">Email</label> <input type="email" class="form-control" id="email" placeholder="Enter email" required> </div> </div> <div class="form-group"> <label for="message" class="h4 ">Message</label> <textarea id="message" class="form-control" rows="5" placeholder="Enter your message" required></textarea> </div> <div class="form-group"> <input type="checkbox" id="checkaccord" required data-error="Veuillez accepter les conditions">blavlavla </div> <button type="submit" id="form-submit" class="btn btn-success btn-lg pull-right ">Submit</button> <div id="msgSubmit" class="h3 text-center hidden">Message Submitted!</div>....</form>
coté php : form-process.php
Code php : 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 $errorMSG = ""; // NAME if (empty($_POST["name"])) { $errorMSG = "Name is required "; } else { $name = $_POST["name"]; } // EMAIL if (empty($_POST["email"])) { $errorMSG .= "Email is required "; } else { $email = $_POST["email"]; } // MESSAGE if (empty($_POST["message"])) { $errorMSG .= "Message is required "; } else { $message = $_POST["message"]; } ??????????????? $EmailTo = "emailaddress@test.com"; $Subject = "New Message Received"; // prepare email body text $Body .= "Name: "; $Body .= $name; $Body .= "\n"; $Body .= "Email: "; $Body .= $email; $Body .= "\n"; $Body .= "Message: "; $Body .= $message; $Body .= "\n"; // send email $success = mail($EmailTo, $Subject, $Body, "From:".$email); // redirect to success page if ($success){ echo "success"; }else{ echo "invalid"; }
coté js
Code : 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 $("#contactForm").validator().on("submit", function (event) { if (event.isDefaultPrevented()) { // handle the invalid form... formError(); submitMSG(false, "Vous n'avez pas rempli correctement le formulaire?"); } else { // everything looks good! event.preventDefault(); submitForm(); } }); function submitForm(){ // Initiate Variables With Form Content var name = $("#name").val(); var email = $("#email").val(); var msg_subject = $("#msg_subject").val(); var message = $("#message").val(); var ref_msg = $("#ref_msg").val(); ?????????????????????? $("#loader").show(); $.ajax({ type: "POST", url: "form-process.php", data: "name=" + name + "&email=" + email + "&msg_subject=" + msg_subject + "&message=" + message + "&ref_msg=" + ref_msg, success : function(text){ if (text == "success"){ formSuccess(); } else { formError(); submitMSG(false,text); } } }); } function formSuccess(){ $("#contactForm")[0].reset(); submitMSG(true, "Message envoyé !") $("#loader").hide(); } function formError(){ $("#contactForm").removeClass().addClass('shake animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ $(this).removeClass(); }); } function submitMSG(valid, msg){ if(valid){ var msgClasses = "h4 text-center tada animated text-success"; } else { var msgClasses = "h4 text-center color1"; } $("#msgSubmit").removeClass().addClass(msgClasses).text(msg); }
Partager